Add: Shuffle button in zoom out mode. (#59573)

WordPress · Mar 5, 2024 · c14f187 · c14f187
1 parent 64fb8dd
commit c14f187
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 25 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js
@@ -14,7 +14,15 @@ import { store as blockEditorStore } from '../../store';
 
 const EMPTY_ARRAY = [];
 
-export default function Shuffle( { clientId } ) {
+function Container( props ) {
+	return (
+		<ToolbarGroup>
+			<ToolbarButton { ...props } />
+		</ToolbarGroup>
+	);
+}
+
+export default function Shuffle( { clientId, as = Container } ) {
 	const { categories, patterns } = useSelect(
 		( select ) => {
 			const {
@@ -57,30 +65,29 @@ export default function Shuffle( { clientId } ) {
 	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
 		return null;
 	}
+	const ComponentToUse = as;
 	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				label={ __( 'Shuffle' ) }
-				icon={ shuffle }
-				onClick={ () => {
-					const randomPattern =
-						sameCategoryPatternsWithSingleWrapper[
-							Math.floor(
-								// eslint-disable-next-line no-restricted-syntax
-								Math.random() *
-									sameCategoryPatternsWithSingleWrapper.length
-							)
-						];
-					randomPattern.blocks[ 0 ].attributes = {
-						...randomPattern.blocks[ 0 ].attributes,
-						metadata: {
-							...randomPattern.blocks[ 0 ].attributes.metadata,
-							categories,
-						},
-					};
-					replaceBlocks( clientId, randomPattern.blocks );
-				} }
-			/>
-		</ToolbarGroup>
+		<ComponentToUse
+			label={ __( 'Shuffle' ) }
+			icon={ shuffle }
+			onClick={ () => {
+				const randomPattern =
+					sameCategoryPatternsWithSingleWrapper[
+						Math.floor(
+							// eslint-disable-next-line no-restricted-syntax
+							Math.random() *
+								sameCategoryPatternsWithSingleWrapper.length
+						)
+					];
+				randomPattern.blocks[ 0 ].attributes = {
+					...randomPattern.blocks[ 0 ].attributes,
+					metadata: {
+						...randomPattern.blocks[ 0 ].attributes.metadata,
+						categories,
+					},
+				};
+				replaceBlocks( clientId, randomPattern.blocks );
+			} }
+		/>
 	);
 }
diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js
@@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockMover from '../block-mover';
+import Shuffle from '../block-toolbar/shuffle';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -271,6 +272,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						</BlockDraggable>
 					) }
 				</FlexItem>
+				{ editorMode === 'zoom-out' && (
+					<Shuffle clientId={ clientId } as={ Button } />
+				) }
 				<FlexItem>
 					<Button
 						ref={ ref }