Block Action: Implement cut functionality in block actions and settin…

…gs menu
yogeshbhutkar · Jan 8, 2025 · 5f74d54 · 5f74d54
1 parent ef7afef
commit 5f74d54
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -132,6 +132,13 @@ export default function BlockActions( {
 			}
 			notifyCopy( 'copy', clientIds );
 		},
+		onCut() {
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
+			}
+			notifyCopy( 'cut', clientIds );
+			removeBlocks( clientIds, updateSelection );
+		},
 		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
@@ -46,6 +46,20 @@ function CopyMenuItem( { clientIds, onCopy, label, shortcut } ) {
 	);
 }
 
+function CutMenuItem( { clientIds, onCut, label, shortcut } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCut
+	);
+	const cutMenuItemLabel = label ? label : __( 'Cut' );
+	return (
+		<MenuItem ref={ ref } shortcut={ shortcut }>
+			{ cutMenuItemLabel }
+		</MenuItem>
+	);
+}
+
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -117,6 +131,7 @@ export function BlockSettingsDropdown( {
 			duplicate: getShortcutRepresentation(
 				'core/block-editor/duplicate'
 			),
+			cut: getShortcutRepresentation( 'core/block-editor/cut' ),
 			remove: getShortcutRepresentation( 'core/block-editor/remove' ),
 			insertAfter: getShortcutRepresentation(
 				'core/block-editor/insert-after'
@@ -204,6 +219,7 @@ export function BlockSettingsDropdown( {
 				onInsertBefore,
 				onRemove,
 				onCopy,
+				onCut,
 				onPasteStyles,
 			} ) => {
 				// It is possible that some plugins register fills for this menu
@@ -257,6 +273,13 @@ export function BlockSettingsDropdown( {
 											'c'
 										) }
 									/>
+									<CutMenuItem
+										clientIds={ clientIds }
+										onCut={ onCut }
+										shortcut={ displayShortcut.primary(
+											'x'
+										) }
+									/>
 									{ canDuplicate && (
 										<MenuItem
 											onClick={ pipe(