From bed9287a3929e5fd727104e22288346c528d3232 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 28 Aug 2024 15:39:57 +0200 Subject: [PATCH 1/4] Reusable blocks: fix performance of __experimentalGetAllowedPatterns --- packages/block-editor/src/store/selectors.js | 56 +++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index f06293dadf233..678dcbe3e8a4a 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2348,6 +2348,34 @@ export function __experimentalGetDirectInsertBlock( return getDirectInsertBlock( state, rootClientId ); } +const parsedPatternCache = new WeakMap(); + +function parsePattern( pattern ) { + 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, + patternName: pattern.name, + name: blocks[ 0 ].attributes.metadata?.name || pattern.title, + }, + }; + } + return { + ...pattern, + blocks, + }; +} + +function getParsedPattern( pattern ) { + const parsedPattern = parsedPatternCache.has( pattern ); + return parsedPattern ? parsedPattern : parsePattern( pattern ); +} + export const __experimentalGetParsedPattern = createRegistrySelector( ( select ) => createSelector( @@ -2358,26 +2386,7 @@ 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, - patternName: pattern.name, - name: - blocks[ 0 ].attributes.metadata?.name || - pattern.title, - }, - }; - } - return { - ...pattern, - blocks, - }; + return getParsedPattern( pattern ); }, ( state, patternName ) => [ unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ), @@ -2401,16 +2410,13 @@ const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [ export const __experimentalGetAllowedPatterns = createRegistrySelector( ( select ) => { return createSelector( ( state, rootClientId = null ) => { - const { - getAllPatterns, - __experimentalGetParsedPattern: getParsedPattern, - } = unlock( select( STORE_NAME ) ); + const { getAllPatterns } = unlock( select( STORE_NAME ) ); const patterns = getAllPatterns(); const { allowedBlockTypes } = getSettings( state ); const parsedPatterns = patterns .filter( ( { inserter = true } ) => !! inserter ) - .map( ( { name } ) => getParsedPattern( name ) ); + .map( getParsedPattern ); const availableParsedPatterns = parsedPatterns.filter( ( { blocks } ) => checkAllowListRecursive( blocks, allowedBlockTypes ) From faf10afeb3bd2ed845e18136aa27dd554ec17ecc Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 28 Aug 2024 15:54:55 +0200 Subject: [PATCH 2/4] Also remove it from hasAllowedPatterns --- .../src/store/private-selectors.js | 10 +++--- packages/block-editor/src/store/selectors.js | 35 ++----------------- packages/block-editor/src/store/utils.js | 33 +++++++++++++++++ 3 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 58479d69cbfbe..59f5e9c88adf4 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -20,6 +20,7 @@ import { checkAllowListRecursive, getAllPatternsDependants, getInsertBlockTypeDependants, + getParsedPattern, } from './utils'; import { INSERTER_PATTERN_TYPES } from '../components/inserter/block-patterns-tab/utils'; import { STORE_NAME } from './constants'; @@ -291,16 +292,15 @@ export const getInserterMediaCategories = createSelector( export const hasAllowedPatterns = createRegistrySelector( ( select ) => createSelector( ( state, rootClientId = null ) => { - const { getAllPatterns, __experimentalGetParsedPattern } = unlock( - select( STORE_NAME ) - ); + const { getAllPatterns } = unlock( select( STORE_NAME ) ); const patterns = getAllPatterns(); const { allowedBlockTypes } = getSettings( state ); - return patterns.some( ( { name, inserter = true } ) => { + return patterns.some( ( pattern ) => { + const { inserter = true } = pattern; if ( ! inserter ) { return false; } - const { blocks } = __experimentalGetParsedPattern( name ); + const { blocks } = getParsedPattern( pattern ); return ( checkAllowListRecursive( blocks, allowedBlockTypes ) && blocks.every( ( { name: blockName } ) => diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 678dcbe3e8a4a..856b5588465c9 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -7,7 +7,6 @@ import { getBlockVariations, hasBlockSupport, getPossibleBlockTransformations, - parse, switchToBlockType, store as blocksStore, } from '@wordpress/blocks'; @@ -27,6 +26,7 @@ import { checkAllowList, getAllPatternsDependants, getInsertBlockTypeDependants, + getParsedPattern, } from './utils'; import { orderBy } from '../utils/sorting'; import { STORE_NAME } from './constants'; @@ -2348,34 +2348,6 @@ export function __experimentalGetDirectInsertBlock( return getDirectInsertBlock( state, rootClientId ); } -const parsedPatternCache = new WeakMap(); - -function parsePattern( pattern ) { - 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, - patternName: pattern.name, - name: blocks[ 0 ].attributes.metadata?.name || pattern.title, - }, - }; - } - return { - ...pattern, - blocks, - }; -} - -function getParsedPattern( pattern ) { - const parsedPattern = parsedPatternCache.has( pattern ); - return parsedPattern ? parsedPattern : parsePattern( pattern ); -} - export const __experimentalGetParsedPattern = createRegistrySelector( ( select ) => createSelector( @@ -2383,10 +2355,7 @@ export const __experimentalGetParsedPattern = createRegistrySelector( const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ); - if ( ! pattern ) { - return null; - } - return getParsedPattern( pattern ); + return pattern ? getParsedPattern( pattern ) : null; }, ( state, patternName ) => [ unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ), diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js index c94453e99c60a..bbe627dc8cd24 100644 --- a/packages/block-editor/src/store/utils.js +++ b/packages/block-editor/src/store/utils.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { parse } from '@wordpress/blocks'; + /** * Internal dependencies */ @@ -7,6 +12,34 @@ import { STORE_NAME } from './constants'; export const withRootClientIdOptionKey = Symbol( 'withRootClientId' ); +const parsedPatternCache = new WeakMap(); + +function parsePattern( pattern ) { + 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, + patternName: pattern.name, + name: blocks[ 0 ].attributes.metadata?.name || pattern.title, + }, + }; + } + return { + ...pattern, + blocks, + }; +} + +export function getParsedPattern( pattern ) { + const parsedPattern = parsedPatternCache.has( pattern ); + return parsedPattern ? parsedPattern : parsePattern( pattern ); +} + export const checkAllowList = ( list, item, defaultResult = null ) => { if ( typeof list === 'boolean' ) { return list; From 77aa75c90337027a0fa88979c2a71c9572fdec21 Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 28 Aug 2024 16:02:01 +0200 Subject: [PATCH 3/4] Unmemoize __experimentalGetParsedPattern --- packages/block-editor/src/store/selectors.js | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 856b5588465c9..32fa081b390ae 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2349,18 +2349,12 @@ export function __experimentalGetDirectInsertBlock( } export const __experimentalGetParsedPattern = createRegistrySelector( - ( select ) => - createSelector( - ( state, patternName ) => { - const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug( - patternName - ); - return pattern ? getParsedPattern( pattern ) : null; - }, - ( state, patternName ) => [ - unlock( select( STORE_NAME ) ).getPatternBySlug( patternName ), - ] - ) + ( select ) => ( state, patternName ) => { + const pattern = unlock( select( STORE_NAME ) ).getPatternBySlug( + patternName + ); + return pattern ? getParsedPattern( pattern ) : null; + } ); const getAllowedPatternsDependants = ( select ) => ( state, rootClientId ) => [ From 51e2e1e15160fa7a1cccbef89faa71761c35838e Mon Sep 17 00:00:00 2001 From: Ella Date: Wed, 28 Aug 2024 16:18:20 +0200 Subject: [PATCH 4/4] whoops --- packages/block-editor/src/store/utils.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js index bbe627dc8cd24..71c5ac44f45b8 100644 --- a/packages/block-editor/src/store/utils.js +++ b/packages/block-editor/src/store/utils.js @@ -36,8 +36,13 @@ function parsePattern( pattern ) { } export function getParsedPattern( pattern ) { - const parsedPattern = parsedPatternCache.has( pattern ); - return parsedPattern ? parsedPattern : parsePattern( pattern ); + let parsedPattern = parsedPatternCache.get( pattern ); + if ( parsedPattern ) { + return parsedPattern; + } + parsedPattern = parsePattern( pattern ); + parsedPatternCache.set( pattern, parsedPattern ); + return parsedPattern; } export const checkAllowList = ( list, item, defaultResult = null ) => {