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

@@ -2278,11 +2278,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.

test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt

@@ -2,7 +2,7 @@
 <p>Dummy text</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","metadata":{"categories":["call-to-action"]},"className":"has-icon-color"} -->
 <ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
 <!-- wp:social-link {"url":"#","service":"chain"} /-->

test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt

@@ -2,7 +2,7 @@
 <p>Dummy text</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","className":"has-icon-color"} -->
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","metadata":{"categories":["call-to-action"]},"className":"has-icon-color"} -->
 <ul class="wp-block-social-links has-icon-color has-icon-background-color"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /-->
 
 <!-- wp:social-link {"url":"#","service":"chain"} /-->

test/e2e/specs/editor/various/patterns.spec.js

@@ -76,9 +76,16 @@ test.describe( 'Unsynced pattern', () => {
 			.click();
 		await page.getByLabel( 'My unsynced pattern' ).click();
 
-		await expect
-			.poll( editor.getBlocks )
-			.toEqual( [ ...before, ...before ] );
+		await expect.poll( editor.getBlocks ).toEqual( [
+			...before,
+			{
+				...before[ 0 ],
+				attributes: {
+					...before[ 0 ].attributes,
+					metadata: { categories: [ 'contact-details' ] },
+				},
+			},
+		] );
 	} );
 } );