Add keyboard shortcut (cmd(ctrl)+option(alt)+v) to paste styles (#69196)

yogeshbhutkar · yogeshbhutkar · t-hamano · web-flow · commit dbec8d975691 · 2025-03-19T18:15:08.000+09:00
* feat: add key combo to paste styles

* e2e: add test for pasting styles using keyboard shortcut

* refactor: remove snapshots file

Co-authored-by: yogeshbhutkar &lt;yogeshbhutkar@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: ethanclevenger91 &lt;eclev91@git.wordpress.org&gt;
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -24,6 +24,7 @@ import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
 import { useShowBlockTools } from './use-show-block-tools';
 import { unlock } from '../../lock-unlock';
+import usePasteStyles from '../use-paste-styles';
 
 function selector( select ) {
 	const {
@@ -74,6 +75,7 @@ export default function BlockTools( {
 	const { getGroupingBlockName } = useSelect( blocksStore );
 	const { showEmptyBlockSideInserter, showBlockToolbarPopover } =
 		useShowBlockTools();
+	const pasteStyles = usePasteStyles();
 
 	const {
 		duplicateBlocks,
@@ -134,6 +136,13 @@ export default function BlockTools( {
 				event.preventDefault();
 				removeBlocks( clientIds );
 			}
+		} else if ( isMatch( 'core/block-editor/paste-styles', event ) ) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( clientIds );
+				pasteStyles( blocks );
+			}
 		} else if ( isMatch( 'core/block-editor/insert-after', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
diff --git a/packages/block-editor/src/components/keyboard-shortcuts/index.js b/packages/block-editor/src/components/keyboard-shortcuts/index.js
@@ -64,6 +64,18 @@ function KeyboardShortcutsRegister() {
 			},
 		} );
 
+		registerShortcut( {
+			name: 'core/block-editor/paste-styles',
+			category: 'block',
+			description: __(
+				'Paste the copied style to the selected block(s).'
+			),
+			keyCombination: {
+				modifier: 'primaryAlt',
+				character: 'v',
+			},
+		} );
+
 		registerShortcut( {
 			name: 'core/block-editor/insert-before',
 			category: 'block',
diff --git a/packages/block-editor/src/components/list-view/block.js b/packages/block-editor/src/components/list-view/block.js
@@ -52,6 +52,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 import AriaReferencedText from './aria-referenced-text';
 import { unlock } from '../../lock-unlock';
+import usePasteStyles from '../use-paste-styles';
 
 function ListViewBlock( {
 	block: { clientId },
@@ -112,6 +113,8 @@ function ListViewBlock( {
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 
+	const pasteStyles = usePasteStyles();
+
 	const { block, blockName, allowRightClickOverrides } = useSelect(
 		( select ) => {
 			const { getBlock, getBlockName, getSettings } =
@@ -233,6 +236,13 @@ function ListViewBlock( {
 			}
 
 			updateFocusAndSelection( blockToFocus, shouldUpdateSelection );
+		} else if ( isMatch( 'core/block-editor/paste-styles', event ) ) {
+			event.preventDefault();
+
+			const { blocksToUpdate } = getBlocksToUpdate();
+			const blocks = getBlocksByClientId( blocksToUpdate );
+
+			pasteStyles( blocks );
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
 			event.preventDefault();
 
diff --git a/test/e2e/specs/editor/various/copy-cut-paste.spec.js b/test/e2e/specs/editor/various/copy-cut-paste.spec.js
@@ -541,6 +541,75 @@ test.describe( 'Copy/cut/paste', () => {
 		] );
 	} );
 
+	test( 'should paste styles using keyboard shortcut', async ( {
+		pageUtils,
+		editor,
+		page,
+		context,
+	} ) => {
+		// Grant clipboard access for copying and pasting styles between blocks.
+		await context.grantPermissions( [
+			'clipboard-read',
+			'clipboard-write',
+		] );
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'First Block',
+				style: {
+					color: {
+						text: '#ff0000',
+						background: '#00ff00',
+					},
+				},
+			},
+		} );
+
+		await editor.clickBlockToolbarButton( 'Options' );
+		await page
+			.getByRole( 'menu', { name: 'Options' } )
+			.getByRole( 'menuitem', {
+				name: 'Copy Styles',
+			} )
+			.click();
+
+		await editor.insertBlock( {
+			name: 'core/paragraph',
+			attributes: {
+				content: 'Second Block',
+			},
+		} );
+
+		await pageUtils.pressKeys( 'primaryAlt+v' );
+		expect( await editor.getBlocks() ).toMatchObject( [
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'First Block',
+					style: {
+						color: {
+							text: '#ff0000',
+							background: '#00ff00',
+						},
+					},
+				},
+			},
+			{
+				name: 'core/paragraph',
+				attributes: {
+					content: 'Second Block',
+					style: {
+						color: {
+							text: '#ff0000',
+							background: '#00ff00',
+						},
+					},
+				},
+			},
+		] );
+	} );
+
 	test( 'should link selection on internal paste', async ( {
 		pageUtils,
 		editor,
