Consolidate disparate "copy block" actions (#23088)

* make copied Block flash * show copy Blocks notifications from block-actions Copy button Refactored BlockActions component to use hooks * ClipboardButton make onFinishCopy optional attribute * Simplify onFinishCopy check
WordPress · Jun 12, 2020 · 84df4bd · 84df4bd
1 parent d99dc47
commit 84df4bd
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 130 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -6,129 +6,106 @@ import { castArray, first, last, every } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { hasBlockSupport, switchToBlockType } from '@wordpress/blocks';
 
-function BlockActions( {
-	canDuplicate,
-	canInsertDefaultBlock,
-	children,
-	isLocked,
-	onDuplicate,
-	onGroup,
-	onInsertAfter,
-	onInsertBefore,
-	onRemove,
-	onUngroup,
-	blocks,
-} ) {
+/**
+ * Internal dependencies
+ */
+import { useNotifyCopy } from '../copy-handler';
+
+export default function BlockActions( { clientIds, children } ) {
+	const {
+		canInsertBlockType,
+		getBlockRootClientId,
+		getBlocksByClientId,
+		getTemplateLock,
+	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
+	const {
+		getDefaultBlockName,
+		getGroupingBlockName,
+	} = useSelect( ( select ) => select( 'core/blocks' ) );
+
+	const blocks = getBlocksByClientId( clientIds );
+	const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+	const canDuplicate = every( blocks, ( block ) => {
+		return (
+			!! block &&
+			hasBlockSupport( block.name, 'multiple', true ) &&
+			canInsertBlockType( block.name, rootClientId )
+		);
+	} );
+
+	const canInsertDefaultBlock = canInsertBlockType(
+		getDefaultBlockName(),
+		rootClientId
+	);
+
+	const {
+		removeBlocks,
+		replaceBlocks,
+		duplicateBlocks,
+		insertAfterBlock,
+		insertBeforeBlock,
+		flashBlock,
+	} = useDispatch( 'core/block-editor' );
+
+	const notifyCopy = useNotifyCopy();
+
 	return children( {
 		canDuplicate,
 		canInsertDefaultBlock,
-		isLocked,
-		onDuplicate,
-		onGroup,
-		onInsertAfter,
-		onInsertBefore,
-		onRemove,
-		onUngroup,
+		isLocked: !! getTemplateLock( rootClientId ),
+		rootClientId,
 		blocks,
+		onDuplicate() {
+			return duplicateBlocks( clientIds );
+		},
+		onRemove() {
+			removeBlocks( clientIds );
+		},
+		onInsertBefore() {
+			insertBeforeBlock( first( castArray( clientIds ) ) );
+		},
+		onInsertAfter() {
+			insertAfterBlock( last( castArray( clientIds ) ) );
+		},
+		onGroup() {
+			if ( ! blocks.length ) {
+				return;
+			}
+
+			const groupingBlockName = getGroupingBlockName();
+
+			// Activate the `transform` on `core/group` which does the conversion
+			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+
+			if ( ! newBlocks ) {
+				return;
+			}
+			replaceBlocks( clientIds, newBlocks );
+		},
+		onUngroup() {
+			if ( ! blocks.length ) {
+				return;
+			}
+
+			const innerBlocks = blocks[ 0 ].innerBlocks;
+
+			if ( ! innerBlocks.length ) {
+				return;
+			}
+
+			replaceBlocks( clientIds, innerBlocks );
+		},
+		onCopy() {
+			const selectedBlockClientIds = blocks.map(
+				( { clientId } ) => clientId
+			);
+			if ( blocks.length === 1 ) {
+				flashBlock( selectedBlockClientIds[ 0 ] );
+			}
+			notifyCopy( 'copy', selectedBlockClientIds );
+		},
 	} );
 }
-
-export default compose( [
-	withSelect( ( select, props ) => {
-		const {
-			canInsertBlockType,
-			getBlockRootClientId,
-			getBlocksByClientId,
-			getTemplateLock,
-		} = select( 'core/block-editor' );
-		const { getDefaultBlockName } = select( 'core/blocks' );
-
-		const blocks = getBlocksByClientId( props.clientIds );
-		const rootClientId = getBlockRootClientId( props.clientIds[ 0 ] );
-		const canDuplicate = every( blocks, ( block ) => {
-			return (
-				!! block &&
-				hasBlockSupport( block.name, 'multiple', true ) &&
-				canInsertBlockType( block.name, rootClientId )
-			);
-		} );
-
-		const canInsertDefaultBlock = canInsertBlockType(
-			getDefaultBlockName(),
-			rootClientId
-		);
-
-		return {
-			blocks,
-			canDuplicate,
-			canInsertDefaultBlock,
-			extraProps: props,
-			isLocked: !! getTemplateLock( rootClientId ),
-			rootClientId,
-		};
-	} ),
-	withDispatch( ( dispatch, props, { select } ) => {
-		const { clientIds, blocks } = props;
-
-		const {
-			removeBlocks,
-			replaceBlocks,
-			duplicateBlocks,
-			insertAfterBlock,
-			insertBeforeBlock,
-		} = dispatch( 'core/block-editor' );
-
-		return {
-			onDuplicate() {
-				return duplicateBlocks( clientIds );
-			},
-			onRemove() {
-				removeBlocks( clientIds );
-			},
-			onInsertBefore() {
-				insertBeforeBlock( first( castArray( clientIds ) ) );
-			},
-			onInsertAfter() {
-				insertAfterBlock( last( castArray( clientIds ) ) );
-			},
-			onGroup() {
-				if ( ! blocks.length ) {
-					return;
-				}
-
-				const { getGroupingBlockName } = select( 'core/blocks' );
-
-				const groupingBlockName = getGroupingBlockName();
-
-				// Activate the `transform` on `core/group` which does the conversion
-				const newBlocks = switchToBlockType(
-					blocks,
-					groupingBlockName
-				);
-
-				if ( ! newBlocks ) {
-					return;
-				}
-				replaceBlocks( clientIds, newBlocks );
-			},
-
-			onUngroup() {
-				if ( ! blocks.length ) {
-					return;
-				}
-
-				const innerBlocks = blocks[ 0 ].innerBlocks;
-
-				if ( ! innerBlocks.length ) {
-					return;
-				}
-
-				replaceBlocks( clientIds, innerBlocks );
-			},
-		};
-	} ),
-] )( BlockActions );
diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js
@@ -15,7 +15,6 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { moreHorizontal } from '@wordpress/icons';
-import { useState } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
 
 /**
@@ -57,8 +56,6 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) {
 		};
 	}, [] );
 
-	const [ hasCopied, setHasCopied ] = useState();
-
 	return (
 		<BlockActions clientIds={ clientIds }>
 			{ ( {
@@ -69,6 +66,7 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) {
 				onInsertAfter,
 				onInsertBefore,
 				onRemove,
+				onCopy,
 				blocks,
 			} ) => (
 				<DropdownMenu
@@ -99,14 +97,9 @@ export function BlockSettingsDropdown( { clientIds, ...props } ) {
 									text={ () => serialize( blocks ) }
 									role="menuitem"
 									className="components-menu-item__button"
-									onCopy={ () => {
-										setHasCopied( true );
-									} }
-									onFinishCopy={ () => setHasCopied( false ) }
+									onCopy={ onCopy }
 								>
-									{ hasCopied
-										? __( 'Copied!' )
-										: __( 'Copy' ) }
+									{ __( 'Copy' ) }
 								</ClipboardButton>
 								{ canDuplicate && (
 									<MenuItem

diff --git a/packages/block-editor/src/components/copy-handler/index.js b/packages/block-editor/src/components/copy-handler/index.js
@@ -15,7 +15,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import { getPasteEventData } from '../../utils/get-paste-event-data';
 
-function useNotifyCopy() {
+export function useNotifyCopy() {
 	const { getBlockName } = useSelect(
 		( select ) => select( 'core/block-editor' ),
 		[]

diff --git a/packages/components/src/clipboard-button/index.js b/packages/components/src/clipboard-button/index.js
@@ -33,7 +33,7 @@ export default function ClipboardButton( {
 
 		if ( hasCopied ) {
 			onCopy();
-		} else {
+		} else if ( onFinishCopy ) {
 			onFinishCopy();
 		}