From f5e8bf4f4479d96a019e220dae1abba33ac69c1c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 26 Mar 2024 10:22:04 +0000 Subject: [PATCH] Pattern Shuffling: Make the results deterministic (#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 --- .../src/components/block-toolbar/shuffle.js | 32 +++++++++++-------- packages/block-editor/src/store/selectors.js | 4 +++ packages/block-library/src/pattern/edit.js | 4 +++ ...ng-from-the-global-inserter-1-chromium.txt | 2 +- ...ping-from-the-global-inserter-1-webkit.txt | 2 +- .../e2e/specs/editor/various/patterns.spec.js | 14 ++++++-- 6 files changed, 41 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/block-toolbar/shuffle.js b/packages/block-editor/src/components/block-toolbar/shuffle.js index 391dfc3bbbefe4..8f8bc0c58e65c2 100644 --- 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 ( { - 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 index 8f2e5e4e5ccc80..651af679be290c 100644 --- 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 index 1be2d577b7141b..7b78796aacd54c 100644 --- 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/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt index aef1c3c1731d1d..45d99c7c27e6fe 100644 --- a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-chromium.txt +++ b/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 @@

Dummy text

- +
    diff --git a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt b/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt index aef1c3c1731d1d..45d99c7c27e6fe 100644 --- a/test/e2e/specs/editor/various/__snapshots__/Inserting-blocks-firefox-webkit-inserts-p-59603-ragging-and-dropping-from-the-global-inserter-1-webkit.txt +++ b/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 @@

    Dummy text

    - +
      diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js index c69d0d8b44db55..1d0807264413bd 100644 --- a/test/e2e/specs/editor/various/patterns.spec.js +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -74,7 +74,13 @@ 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, @@ -82,7 +88,11 @@ test.describe( 'Unsynced pattern', () => { ...before[ 0 ], attributes: { ...before[ 0 ].attributes, - metadata: { categories: [ 'contact-details' ] }, + metadata: { + categories: [ 'contact-details' ], + name: 'My unsynced pattern', + patternName: insertedPatternId, + }, }, }, ] );