Update Snackbar messages for copy event

karthick-murugan · Dec 20, 2024 · f9ed822 · f9ed822
1 parent c80640f
commit f9ed822
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 48 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -11,7 +11,6 @@ import {
 /**
  * Internal dependencies
  */
-import { useNotifyCopy } from '../../utils/use-notify-copy';
 import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 
@@ -76,7 +75,6 @@ export default function BlockActions( {
 		flashBlock,
 	} = useDispatch( blockEditorStore );
 
-	const notifyCopy = useNotifyCopy();
 	const pasteStyles = usePasteStyles();
 
 	return children( {
@@ -130,7 +128,6 @@ export default function BlockActions( {
 			if ( clientIds.length === 1 ) {
 				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', clientIds );
 		},
 		async onPasteStyles() {
 			await pasteStyles( getBlocksByClientId( clientIds ) );

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
@@ -26,17 +26,30 @@ import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
+function CopyMenuItem( {
+	clientIds,
+	onCopy,
+	label,
+	shortcut,
+	eventType = 'copy',
+} ) {
 	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const notifyCopy = useNotifyCopy();
 	const ref = useCopyToClipboard(
 		() => serialize( getBlocksByClientId( clientIds ) ),
-		onCopy
+		() => {
+			if ( onCopy && eventType === 'copy' ) {
+				onCopy();
+			}
+			notifyCopy( eventType, clientIds );
+		}
 	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return (
@@ -305,6 +318,7 @@ export function BlockSettingsDropdown( {
 											clientIds={ clientIds }
 											onCopy={ onCopy }
 											label={ __( 'Copy styles' ) }
+											eventType="copyStyles"
 										/>
 										<MenuItem onClick={ onPasteStyles }>
 											{ __( 'Paste styles' ) }

diff --git a/packages/block-editor/src/utils/use-notify-copy.js b/packages/block-editor/src/utils/use-notify-copy.js
@@ -17,47 +17,55 @@ export function useNotifyCopy() {
 	const { getBlockType } = useSelect( blocksStore );
 	const { createSuccessNotice } = useDispatch( noticesStore );
 
-	return useCallback( ( eventType, selectedBlockClientIds ) => {
-		let notice = '';
-		if ( selectedBlockClientIds.length === 1 ) {
-			const clientId = selectedBlockClientIds[ 0 ];
-			const title = getBlockType( getBlockName( clientId ) )?.title;
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: Name of the block being copied, e.g. "Paragraph".
-							__( 'Copied "%s" to clipboard.' ),
-							title
-					  )
-					: sprintf(
-							// Translators: Name of the block being cut, e.g. "Paragraph".
-							__( 'Moved "%s" to clipboard.' ),
-							title
-					  );
-		} else {
-			notice =
-				eventType === 'copy'
-					? sprintf(
-							// Translators: %d: Number of blocks being copied.
-							_n(
-								'Copied %d block to clipboard.',
-								'Copied %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  )
-					: sprintf(
-							// Translators: %d: Number of blocks being cut.
-							_n(
-								'Moved %d block to clipboard.',
-								'Moved %d blocks to clipboard.',
-								selectedBlockClientIds.length
-							),
-							selectedBlockClientIds.length
-					  );
-		}
-		createSuccessNotice( notice, {
-			type: 'snackbar',
-		} );
-	}, [] );
+	return useCallback(
+		( eventType, selectedBlockClientIds ) => {
+			let notice = '';
+
+			if ( eventType === 'copyStyles' ) {
+				notice = __( 'Styles copied to clipboard.' );
+			} else if ( selectedBlockClientIds.length === 1 ) {
+				const clientId = selectedBlockClientIds[ 0 ];
+				const title = getBlockType( getBlockName( clientId ) )?.title;
+
+				if ( eventType === 'copy' ) {
+					notice = sprintf(
+						// Translators: Name of the block being copied, e.g. "Paragraph".
+						__( 'Copied "%s" to clipboard.' ),
+						title
+					);
+				} else {
+					notice = sprintf(
+						// Translators: Name of the block being cut, e.g. "Paragraph".
+						__( 'Moved "%s" to clipboard.' ),
+						title
+					);
+				}
+			} else if ( eventType === 'copy' ) {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being copied.
+					_n(
+						'Copied %d block to clipboard.',
+						'Copied %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			} else {
+				notice = sprintf(
+					// Translators: %d: Number of blocks being moved.
+					_n(
+						'Moved %d block to clipboard.',
+						'Moved %d blocks to clipboard.',
+						selectedBlockClientIds.length
+					),
+					selectedBlockClientIds.length
+				);
+			}
+
+			createSuccessNotice( notice, {
+				type: 'snackbar',
+			} );
+		},
+		[ createSuccessNotice, getBlockName, getBlockType ]
+	);
 }