Pattern Shuffling: Make the results deterministic (WordPress#60074)

* Pattern Shuffling: Make the results deterministic * Use the title field as a name and save the pattern name in patternName * Only use the pattern name if the group doesn't have a name * updated snapshots for inserting-blocks.spec.js * fixed test --------- Co-authored-by: MaggieCabrera <maggie.cabrera@automattic.com>
carstingaxion · Mar 27, 2024 · f5e8bf4 · f5e8bf4
1 parent 5e69b07
commit f5e8bf4
Show file tree

Hide file tree

Showing 6 changed files with 41 additions and 17 deletions.
diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js
@@ -23,7 +23,7 @@ function Container( props ) {
 }
 
 export default function Shuffle( { clientId, as = Container } ) {
-	const { categories, patterns } = useSelect(
+	const { categories, patterns, patternName } = useSelect(
 		( select ) => {
 			const {
 				getBlockAttributes,
@@ -32,11 +32,13 @@ export default function Shuffle( { clientId, as = Container } ) {
 			} = select( blockEditorStore );
 			const attributes = getBlockAttributes( clientId );
 			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const _patternName = attributes?.metadata?.patternName;
 			const rootBlock = getBlockRootClientId( clientId );
 			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
 			return {
 				categories: _categories,
 				patterns: _patterns,
+				patternName: _patternName,
 			};
 		},
 		[ clientId ]
@@ -65,28 +67,32 @@ export default function Shuffle( { clientId, as = Container } ) {
 	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
 		return null;
 	}
+
+	function getNextPattern() {
+		const numberOfPatterns = sameCategoryPatternsWithSingleWrapper.length;
+		const patternIndex = sameCategoryPatternsWithSingleWrapper.findIndex(
+			( { name } ) => name === patternName
+		);
+		const nextPatternIndex =
+			patternIndex + 1 < numberOfPatterns ? patternIndex + 1 : 0;
+		return sameCategoryPatternsWithSingleWrapper[ nextPatternIndex ];
+	}
+
 	const ComponentToUse = as;
 	return (
 		<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,
+				const nextPattern = getNextPattern();
+				nextPattern.blocks[ 0 ].attributes = {
+					...nextPattern.blocks[ 0 ].attributes,
 					metadata: {
-						...randomPattern.blocks[ 0 ].attributes.metadata,
+						...nextPattern.blocks[ 0 ].attributes.metadata,
 						categories,
 					},
 				};
-				replaceBlocks( clientId, randomPattern.blocks );
+				replaceBlocks( clientId, nextPattern.blocks );
 			} }
 		/>
 	);

diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js
@@ -2287,6 +2287,10 @@ export const __experimentalGetParsedPattern = createRegistrySelector(
 					metadata: {
 						...( blocks[ 0 ].attributes.metadata || {} ),
 						categories: pattern.categories,
+						patternName: pattern.name,
+						name:
+							blocks[ 0 ].attributes.metadata?.name ||
+							pattern.title,
 					},
 				};
 			}

diff --git a/packages/block-library/src/pattern/edit.js b/packages/block-library/src/pattern/edit.js
@@ -108,6 +108,10 @@ const PatternEdit = ( { attributes, clientId } ) => {
 						metadata: {
 							...clonedBlocks[ 0 ].attributes.metadata,
 							categories: selectedPattern.categories,
+							patternName: selectedPattern.name,
+							name:
+								clonedBlocks[ 0 ].attributes.metadata.name ||
+								selectedPattern.title,
 						},
 					};
 				}

diff --git a/...refox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt b/...refox-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","metadata":{"categories":["call-to-action"]},"className":"has-icon-color"} -->
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","metadata":{"categories":["call-to-action"],"patternName":"core/social-links-shared-background-color","name":"Social links with a shared background color"},"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"} /-->

diff --git a/...firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt b/...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","metadata":{"categories":["call-to-action"]},"className":"has-icon-color"} -->
+<!-- wp:social-links {"customIconColor":"#ffffff","iconColorValue":"#ffffff","customIconBackgroundColor":"#3962e3","iconBackgroundColorValue":"#3962e3","metadata":{"categories":["call-to-action"],"patternName":"core/social-links-shared-background-color","name":"Social links with a shared background color"},"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"} /-->

diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js
@@ -74,15 +74,25 @@ test.describe( 'Unsynced pattern', () => {
 				name: newCategory,
 			} )
 			.click();
-		await page.getByLabel( 'My unsynced pattern' ).click();
+		const pattern = page.getByLabel( 'My unsynced pattern' ).first();
+
+		const insertedPatternId = await pattern.evaluate(
+			( element ) => element.id
+		);
+
+		await pattern.click();
 
 		await expect.poll( editor.getBlocks ).toEqual( [
 			...before,
 			{
 				...before[ 0 ],
 				attributes: {
 					...before[ 0 ].attributes,
-					metadata: { categories: [ 'contact-details' ] },
+					metadata: {
+						categories: [ 'contact-details' ],
+						name: 'My unsynced pattern',
+						patternName: insertedPatternId,
+					},
 				},
 			},
 		] );