File Block: Move copy url button is to the toolbar (#26602)

Co-authored-by: Riad Benguella <benguella@gmail.com>

packages/block-library/CHANGELOG.md

@@ -8,6 +8,10 @@
 - Fix a regression ([#26545](https://github.com/WordPress/gutenberg/pull/26545)) where the Cover block lost its default background overlay color
   ([#26569](https://github.com/WordPress/gutenberg/pull/26569)).
 
+### Enhancement
+
+- File Block: Copy url button is moved to Block toolbar.
+
 ## 2.23.0 (2020-09-03)
 
 ### Enhancement

packages/block-library/src/file/edit.js

@@ -9,8 +9,9 @@ import classnames from 'classnames';
 import { getBlobByURL, isBlobURL, revokeBlobURL } from '@wordpress/blob';
 import {
 	__unstableUseAnimate as useAnimate,
-	ClipboardButton,
 	withNotices,
+	ToolbarGroup,
+	ToolbarButton,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import {
@@ -21,7 +22,8 @@ import {
 	RichText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
+import { useCopyOnClick } from '@wordpress/compose';
 import { __, _x } from '@wordpress/i18n';
 import { file as icon } from '@wordpress/icons';
 
@@ -30,13 +32,22 @@ import { file as icon } from '@wordpress/icons';
  */
 import FileBlockInspector from './inspector';
 
-function FileEdit( {
-	isSelected,
-	attributes,
-	setAttributes,
-	noticeUI,
-	noticeOperations,
-} ) {
+function ClipboardToolbarButton( { text, disabled } ) {
+	const ref = useRef();
+	const hasCopied = useCopyOnClick( ref, text );
+
+	return (
+		<ToolbarButton
+			className="components-clipboard-toolbar-button"
+			ref={ ref }
+			disabled={ disabled }
+		>
+			{ hasCopied ? __( 'Copied!' ) : __( 'Copy URL' ) }
+		</ToolbarButton>
+	);
+}
+
+function FileEdit( { attributes, setAttributes, noticeUI, noticeOperations } ) {
 	const {
 		id,
 		fileName,
@@ -47,7 +58,6 @@ function FileEdit( {
 		downloadButtonText,
 	} = attributes;
 	const [ hasError, setHasError ] = useState( false );
-	const [ showCopyConfirmation, setShowCopyConfirmation ] = useState( false );
 	const { media, mediaUpload } = useSelect(
 		( select ) => ( {
 			media:
@@ -82,10 +92,6 @@ function FileEdit( {
 		}
 	}, [] );
 
-	useEffect( () => {
-		setShowCopyConfirmation( false );
-	}, [ isSelected ] );
-
 	function onSelectFile( newMedia ) {
 		if ( newMedia && newMedia.url ) {
 			setHasError( false );
@@ -104,14 +110,6 @@ function FileEdit( {
 		noticeOperations.createErrorNotice( message );
 	}
 
-	function confirmCopyURL() {
-		setShowCopyConfirmation( true );
-	}
-
-	function resetCopyConfirmation() {
-		setShowCopyConfirmation( false );
-	}
-
 	function changeLinkDestinationOption( newHref ) {
 		// Choose Media File or Attachment Page (when file is in Media Library)
 		setAttributes( { textLinkHref: newHref } );
@@ -171,13 +169,19 @@ function FileEdit( {
 				} }
 			/>
 			<BlockControls>
-				<MediaReplaceFlow
-					mediaId={ id }
-					mediaURL={ href }
-					accept="*"
-					onSelect={ onSelectFile }
-					onError={ onUploadError }
-				/>
+				<ToolbarGroup>
+					<MediaReplaceFlow
+						mediaId={ id }
+						mediaURL={ href }
+						accept="*"
+						onSelect={ onSelectFile }
+						onError={ onUploadError }
+					/>
+					<ClipboardToolbarButton
+						text={ href }
+						disabled={ isBlobURL( href ) }
+					/>
+				</ToolbarGroup>
 			</BlockControls>
 			<div { ...blockProps }>
 				<div className={ 'wp-block-file__content-wrapper' }>
@@ -214,20 +218,6 @@ function FileEdit( {
 						</div>
 					) }
 				</div>
-				{ isSelected && (
-					<ClipboardButton
-						isSecondary
-						text={ href }
-						className={ 'wp-block-file__copy-url-button' }
-						onCopy={ confirmCopyURL }
-						onFinishCopy={ resetCopyConfirmation }
-						disabled={ isBlobURL( href ) }
-					>
-						{ showCopyConfirmation
-							? __( 'Copied!' )
-							: __( 'Copy URL' ) }
-					</ClipboardButton>
-				) }
 			</div>
 		</>
 	);

packages/block-library/src/file/editor.scss

@@ -21,8 +21,4 @@
 		display: inline-block;
 		margin-left: 0.75em;
 	}
-
-	.wp-block-file__copy-url-button {
-		margin-left: 1em;
-	}
 }

packages/components/CHANGELOG.md

@@ -4,7 +4,6 @@
 
 - Introduce `Navigation` component as `__experimentalNavigation` for displaying a hierarchy of items.
 
-
 ### Breaking Change
 
 - Introduce support for other units and advanced CSS properties on `FontSizePicker`. Provided the value passed to the `FontSizePicker` is a string or one of the size options passed is a string, onChange will start to be called with a string value instead of a number. On WordPress usage, font size options are now automatically converted to strings with the default "px" unit added.

packages/e2e-tests/specs/local/demo.test.js

@@ -39,6 +39,8 @@ describe( 'new editor state', () => {
 		} );
 		expect( isDirty ).toBeTruthy();
 
+		await page.waitForSelector( 'button.editor-post-save-draft' );
+
 		expect( await page.$( 'button.editor-post-save-draft' ) ).toBeTruthy();
 	} );
 } );