Shuffle template parts

packages/block-library/src/template-part/edit/index.js

@@ -15,8 +15,15 @@ import {
 	store as blockEditorStore,
 	__experimentalRecursionProvider as RecursionProvider,
 	__experimentalUseHasRecursion as useHasRecursion,
+	BlockControls,
 } from '@wordpress/block-editor';
-import { Spinner, Modal, MenuItem } from '@wordpress/components';
+import {
+	Spinner,
+	Modal,
+	MenuItem,
+	ToolbarButton,
+	Tooltip,
+} from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState, createInterpolateElement } from '@wordpress/element';
@@ -33,6 +40,7 @@ import {
 	useAlternativeBlockPatterns,
 	useAlternativeTemplateParts,
 	useTemplatePartArea,
+	useShuffleTemplatePart,
 } from './utils/hooks';
 
 export default function TemplatePartEdit( {
@@ -92,6 +100,12 @@ export default function TemplatePartEdit( {
 	const isPlaceholder = ! slug;
 	const isEntityAvailable = ! isPlaceholder && ! isMissing && isResolved;
 	const TagName = tagName || areaObject.tagName;
+	const shuffleTemplatePart = useShuffleTemplatePart(
+		area,
+		clientId,
+		templatePartId,
+		setAttributes
+	);
 
 	// The `isSelected` check ensures the `BlockSettingsMenuControls` fill
 	// doesn't render multiple times. The block controls has similar internal check.
@@ -157,27 +171,39 @@ export default function TemplatePartEdit( {
 					</TagName>
 				) }
 				{ canReplace && (
-					<BlockSettingsMenuControls>
-						{ () => (
-							<MenuItem
-								onClick={ () => {
-									setIsTemplatePartSelectionOpen( true );
-								} }
+					<>
+						<BlockSettingsMenuControls>
+							{ () => (
+								<MenuItem
+									onClick={ () => {
+										setIsTemplatePartSelectionOpen( true );
+									} }
+								>
+									{ createInterpolateElement(
+										__( 'Replace <BlockTitle />' ),
+										{
+											BlockTitle: (
+												<BlockTitle
+													clientId={ clientId }
+													maximumLength={ 25 }
+												/>
+											),
+										}
+									) }
+								</MenuItem>
+							) }
+						</BlockSettingsMenuControls>
+						<BlockControls group="other">
+							<Tooltip
+								position="top center"
+								text={ __( 'Try a different design' ) }
 							>
-								{ createInterpolateElement(
-									__( 'Replace <BlockTitle />' ),
-									{
-										BlockTitle: (
-											<BlockTitle
-												clientId={ clientId }
-												maximumLength={ 25 }
-											/>
-										),
-									}
-								) }
-							</MenuItem>
-						) }
-					</BlockSettingsMenuControls>
+								<ToolbarButton onClick={ shuffleTemplatePart }>
+									{ __( 'Shuffle' ) }
+								</ToolbarButton>
+							</Tooltip>
+						</BlockControls>
+					</>
 				) }
 				{ isEntityAvailable && (
 					<TemplatePartInnerBlocks

packages/block-library/src/template-part/edit/utils/hooks.js

@@ -9,7 +9,7 @@ import { kebabCase } from 'lodash';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useRef } from '@wordpress/element';
 import { serialize } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
@@ -61,7 +61,7 @@ export function useAlternativeTemplateParts( area, excludedId ) {
 						templatePart.area === area )
 			) || []
 		);
-	}, [ templateParts, area ] );
+	}, [ templateParts, area, excludedId ] );
 
 	return {
 		templateParts: filteredTemplateParts,
@@ -113,6 +113,7 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 			// if provided value is not allowed.
 			area,
 		};
+
 		const templatePart = await saveEntityRecord(
 			'postType',
 			'wp_template_part',
@@ -161,3 +162,52 @@ export function useTemplatePartArea( area ) {
 		[ area ]
 	);
 }
+
+export function useShuffleTemplatePart(
+	area,
+	clientId,
+	templatePartId,
+	setAttributes
+) {
+	const currentPatternRef = useRef( null );
+	const { templateParts } = useAlternativeTemplateParts(
+		area,
+		templatePartId
+	);
+	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
+	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
+
+	return async function shuffleTemplatePart() {
+		const list = [
+			...templateParts,
+			...blockPatterns.filter( ( pattern ) => {
+				const serializedPatternBlocks = serialize( pattern.blocks );
+				return (
+					pattern.name !== currentPatternRef.current &&
+					templateParts.every(
+						( templatePart ) =>
+							templatePart.content.raw !== serializedPatternBlocks
+					)
+				);
+			} ),
+		];
+		// We explicitly want the randomness here.
+		// eslint-disable-next-line no-restricted-syntax
+		const randomIndex = Math.floor( Math.random() * list.length );
+		const randomItem = list[ randomIndex ];
+
+		if ( randomIndex < templateParts.length ) {
+			const templatePart = randomItem;
+			setAttributes( {
+				slug: templatePart.slug,
+				theme: templatePart.theme,
+				area: undefined,
+			} );
+		} else {
+			const pattern = randomItem;
+			currentPatternRef.current = pattern.name;
+
+			replaceInnerBlocks( clientId, pattern.blocks );
+		}
+	};
+}