From 0fceee62e686c4f6eec0da84e7f409f67409f487 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 16 Jan 2023 13:27:12 +0200 Subject: [PATCH] [Block Editor]: Stabilize `__experimentalGetPatternsByBlockTypes` --- .../data/data-core-block-editor.md | 18 +++++++++++ .../block-pattern-setup/use-patterns-setup.js | 7 ++--- packages/block-editor/src/store/selectors.js | 30 +++++++++++++++---- .../block-editor/src/store/test/selectors.js | 17 ++++------- .../src/query/edit/query-placeholder.js | 12 +++----- .../src/query/edit/query-toolbar.js | 11 ++----- packages/block-library/src/query/utils.js | 11 ++----- .../src/template-part/edit/utils/hooks.js | 11 ++----- .../components/start-page-options/index.js | 8 ++--- 9 files changed, 65 insertions(+), 60 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 1b9da160f0f6f..84279435606a9 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -673,6 +673,24 @@ _Returns_ - `?string`: Adjacent block's client ID, or null if none exists. +### getPatternsByBlockTypes + +Returns the list of patterns based on their declared `blockTypes` +and a block's name. +Patterns can use `blockTypes` to integrate in work flows like +suggesting appropriate patterns in a Placeholder state(during insertion) +or blocks transformations. + +_Parameters_ + +- _state_ `Object`: Editor state. +- _blockNames_ `string|string[]`: Block's name or array of block names to find matching pattens. +- _rootClientId_ `?string`: Optional target root client ID. + +_Returns_ + +- `Array`: The list of matched block patterns based on declared `blockTypes` and block name. + ### getPreviousBlockClientId Returns the previous block's client ID from the given reference start ID. diff --git a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js index 1b6a90b87457a..1ad94c5385c6c 100644 --- a/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js +++ b/packages/block-editor/src/components/block-pattern-setup/use-patterns-setup.js @@ -13,7 +13,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) { ( select ) => { const { getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, + getPatternsByBlockTypes, __experimentalGetAllowedPatterns, } = select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); @@ -22,10 +22,7 @@ function usePatternsSetup( clientId, blockName, filterPatternsFn ) { filterPatternsFn ); } - return __experimentalGetPatternsByBlockTypes( - blockName, - rootClientId - ); + return getPatternsByBlockTypes( blockName, rootClientId ); }, [ clientId, blockName, filterPatternsFn ] ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index a29220305e6c6..630240b2d2b7b 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2313,7 +2313,7 @@ export const __experimentalGetAllowedPatterns = createSelector( * * @return {Array} The list of matched block patterns based on declared `blockTypes` and block name. */ -export const __experimentalGetPatternsByBlockTypes = createSelector( +export const getPatternsByBlockTypes = createSelector( ( state, blockNames, rootClientId = null ) => { if ( ! blockNames ) return EMPTY_ARRAY; const patterns = __experimentalGetAllowedPatterns( @@ -2337,6 +2337,27 @@ export const __experimentalGetPatternsByBlockTypes = createSelector( ] ); +export const __experimentalGetPatternsByBlockTypes = createSelector( + ( state, blockNames, rootClientId = null ) => { + deprecated( + 'wp.data.select( "core/block-editor" ).__experimentalGetPatternsByBlockTypes', + { + alternative: + 'wp.data.select( "core/block-editor" ).getPatternsByBlockTypes', + since: '6.2', + version: '6.4', + } + ); + return getPatternsByBlockTypes( state, blockNames, rootClientId ); + }, + ( state, blockNames, rootClientId ) => [ + ...__experimentalGetAllowedPatterns.getDependants( + state, + rootClientId + ), + ] +); + /** * Determines the items that appear in the available pattern transforms list. * @@ -2384,17 +2405,14 @@ export const __experimentalGetPatternTransformItems = createSelector( * block pattern's blocks and try to find matches from the selected blocks. * Now this happens in the consumer to avoid heavy operations in the selector. */ - return __experimentalGetPatternsByBlockTypes( + return getPatternsByBlockTypes( state, selectedBlockNames, rootClientId ); }, ( state, blocks, rootClientId ) => [ - ...__experimentalGetPatternsByBlockTypes.getDependants( - state, - rootClientId - ), + ...getPatternsByBlockTypes.getDependants( state, rootClientId ), ] ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 2984171787c32..f913c835bd484 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -67,7 +67,7 @@ const { __experimentalGetActiveBlockIdByBlockNames: getActiveBlockIdByBlockNames, __experimentalGetAllowedPatterns, __experimentalGetParsedPattern, - __experimentalGetPatternsByBlockTypes, + getPatternsByBlockTypes, __unstableGetClientIdWithClientIdsTree, __unstableGetClientIdsTree, __experimentalGetPatternTransformItems, @@ -4223,7 +4223,7 @@ describe( 'selectors', () => { ); } ); } ); - describe( '__experimentalGetPatternsByBlockTypes', () => { + describe( 'getPatternsByBlockTypes', () => { const state = { blocks: { byClientId: new Map( @@ -4263,22 +4263,17 @@ describe( 'selectors', () => { }, }; it( 'should return empty array if no block name is provided', () => { - expect( __experimentalGetPatternsByBlockTypes( state ) ).toEqual( - [] - ); + expect( getPatternsByBlockTypes( state ) ).toEqual( [] ); } ); it( 'shoud return empty array if no match is found', () => { - const patterns = __experimentalGetPatternsByBlockTypes( + const patterns = getPatternsByBlockTypes( state, 'test/block-not-exists' ); expect( patterns ).toEqual( [] ); } ); it( 'should return proper results when there are matched block patterns', () => { - const patterns = __experimentalGetPatternsByBlockTypes( - state, - 'test/block-a' - ); + const patterns = getPatternsByBlockTypes( state, 'test/block-a' ); expect( patterns ).toHaveLength( 2 ); expect( patterns ).toEqual( expect.arrayContaining( [ @@ -4288,7 +4283,7 @@ describe( 'selectors', () => { ); } ); it( 'should return proper result with matched patterns and allowed blocks from rootClientId', () => { - const patterns = __experimentalGetPatternsByBlockTypes( + const patterns = getPatternsByBlockTypes( state, 'test/block-a', 'block1' diff --git a/packages/block-library/src/query/edit/query-placeholder.js b/packages/block-library/src/query/edit/query-placeholder.js index 5766328808a3c..7ba136687dd99 100644 --- a/packages/block-library/src/query/edit/query-placeholder.js +++ b/packages/block-library/src/query/edit/query-placeholder.js @@ -34,19 +34,15 @@ export default function QueryPlaceholder( { const { blockType, allVariations, hasPatterns } = useSelect( ( select ) => { const { getBlockVariations, getBlockType } = select( blocksStore ); - const { - getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, - } = select( blockEditorStore ); + const { getBlockRootClientId, getPatternsByBlockTypes } = + select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); return { blockType: getBlockType( name ), allVariations: getBlockVariations( name ), - hasPatterns: !! __experimentalGetPatternsByBlockTypes( - name, - rootClientId - ).length, + hasPatterns: !! getPatternsByBlockTypes( name, rootClientId ) + .length, }; }, [ name, clientId ] diff --git a/packages/block-library/src/query/edit/query-toolbar.js b/packages/block-library/src/query/edit/query-toolbar.js index 84deb8d0ed91d..4be9228179914 100644 --- a/packages/block-library/src/query/edit/query-toolbar.js +++ b/packages/block-library/src/query/edit/query-toolbar.js @@ -24,15 +24,10 @@ export default function QueryToolbar( { } ) { const hasPatterns = useSelect( ( select ) => { - const { - getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, - } = select( blockEditorStore ); + const { getBlockRootClientId, getPatternsByBlockTypes } = + select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); - return !! __experimentalGetPatternsByBlockTypes( - name, - rootClientId - ).length; + return !! getPatternsByBlockTypes( name, rootClientId ).length; }, [ name, clientId ] ); diff --git a/packages/block-library/src/query/utils.js b/packages/block-library/src/query/utils.js index 9bffcfd988fd0..060efed9c6a38 100644 --- a/packages/block-library/src/query/utils.js +++ b/packages/block-library/src/query/utils.js @@ -247,15 +247,10 @@ export function useBlockNameForPatterns( clientId, attributes ) { if ( ! activeVariationName ) { return; } - const { - getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, - } = select( blockEditorStore ); + const { getBlockRootClientId, getPatternsByBlockTypes } = + select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); - return __experimentalGetPatternsByBlockTypes( - blockName, - rootClientId - ); + return getPatternsByBlockTypes( blockName, rootClientId ); }, [ clientId, activeVariationName ] ); diff --git a/packages/block-library/src/template-part/edit/utils/hooks.js b/packages/block-library/src/template-part/edit/utils/hooks.js index 37eb762a24144..a7cedbc514bbf 100644 --- a/packages/block-library/src/template-part/edit/utils/hooks.js +++ b/packages/block-library/src/template-part/edit/utils/hooks.js @@ -83,15 +83,10 @@ export function useAlternativeBlockPatterns( area, clientId ) { const blockNameWithArea = area ? `core/template-part/${ area }` : 'core/template-part'; - const { - getBlockRootClientId, - __experimentalGetPatternsByBlockTypes, - } = select( blockEditorStore ); + const { getBlockRootClientId, getPatternsByBlockTypes } = + select( blockEditorStore ); const rootClientId = getBlockRootClientId( clientId ); - return __experimentalGetPatternsByBlockTypes( - blockNameWithArea, - rootClientId - ); + return getPatternsByBlockTypes( blockNameWithArea, rootClientId ); }, [ area, clientId ] ); diff --git a/packages/edit-post/src/components/start-page-options/index.js b/packages/edit-post/src/components/start-page-options/index.js index ce86984e032c2..a50d7c545617f 100644 --- a/packages/edit-post/src/components/start-page-options/index.js +++ b/packages/edit-post/src/components/start-page-options/index.js @@ -23,15 +23,11 @@ function useStartPatterns() { // the current post type is part of the postTypes declared. const { blockPatternsWithPostContentBlockType, postType } = useSelect( ( select ) => { - const { __experimentalGetPatternsByBlockTypes } = - select( blockEditorStore ); + const { getPatternsByBlockTypes } = select( blockEditorStore ); const { getCurrentPostType } = select( editorStore ); return { - // get pa blockPatternsWithPostContentBlockType: - __experimentalGetPatternsByBlockTypes( - 'core/post-content' - ), + getPatternsByBlockTypes( 'core/post-content' ), postType: getCurrentPostType(), }; },