Get blocks on demand

WordPress · Feb 20, 2024 · 6aeb454 · 6aeb454
1 parent f77d553
commit 6aeb454
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 23 deletions.
diff --git a/packages/block-editor/src/components/block-actions/index.js b/packages/block-editor/src/components/block-actions/index.js
@@ -36,8 +36,6 @@ export default function BlockActions( {
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 
 			return {
-				blocks,
-				rootClientId,
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				canInsertDefaultBlock: canInsertBlockType(
@@ -62,10 +60,9 @@ export default function BlockActions( {
 		},
 		[ clientIds, getDefaultBlockName ]
 	);
+	const { getBlocksByClientId, getBlocks } = useSelect( blockEditorStore );
 
 	const {
-		blocks,
-		rootClientId,
 		canMove,
 		canRemove,
 		canInsertDefaultBlock,
@@ -94,8 +91,6 @@ export default function BlockActions( {
 		canInsertDefaultBlock,
 		canMove,
 		canRemove,
-		rootClientId,
-		blocks,
 		onDuplicate() {
 			return duplicateBlocks( clientIds, updateSelection );
 		},
@@ -120,44 +115,43 @@ export default function BlockActions( {
 			setBlockMovingClientId( clientIds[ 0 ] );
 		},
 		onGroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
 			const groupingBlockName = getGroupingBlockName();
 
 			// Activate the `transform` on `core/group` which does the conversion.
-			const newBlocks = switchToBlockType( blocks, groupingBlockName );
+			const newBlocks = switchToBlockType(
+				getBlocksByClientId( clientIds ),
+				groupingBlockName
+			);
 
 			if ( ! newBlocks ) {
 				return;
 			}
 			replaceBlocks( clientIds, newBlocks );
 		},
 		onUngroup() {
-			if ( ! blocks.length ) {
+			if ( ! clientIds.length ) {
 				return;
 			}
 
-			const innerBlocks = blocks[ 0 ].innerBlocks;
-
+			const innerBlocks = getBlocks( clientIds[ 0 ] );
 			if ( ! innerBlocks.length ) {
 				return;
 			}
 
 			replaceBlocks( clientIds, innerBlocks );
 		},
 		onCopy() {
-			const selectedBlockClientIds = blocks.map(
-				( { clientId } ) => clientId
-			);
-			if ( blocks.length === 1 ) {
-				flashBlock( selectedBlockClientIds[ 0 ] );
+			if ( clientIds.length === 1 ) {
+				flashBlock( clientIds[ 0 ] );
 			}
-			notifyCopy( 'copy', selectedBlockClientIds );
+			notifyCopy( 'copy', clientIds );
 		},
 		async onPasteStyles() {
-			await pasteStyles( blocks );
+			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
@@ -33,8 +33,12 @@ const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { blocks, onCopy, label } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
+function CopyMenuItem( { clientIds, onCopy, label } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCopy
+	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -208,7 +212,6 @@ export function BlockSettingsDropdown( {
 				onCopy,
 				onPasteStyles,
 				onMoveTo,
-				blocks,
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -286,7 +289,7 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 								<CopyMenuItem
-									blocks={ blocks }
+									clientIds={ clientIds }
 									onCopy={ onCopy }
 								/>
 								{ canDuplicate && (
@@ -327,7 +330,7 @@ export function BlockSettingsDropdown( {
 							{ canCopyStyles && (
 								<MenuGroup>
 									<CopyMenuItem
-										blocks={ blocks }
+										clientIds={ clientIds }
 										onCopy={ onCopy }
 										label={ __( 'Copy styles' ) }
 									/>