Add: Shuffle option to sections via pattern category

packages/block-editor/src/components/block-toolbar/index.js

@@ -35,6 +35,7 @@ import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
 import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
+import Shuffle from './shuffle';
 
 /**
  * Renders the block toolbar.
@@ -185,6 +186,7 @@ export function PrivateBlockToolbar( {
 							</ToolbarGroup>
 						</div>
 					) }
+				<Shuffle clientId={ blockClientId } />
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />
 				) }

packages/block-editor/src/components/block-toolbar/shuffle.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { shuffle } from '@wordpress/icons';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+const EMPTY_ARRAY = [];
+
+export default function Shuffle( { clientId } ) {
+	const { categories, patterns } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockRootClientId,
+				__experimentalGetAllowedPatterns,
+			} = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const rootBlock = getBlockRootClientId( clientId );
+			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
+			return {
+				categories: _categories,
+				patterns: _patterns,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
+		if (
+			! categories ||
+			categories.length === 0 ||
+			! patterns ||
+			patterns.length === 0
+		) {
+			return EMPTY_ARRAY;
+		}
+		return patterns.filter( ( pattern ) => {
+			return (
+				// Check if the pattern has only one top level block,
+				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
+				pattern.blocks.length === 1 &&
+				pattern.categories.some( ( category ) => {
+					return categories.includes( category );
+				} )
+			);
+		} );
+	}, [ categories, patterns ] );
+	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+		return null;
+	}
+	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>
+	);
+}

packages/block-editor/src/store/selectors.js

@@ -2293,11 +2293,21 @@ export const __experimentalGetParsedPattern = createRegistrySelector(
 			if ( ! pattern ) {
 				return null;
 			}
+			const blocks = parse( pattern.content, {
+				__unstableSkipMigrationLogs: true,
+			} );
+			if ( blocks.length === 1 ) {
+				blocks[ 0 ].attributes = {
+					...blocks[ 0 ].attributes,
+					metadata: {
+						...( blocks[ 0 ].attributes.metadata || {} ),
+						categories: pattern.categories,
+					},
+				};
+			}
 			return {
 				...pattern,
-				blocks: parse( pattern.content, {
-					__unstableSkipMigrationLogs: true,
-				} ),
+				blocks,
 			};
 		}, getAllPatternsDependants( select ) )
 );

packages/block-library/src/pattern/edit.js

@@ -97,6 +97,20 @@ const PatternEdit = ( { attributes, clientId } ) => {
 						injectThemeAttributeInBlockTemplateContent( block )
 					)
 				);
+				// If the pattern has a single block and categories, we should add the
+				// categories of the pattern to the block's metadata.
+				if (
+					clonedBlocks.length === 1 &&
+					selectedPattern.categories?.length > 0
+				) {
+					clonedBlocks[ 0 ].attributes = {
+						...clonedBlocks[ 0 ].attributes,
+						metadata: {
+							...clonedBlocks[ 0 ].attributes.metadata,
+							categories: selectedPattern.categories,
+						},
+					};
+				}
 				const rootEditingMode = getBlockEditingMode( rootClientId );
 				registry.batch( () => {
 					// Temporarily set the root block to default mode to allow replacing the pattern.