From d3d0ed6abbce9dd2f59c5dd561c48a6fb67bafa5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Wed, 10 May 2023 12:07:35 +0100 Subject: [PATCH 01/35] Proposing a way to sort items in the block inspector based on allowed blocks --- .../src/components/inserter/search-results.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 6dc85af2653311..583232da386fa8 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -6,6 +6,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { VisuallyHidden } from '@wordpress/components'; import { useDebounce, useAsyncList } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -21,6 +22,7 @@ import useBlockTypesState from './hooks/use-block-types-state'; import { searchBlockItems, searchItems } from './search-items'; import InserterListbox from '../inserter-listbox'; import { orderBy } from '../../utils/sorting'; +import { store as blockEditorStore } from '../../store'; const INITIAL_INSERTER_RESULTS = 9; /** @@ -49,7 +51,7 @@ function InserterSearchResults( { orderInitialBlockItems, } ) { const debouncedSpeak = useDebounce( speak, 500 ); - + const { getBlockListSettings } = useSelect( blockEditorStore ); const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( { onSelect, rootClientId, @@ -89,12 +91,25 @@ function InserterSearchResults( { if ( maxBlockTypesToShow === 0 ) { return []; } + let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); if ( ! filterValue && orderInitialBlockItems ) { orderedItems = orderInitialBlockItems( orderedItems ); } + + // Get the allowed blocks for the parent block. + const parentBlockListSettings = getBlockListSettings( + state, + rootClientId + ); + const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks; + if ( parentAllowedBlocks ) { + console.log( 'parentAllowedBlocks', parentAllowedBlocks ); + // Use the parent allowed blocks to sort the results. + } + const results = searchBlockItems( - orderedItems, + blockTypes, blockTypeCategories, blockTypeCollections, filterValue From 1261536b179d37c152a53f61360abd15298c1f7d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 May 2023 12:45:24 +0100 Subject: [PATCH 02/35] Add inserterPriority API to inner blocks --- .../block-editor/src/components/inner-blocks/index.js | 2 ++ .../inner-blocks/use-nested-settings-update.js | 9 +++++++++ 2 files changed, 11 insertions(+) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index d83f62cf2b45cd..62812b9103b3b5 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -45,6 +45,7 @@ function UncontrolledInnerBlocks( props ) { const { clientId, allowedBlocks, + inserterPriority, __experimentalDefaultBlock, __experimentalDirectInsert, template, @@ -62,6 +63,7 @@ function UncontrolledInnerBlocks( props ) { useNestedSettingsUpdate( clientId, allowedBlocks, + inserterPriority, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index d9518eb303a044..7a17f1156f8c44 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -25,6 +25,7 @@ const pendingSettingsUpdates = new WeakMap(); * @param {string} clientId The client ID of the block to update. * @param {string[]} allowedBlocks An array of block names which are permitted * in inner blocks. + * @param {string[]} inserterPriority Block names and/or block variations to be prioritised in the inserter. * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ]. * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the * appender. @@ -40,6 +41,7 @@ const pendingSettingsUpdates = new WeakMap(); export default function useNestedSettingsUpdate( clientId, allowedBlocks, + inserterPriority, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, @@ -68,9 +70,15 @@ export default function useNestedSettingsUpdate( // render. const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks ); + const _inserterPriority = useMemo( + () => inserterPriority, + inserterPriority + ); + useLayoutEffect( () => { const newSettings = { allowedBlocks: _allowedBlocks, + inserterPriority: _inserterPriority, templateLock: templateLock === undefined || parentLock === 'contentOnly' ? parentLock @@ -130,6 +138,7 @@ export default function useNestedSettingsUpdate( clientId, blockListSettings, _allowedBlocks, + _inserterPriority, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, From e8d2c7893167088429dc134bf17e7a7ade465c29 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 May 2023 12:46:16 +0100 Subject: [PATCH 03/35] Sort inserter based on inserterPriority prop from block list settings --- .../src/components/inserter/search-results.js | 40 +++++++++++-------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 583232da386fa8..4fc3d6bb0e371e 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useEffect } from '@wordpress/element'; +import { useMemo, useEffect, useCallback } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { VisuallyHidden } from '@wordpress/components'; import { useDebounce, useAsyncList } from '@wordpress/compose'; @@ -48,7 +48,6 @@ function InserterSearchResults( { shouldFocusBlock = true, prioritizePatterns, selectBlockOnInsert, - orderInitialBlockItems, } ) { const debouncedSpeak = useDebounce( speak, 500 ); const { getBlockListSettings } = useSelect( blockEditorStore ); @@ -72,6 +71,9 @@ function InserterSearchResults( { destinationRootClientId ); + const parentBlockListSettings = getBlockListSettings( rootClientId ); + const parentInserterPriority = parentBlockListSettings?.inserterPriority; + const filteredBlockPatterns = useMemo( () => { if ( maxBlockPatterns === 0 ) { return []; @@ -87,29 +89,34 @@ function InserterSearchResults( { maxBlockTypesToShow = 0; } + const orderInitialBlockItems = useCallback( + ( items ) => { + items.sort( ( { id: aName }, { id: bName } ) => { + // Sort block items according to `prioritizedInserterBlocks`. + let aIndex = parentInserterPriority.indexOf( aName ); + let bIndex = parentInserterPriority.indexOf( bName ); + // All other block items should come after that. + if ( aIndex < 0 ) aIndex = parentInserterPriority.length; + if ( bIndex < 0 ) bIndex = parentInserterPriority.length; + return aIndex - bIndex; + } ); + return items; + }, + [ parentInserterPriority ] + ); + const filteredBlockTypes = useMemo( () => { if ( maxBlockTypesToShow === 0 ) { return []; } let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); - if ( ! filterValue && orderInitialBlockItems ) { + if ( ! filterValue && parentInserterPriority ) { orderedItems = orderInitialBlockItems( orderedItems ); } - // Get the allowed blocks for the parent block. - const parentBlockListSettings = getBlockListSettings( - state, - rootClientId - ); - const parentAllowedBlocks = parentBlockListSettings?.allowedBlocks; - if ( parentAllowedBlocks ) { - console.log( 'parentAllowedBlocks', parentAllowedBlocks ); - // Use the parent allowed blocks to sort the results. - } - const results = searchBlockItems( - blockTypes, + orderedItems, blockTypeCategories, blockTypeCollections, filterValue @@ -123,8 +130,9 @@ function InserterSearchResults( { blockTypes, blockTypeCategories, blockTypeCollections, - maxBlockTypes, orderInitialBlockItems, + maxBlockTypesToShow, + parentInserterPriority, ] ); // Announce search results on change. From d72bb33f32fb53fa99f0905c5853f9fb74e32235 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 May 2023 12:46:35 +0100 Subject: [PATCH 04/35] Use new inserterPriority API in Nav block --- packages/block-library/src/navigation/constants.js | 5 +++++ packages/block-library/src/navigation/edit/inner-blocks.js | 3 ++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js index 50579780522435..e357219dc237de 100644 --- a/packages/block-library/src/navigation/constants.js +++ b/packages/block-library/src/navigation/constants.js @@ -14,3 +14,8 @@ export const ALLOWED_BLOCKS = [ 'core/navigation-submenu', 'core/loginout', ]; + +export const INSERTER_PRIORITY = [ + 'core/navigation-link/page', + 'core/navigation-link', +]; diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index 17a6896a80fdbe..c3a73af5e956b5 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import PlaceholderPreview from './placeholder/placeholder-preview'; -import { DEFAULT_BLOCK, ALLOWED_BLOCKS } from '../constants'; +import { DEFAULT_BLOCK, ALLOWED_BLOCKS, INSERTER_PRIORITY } from '../constants'; export default function NavigationInnerBlocks( { clientId, @@ -93,6 +93,7 @@ export default function NavigationInnerBlocks( { onInput, onChange, allowedBlocks: ALLOWED_BLOCKS, + inserterPriority: INSERTER_PRIORITY, __experimentalDefaultBlock: DEFAULT_BLOCK, __experimentalDirectInsert: shouldDirectInsert, orientation, From 66b4a02cc41857df8c7686ceed59f1797e7b2368 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 May 2023 13:09:24 +0100 Subject: [PATCH 05/35] Correct comment Co-authored-by: Andrei Draganescu --- packages/block-editor/src/components/inserter/search-results.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 4fc3d6bb0e371e..80af60f717b1bb 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -92,7 +92,7 @@ function InserterSearchResults( { const orderInitialBlockItems = useCallback( ( items ) => { items.sort( ( { id: aName }, { id: bName } ) => { - // Sort block items according to `prioritizedInserterBlocks`. + // Sort block items according to `parentInserterPriority`. let aIndex = parentInserterPriority.indexOf( aName ); let bIndex = parentInserterPriority.indexOf( bName ); // All other block items should come after that. From d987b2909fc5eb63dc6d0ba00e7d814c62d957c0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 10 May 2023 14:54:16 +0100 Subject: [PATCH 06/35] Remove redundant prop --- .../src/components/inserter/index.js | 10 +------ .../src/components/inserter/quick-inserter.js | 2 -- .../components/off-canvas-editor/appender.js | 26 +------------------ 3 files changed, 2 insertions(+), 36 deletions(-) diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index 4acf5e3746eb88..9c24497e5a9078 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/packages/block-editor/src/components/inserter/index.js @@ -150,7 +150,6 @@ class PrivateInserter extends Component { prioritizePatterns, onSelectOrClose, selectBlockOnInsert, - orderInitialBlockItems, } = this.props; if ( isQuick ) { @@ -174,7 +173,6 @@ class PrivateInserter extends Component { isAppender={ isAppender } prioritizePatterns={ prioritizePatterns } selectBlockOnInsert={ selectBlockOnInsert } - orderInitialBlockItems={ orderInitialBlockItems } /> ); } @@ -426,13 +424,7 @@ export const ComposedPrivateInserter = compose( [ ] )( PrivateInserter ); const Inserter = forwardRef( ( props, ref ) => { - return ( - - ); + return ; } ); export default Inserter; diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 9fe96f091a86e8..540b51a4757e0d 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -32,7 +32,6 @@ export default function QuickInserter( { isAppender, prioritizePatterns, selectBlockOnInsert, - orderInitialBlockItems, } ) { const [ filterValue, setFilterValue ] = useState( '' ); const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( { @@ -125,7 +124,6 @@ export default function QuickInserter( { isDraggable={ false } prioritizePatterns={ prioritizePatterns } selectBlockOnInsert={ selectBlockOnInsert } - orderInitialBlockItems={ orderInitialBlockItems } /> diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js index 5f981d5a90ca51..1b91f5bdd76845 100644 --- a/packages/block-editor/src/components/off-canvas-editor/appender.js +++ b/packages/block-editor/src/components/off-canvas-editor/appender.js @@ -4,12 +4,7 @@ import { useInstanceId } from '@wordpress/compose'; import { speak } from '@wordpress/a11y'; import { useSelect } from '@wordpress/data'; -import { - forwardRef, - useState, - useEffect, - useCallback, -} from '@wordpress/element'; +import { forwardRef, useState, useEffect } from '@wordpress/element'; import { __, sprintf } from '@wordpress/i18n'; /** @@ -19,11 +14,6 @@ import { store as blockEditorStore } from '../../store'; import useBlockDisplayTitle from '../block-title/use-block-display-title'; import { ComposedPrivateInserter as PrivateInserter } from '../inserter'; -const prioritizedInserterBlocks = [ - 'core/navigation-link/page', - 'core/navigation-link', -]; - export const Appender = forwardRef( ( { nestingLevel, blockCount, clientId, ...props }, ref ) => { const [ insertedBlock, setInsertedBlock ] = useState( null ); @@ -68,19 +58,6 @@ export const Appender = forwardRef( ); }, [ insertedBlockTitle ] ); - const orderInitialBlockItems = useCallback( ( items ) => { - items.sort( ( { id: aName }, { id: bName } ) => { - // Sort block items according to `prioritizedInserterBlocks`. - let aIndex = prioritizedInserterBlocks.indexOf( aName ); - let bIndex = prioritizedInserterBlocks.indexOf( bName ); - // All other block items should come after that. - if ( aIndex < 0 ) aIndex = prioritizedInserterBlocks.length; - if ( bIndex < 0 ) bIndex = prioritizedInserterBlocks.length; - return aIndex - bIndex; - } ); - return items; - }, [] ); - if ( hideInserter ) { return null; } @@ -110,7 +87,6 @@ export const Appender = forwardRef( setInsertedBlock( maybeInsertedBlock ); } } } - orderInitialBlockItems={ orderInitialBlockItems } />
Date: Thu, 11 May 2023 10:18:47 +0100 Subject: [PATCH 07/35] Avoid stale inserterPriority --- .../src/components/inserter/search-results.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 80af60f717b1bb..d7dfdaeea8c94a 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -50,7 +50,19 @@ function InserterSearchResults( { selectBlockOnInsert, } ) { const debouncedSpeak = useDebounce( speak, 500 ); - const { getBlockListSettings } = useSelect( blockEditorStore ); + + const { parentInserterPriority } = useSelect( + ( select ) => { + const { inserterPriority } = + select( blockEditorStore ).getBlockListSettings( rootClientId ); + + return { + parentInserterPriority: inserterPriority, + }; + }, + [ rootClientId ] + ); + const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( { onSelect, rootClientId, @@ -71,9 +83,6 @@ function InserterSearchResults( { destinationRootClientId ); - const parentBlockListSettings = getBlockListSettings( rootClientId ); - const parentInserterPriority = parentBlockListSettings?.inserterPriority; - const filteredBlockPatterns = useMemo( () => { if ( maxBlockPatterns === 0 ) { return []; From d47e6c8b0693df6a3d7ca746d7d188e5597fc9d4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 11 May 2023 10:24:02 +0100 Subject: [PATCH 08/35] Make sorting function stable --- .../src/components/inserter/search-results.js | 51 +++++++++++-------- 1 file changed, 31 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index d7dfdaeea8c94a..649a718b26baf3 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useMemo, useEffect, useCallback } from '@wordpress/element'; +import { useMemo, useEffect } from '@wordpress/element'; import { __, _n, sprintf } from '@wordpress/i18n'; import { VisuallyHidden } from '@wordpress/components'; import { useDebounce, useAsyncList } from '@wordpress/compose'; @@ -33,6 +33,25 @@ const INITIAL_INSERTER_RESULTS = 9; */ const EMPTY_ARRAY = []; +const orderInitialBlockItems = ( items, priority ) => { + if ( ! priority ) { + return items; + } + + // Sort is "in place". + items.sort( ( { id: aName }, { id: bName } ) => { + // Sort block items according to `priority`. + let aIndex = priority.indexOf( aName ); + let bIndex = priority.indexOf( bName ); + // All other block items should come after that. + if ( aIndex < 0 ) aIndex = priority.length; + if ( bIndex < 0 ) bIndex = priority.length; + return aIndex - bIndex; + } ); + + return items; +}; + function InserterSearchResults( { filterValue, onSelect, @@ -98,30 +117,18 @@ function InserterSearchResults( { maxBlockTypesToShow = 0; } - const orderInitialBlockItems = useCallback( - ( items ) => { - items.sort( ( { id: aName }, { id: bName } ) => { - // Sort block items according to `parentInserterPriority`. - let aIndex = parentInserterPriority.indexOf( aName ); - let bIndex = parentInserterPriority.indexOf( bName ); - // All other block items should come after that. - if ( aIndex < 0 ) aIndex = parentInserterPriority.length; - if ( bIndex < 0 ) bIndex = parentInserterPriority.length; - return aIndex - bIndex; - } ); - return items; - }, - [ parentInserterPriority ] - ); - const filteredBlockTypes = useMemo( () => { if ( maxBlockTypesToShow === 0 ) { return []; } let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); + if ( ! filterValue && parentInserterPriority ) { - orderedItems = orderInitialBlockItems( orderedItems ); + orderedItems = orderInitialBlockItems( + orderedItems, + parentInserterPriority + ); } const results = searchBlockItems( @@ -139,7 +146,6 @@ function InserterSearchResults( { blockTypes, blockTypeCategories, blockTypeCollections, - orderInitialBlockItems, maxBlockTypesToShow, parentInserterPriority, ] ); @@ -156,7 +162,12 @@ function InserterSearchResults( { count ); debouncedSpeak( resultsFoundMessage ); - }, [ filterValue, debouncedSpeak ] ); + }, [ + filterValue, + debouncedSpeak, + filteredBlockTypes, + filteredBlockPatterns, + ] ); const currentShownBlockTypes = useAsyncList( filteredBlockTypes, { step: INITIAL_INSERTER_RESULTS, From 07aec2071a2bcb90a647247fd3f6b0e0eba09a2d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 11 May 2023 14:29:06 +0100 Subject: [PATCH 09/35] Renaming --- .../src/components/inner-blocks/index.js | 4 ++-- .../use-nested-settings-update.js | 21 ++++++++++++------- .../src/components/inserter/search-results.js | 12 +++++------ .../block-library/src/navigation/constants.js | 1 + .../src/navigation/edit/inner-blocks.js | 2 +- 5 files changed, 23 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js index 62812b9103b3b5..bf33abad4864f3 100644 --- a/packages/block-editor/src/components/inner-blocks/index.js +++ b/packages/block-editor/src/components/inner-blocks/index.js @@ -45,7 +45,7 @@ function UncontrolledInnerBlocks( props ) { const { clientId, allowedBlocks, - inserterPriority, + prioritizedInserterBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, template, @@ -63,7 +63,7 @@ function UncontrolledInnerBlocks( props ) { useNestedSettingsUpdate( clientId, allowedBlocks, - inserterPriority, + prioritizedInserterBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index 7a17f1156f8c44..0b3fdbac876f3a 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -25,7 +25,7 @@ const pendingSettingsUpdates = new WeakMap(); * @param {string} clientId The client ID of the block to update. * @param {string[]} allowedBlocks An array of block names which are permitted * in inner blocks. - * @param {string[]} inserterPriority Block names and/or block variations to be prioritised in the inserter. + * @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritised in the inserter. * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ]. * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the * appender. @@ -41,7 +41,7 @@ const pendingSettingsUpdates = new WeakMap(); export default function useNestedSettingsUpdate( clientId, allowedBlocks, - inserterPriority, + prioritizedInserterBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, @@ -68,17 +68,22 @@ export default function useNestedSettingsUpdate( // Memoize as inner blocks implementors often pass a new array on every // render. - const _allowedBlocks = useMemo( () => allowedBlocks, allowedBlocks ); + const _allowedBlocks = useMemo( + () => allowedBlocks, + // eslint-disable-next-line react-hooks/exhaustive-deps + allowedBlocks + ); - const _inserterPriority = useMemo( - () => inserterPriority, - inserterPriority + const _prioritizedInserterBlocks = useMemo( + () => prioritizedInserterBlocks, + // eslint-disable-next-line react-hooks/exhaustive-deps + prioritizedInserterBlocks ); useLayoutEffect( () => { const newSettings = { allowedBlocks: _allowedBlocks, - inserterPriority: _inserterPriority, + prioritizedInserterBlocks: _prioritizedInserterBlocks, templateLock: templateLock === undefined || parentLock === 'contentOnly' ? parentLock @@ -138,7 +143,7 @@ export default function useNestedSettingsUpdate( clientId, blockListSettings, _allowedBlocks, - _inserterPriority, + _prioritizedInserterBlocks, __experimentalDefaultBlock, __experimentalDirectInsert, templateLock, diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 649a718b26baf3..31a1371b3ee5c0 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -70,13 +70,13 @@ function InserterSearchResults( { } ) { const debouncedSpeak = useDebounce( speak, 500 ); - const { parentInserterPriority } = useSelect( + const { prioritisedBlocks } = useSelect( ( select ) => { - const { inserterPriority } = + const { prioritizedInserterBlocks } = select( blockEditorStore ).getBlockListSettings( rootClientId ); return { - parentInserterPriority: inserterPriority, + prioritisedBlocks: prioritizedInserterBlocks, }; }, [ rootClientId ] @@ -124,10 +124,10 @@ function InserterSearchResults( { let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); - if ( ! filterValue && parentInserterPriority ) { + if ( ! filterValue && prioritisedBlocks ) { orderedItems = orderInitialBlockItems( orderedItems, - parentInserterPriority + prioritisedBlocks ); } @@ -147,7 +147,7 @@ function InserterSearchResults( { blockTypeCategories, blockTypeCollections, maxBlockTypesToShow, - parentInserterPriority, + prioritisedBlocks, ] ); // Announce search results on change. diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js index e357219dc237de..b05464e78260a5 100644 --- a/packages/block-library/src/navigation/constants.js +++ b/packages/block-library/src/navigation/constants.js @@ -16,6 +16,7 @@ export const ALLOWED_BLOCKS = [ ]; export const INSERTER_PRIORITY = [ + 'core/spacer', 'core/navigation-link/page', 'core/navigation-link', ]; diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index c3a73af5e956b5..765caba0943969 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -93,7 +93,7 @@ export default function NavigationInnerBlocks( { onInput, onChange, allowedBlocks: ALLOWED_BLOCKS, - inserterPriority: INSERTER_PRIORITY, + prioritizedInserterBlocks: INSERTER_PRIORITY, __experimentalDefaultBlock: DEFAULT_BLOCK, __experimentalDirectInsert: shouldDirectInsert, orientation, From 25b18f240eac1df961a3acbb745d6d9464aa4441 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 11 May 2023 14:30:00 +0100 Subject: [PATCH 10/35] Remove redundant comment --- packages/block-editor/src/components/inserter/search-results.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 31a1371b3ee5c0..62d3e2947794a8 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -38,7 +38,6 @@ const orderInitialBlockItems = ( items, priority ) => { return items; } - // Sort is "in place". items.sort( ( { id: aName }, { id: bName } ) => { // Sort block items according to `priority`. let aIndex = priority.indexOf( aName ); From 264177ac8c8628599b24c032e83eb61fb35a9884 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 11 May 2023 15:38:25 +0100 Subject: [PATCH 11/35] remove spacer --- packages/block-library/src/navigation/constants.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js index b05464e78260a5..e357219dc237de 100644 --- a/packages/block-library/src/navigation/constants.js +++ b/packages/block-library/src/navigation/constants.js @@ -16,7 +16,6 @@ export const ALLOWED_BLOCKS = [ ]; export const INSERTER_PRIORITY = [ - 'core/spacer', 'core/navigation-link/page', 'core/navigation-link', ]; From 509c362db013ce9f8a8ad46f2b264c5e9352fb75 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 May 2023 13:53:07 -0500 Subject: [PATCH 12/35] Set prioritisedBlocks as empty array when no blockListSettings are found. There are instances in the main inserter search results where the rootClientId is undefined, such as when searching for a block. This means there are no blockListSettings, which ends up in no `proritisedBlocks` property being returned and it crashses the app. --- .../block-editor/src/components/inserter/search-results.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index 62d3e2947794a8..c2c5d0c49494c8 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -71,11 +71,12 @@ function InserterSearchResults( { const { prioritisedBlocks } = useSelect( ( select ) => { - const { prioritizedInserterBlocks } = + const blockListSettings = select( blockEditorStore ).getBlockListSettings( rootClientId ); return { - prioritisedBlocks: prioritizedInserterBlocks, + prioritisedBlocks: + blockListSettings?.prioritizedInserterBlocks || [], }; }, [ rootClientId ] @@ -123,7 +124,7 @@ function InserterSearchResults( { let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); - if ( ! filterValue && prioritisedBlocks ) { + if ( ! filterValue && prioritisedBlocks.length ) { orderedItems = orderInitialBlockItems( orderedItems, prioritisedBlocks From 1d81ef415e5ab5d1987827c69b9d6d533be64b17 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 May 2023 13:57:05 -0500 Subject: [PATCH 13/35] proritise -> prioritize for consistency --- .../inner-blocks/use-nested-settings-update.js | 2 +- .../src/components/inserter/search-results.js | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index 0b3fdbac876f3a..e779390bea9a73 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -25,7 +25,7 @@ const pendingSettingsUpdates = new WeakMap(); * @param {string} clientId The client ID of the block to update. * @param {string[]} allowedBlocks An array of block names which are permitted * in inner blocks. - * @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritised in the inserter. + * @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritized in the inserter. * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ]. * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the * appender. diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index c2c5d0c49494c8..c8b0f3e2bc0c5c 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -69,13 +69,13 @@ function InserterSearchResults( { } ) { const debouncedSpeak = useDebounce( speak, 500 ); - const { prioritisedBlocks } = useSelect( + const { prioritizedBlocks } = useSelect( ( select ) => { const blockListSettings = select( blockEditorStore ).getBlockListSettings( rootClientId ); return { - prioritisedBlocks: + prioritizedBlocks: blockListSettings?.prioritizedInserterBlocks || [], }; }, @@ -124,10 +124,10 @@ function InserterSearchResults( { let orderedItems = orderBy( blockTypes, 'frecency', 'desc' ); - if ( ! filterValue && prioritisedBlocks.length ) { + if ( ! filterValue && prioritizedBlocks.length ) { orderedItems = orderInitialBlockItems( orderedItems, - prioritisedBlocks + prioritizedBlocks ); } @@ -147,7 +147,7 @@ function InserterSearchResults( { blockTypeCategories, blockTypeCollections, maxBlockTypesToShow, - prioritisedBlocks, + prioritizedBlocks, ] ); // Announce search results on change. From 1523f1ccae37bcc9b587f8ef84a0d976d2b20d70 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 11 May 2023 21:09:03 +0100 Subject: [PATCH 14/35] Update packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js Co-authored-by: Alex Lende --- .../components/inner-blocks/use-nested-settings-update.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index e779390bea9a73..57558ef3ec6fdc 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -66,8 +66,11 @@ export default function useNestedSettingsUpdate( [ clientId ] ); - // Memoize as inner blocks implementors often pass a new array on every - // render. + // Memoize allowedBlocks and prioritisedInnerBlocks based on the contents + // of the arrays. Implementors often pass a new array on every render, + // and the contents of the arrays are just strings, so the entire array + // can be passed as dependencies. + const _allowedBlocks = useMemo( () => allowedBlocks, // eslint-disable-next-line react-hooks/exhaustive-deps From eeb586ddc6565069d700da921446966c5f04cfc2 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 May 2023 15:22:52 -0500 Subject: [PATCH 15/35] Renaming constant to match updated name --- packages/block-library/src/navigation/constants.js | 2 +- .../block-library/src/navigation/edit/inner-blocks.js | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/constants.js b/packages/block-library/src/navigation/constants.js index e357219dc237de..9bdf8736d7c2b6 100644 --- a/packages/block-library/src/navigation/constants.js +++ b/packages/block-library/src/navigation/constants.js @@ -15,7 +15,7 @@ export const ALLOWED_BLOCKS = [ 'core/loginout', ]; -export const INSERTER_PRIORITY = [ +export const PRIORITIZED_INSERTER_BLOCKS = [ 'core/navigation-link/page', 'core/navigation-link', ]; diff --git a/packages/block-library/src/navigation/edit/inner-blocks.js b/packages/block-library/src/navigation/edit/inner-blocks.js index 765caba0943969..669703f002dbb2 100644 --- a/packages/block-library/src/navigation/edit/inner-blocks.js +++ b/packages/block-library/src/navigation/edit/inner-blocks.js @@ -14,7 +14,11 @@ import { useMemo } from '@wordpress/element'; * Internal dependencies */ import PlaceholderPreview from './placeholder/placeholder-preview'; -import { DEFAULT_BLOCK, ALLOWED_BLOCKS, INSERTER_PRIORITY } from '../constants'; +import { + DEFAULT_BLOCK, + ALLOWED_BLOCKS, + PRIORITIZED_INSERTER_BLOCKS, +} from '../constants'; export default function NavigationInnerBlocks( { clientId, @@ -93,7 +97,7 @@ export default function NavigationInnerBlocks( { onInput, onChange, allowedBlocks: ALLOWED_BLOCKS, - prioritizedInserterBlocks: INSERTER_PRIORITY, + prioritizedInserterBlocks: PRIORITIZED_INSERTER_BLOCKS, __experimentalDefaultBlock: DEFAULT_BLOCK, __experimentalDirectInsert: shouldDirectInsert, orientation, From be2e9d60bbd299e4d4f7815d824dcf9df369e7b2 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 11 May 2023 15:32:48 -0500 Subject: [PATCH 16/35] Add prioritizedKInnerBlocks to the inner-blocks README --- packages/block-editor/src/components/inner-blocks/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index eb42da998f0d0c..9e4c636f77be72 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -180,3 +180,8 @@ For example, a button block, deeply nested in several levels of block `X` that u - **Type:** `Function` - **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example. + +### `prioritizedInserterBlocks` + +- **Type:** `Array` +- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link/page` and `core/navigation-link` are the most common inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. \ No newline at end of file From 5d6f1b53fc714ac6c4aa32a33dd175ead76e1dac Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 11 May 2023 22:16:58 +0100 Subject: [PATCH 17/35] lint fix --- .../src/components/inner-blocks/use-nested-settings-update.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index 57558ef3ec6fdc..c1b586c6e2115a 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -70,7 +70,7 @@ export default function useNestedSettingsUpdate( // of the arrays. Implementors often pass a new array on every render, // and the contents of the arrays are just strings, so the entire array // can be passed as dependencies. - + const _allowedBlocks = useMemo( () => allowedBlocks, // eslint-disable-next-line react-hooks/exhaustive-deps From 1162a72dd8106fac1e484b90e9adbe34a09eaf9c Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 12 May 2023 00:42:31 +0100 Subject: [PATCH 18/35] update comment --- packages/block-editor/src/components/inner-blocks/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index 9e4c636f77be72..aa0f72410c5ed6 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -184,4 +184,4 @@ For example, a button block, deeply nested in several levels of block `X` that u ### `prioritizedInserterBlocks` - **Type:** `Array` -- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link/page` and `core/navigation-link` are the most common inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. \ No newline at end of file +- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link` and `core/navigation-link/page` are the most common inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. From 51e5d3c7735e2726fb8490fb926023529d2cdcde Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 12 May 2023 08:23:34 +0100 Subject: [PATCH 19/35] update comment --- packages/block-editor/src/components/inner-blocks/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index aa0f72410c5ed6..2f836a6e5c4f42 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -184,4 +184,4 @@ For example, a button block, deeply nested in several levels of block `X` that u ### `prioritizedInserterBlocks` - **Type:** `Array` -- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link` and `core/navigation-link/page` are the most common inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. +- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link` and `core/navigation-link/page` are the most commonly used inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. From db4568fa77180af005f16537c59491cfef11ddb3 Mon Sep 17 00:00:00 2001 From: scruffian Date: Fri, 12 May 2023 10:17:49 +0100 Subject: [PATCH 20/35] pass the correct props to useNestedSettingsUpdate --- .../src/components/inner-blocks/index.native.js | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js index 3ba3b8e8321a2b..022a702154ee21 100644 --- a/packages/block-editor/src/components/inner-blocks/index.native.js +++ b/packages/block-editor/src/components/inner-blocks/index.native.js @@ -73,9 +73,13 @@ function UncontrolledInnerBlocks( props ) { const { clientId, allowedBlocks, + prioritizedInserterBlocks, + __experimentalDefaultBlock, + __experimentalDirectInsert, template, templateLock, templateInsertUpdatesSelection, + __experimentalCaptureToolbars: captureToolbars, orientation, renderAppender, renderFooterAppender, @@ -97,7 +101,17 @@ function UncontrolledInnerBlocks( props ) { const context = useBlockContext( clientId ); - useNestedSettingsUpdate( clientId, allowedBlocks, templateLock ); + useNestedSettingsUpdate( + clientId, + allowedBlocks, + prioritizedInserterBlocks, + __experimentalDefaultBlock, + __experimentalDirectInsert, + templateLock, + captureToolbars, + orientation, + layout + ); useInnerBlockTemplateSync( clientId, From 96b70f3f5ae03d96691c41f72355db72538c9140 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 10:21:38 +0100 Subject: [PATCH 21/35] Use stable ref Co-authored-by: George Mamadashvili --- packages/block-editor/src/components/inserter/search-results.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index c8b0f3e2bc0c5c..b2dc15d586adf9 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -76,7 +76,7 @@ function InserterSearchResults( { return { prioritizedBlocks: - blockListSettings?.prioritizedInserterBlocks || [], + blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY, }; }, [ rootClientId ] From 21c12e1b018a5ced4419050c37d85ddc79ec1bbf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 10:59:30 +0100 Subject: [PATCH 22/35] Register the test Plugin for e2e tests --- ...ner-blocks-prioritized-inserter-blocks.php | 28 ++++++ .../index.js | 87 +++++++++++++++++++ 2 files changed, 115 insertions(+) create mode 100644 packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php create mode 100644 packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php new file mode 100644 index 00000000000000..8a2feb9f35a178 --- /dev/null +++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks.php @@ -0,0 +1,28 @@ + Date: Fri, 12 May 2023 11:03:00 +0100 Subject: [PATCH 23/35] Register block with prioritzedInserterBlocks set --- .../index.js | 47 ++++++++----------- 1 file changed, 20 insertions(+), 27 deletions(-) diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js index d827121fb9ced3..66c8a9c292d089 100644 --- a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js @@ -1,5 +1,4 @@ ( function () { - const { withSelect } = wp.data; const { registerBlockType } = wp.blocks; const { createElement: el } = wp.element; const { InnerBlocks } = wp.blockEditor; @@ -13,8 +12,6 @@ [ 'core/paragraph', { placeholder: __( 'Add a description' ) } ], [ 'core/quote' ], ]; - const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ]; - const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ]; const save = function () { return el( 'div', divProps, el( InnerBlocks.Content ) ); @@ -31,32 +28,28 @@ save, } ); - // registerBlockType( 'test/allowed-blocks-set', { - // title: 'Allowed Blocks Set', - // icon: 'carrot', - // category: 'text', - - // edit() { - // return el( - // 'div', - // divProps, - // el( InnerBlocks, { - // template, - // allowedBlocks: [ - // 'core/button', - // 'core/gallery', - // 'core/list', - // 'core/media-text', - // 'core/quote', - // ], - // } ) - // ); - // }, + registerBlockType( 'test/prioritized-inserter-blocks-set', { + title: 'Prioritized Inserter Blocks Set', + icon: 'carrot', + category: 'text', + edit() { + return el( + 'div', + divProps, + el( InnerBlocks, { + template, + prioritizedInserterBlocks: [ + 'core/spacer', + 'core/button', + ], + } ) + ); + }, - // save, - // } ); + save, + } ); - // registerBlockType( 'test/allowed-blocks-dynamic', { + // registerBlockType( 'test/prioritized-inserter-blocks-dynamic', { // title: 'Allowed Blocks Dynamic', // icon: 'carrot', // category: 'text', From ef93a6d97a92d277c28fb891ba7b11350b800aaa Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 11:48:30 +0100 Subject: [PATCH 24/35] Add initial test scaffold --- .../index.js | 14 ++- ...blocks-prioritized-inserter-blocks.test.js | 105 ++++++++++++++++++ 2 files changed, 113 insertions(+), 6 deletions(-) create mode 100644 packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js index 66c8a9c292d089..f070e3d26a051e 100644 --- a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js @@ -3,15 +3,16 @@ const { createElement: el } = wp.element; const { InnerBlocks } = wp.blockEditor; const __ = wp.i18n.__; - const divProps = { + + const divProps = { className: 'product', style: { outline: '1px solid gray', padding: 5 }, }; + + // Make it easier to select the block. const template = [ [ 'core/image' ], - [ 'core/paragraph', { placeholder: __( 'Add a description' ) } ], - [ 'core/quote' ], - ]; + ]; const save = function () { return el( 'div', divProps, el( InnerBlocks.Content ) ); @@ -37,10 +38,11 @@ 'div', divProps, el( InnerBlocks, { - template, + template, prioritizedInserterBlocks: [ + 'core/audio', 'core/spacer', - 'core/button', + 'core/code', ], } ) ); diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js new file mode 100644 index 00000000000000..9f0cd85d9b2e1b --- /dev/null +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -0,0 +1,105 @@ +/** + * WordPress dependencies + */ +import { + activatePlugin, + createNewPost, + deactivatePlugin, + getAllBlockInserterItemTitles, + insertBlock, + openGlobalBlockInserter, + closeGlobalBlockInserter, + clickBlockToolbarButton, +} from '@wordpress/e2e-test-utils'; + +describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { + const imageBlockSelector = + '.block-editor-rich-text__editable[data-type="core/paragraph"]'; + beforeAll( async () => { + await activatePlugin( + 'gutenberg-test-innerblocks-prioritized-inserter-blocks' + ); + } ); + + beforeEach( async () => { + await createNewPost(); + } ); + + afterAll( async () => { + await deactivatePlugin( + 'gutenberg-test-innerblocks-prioritized-inserter-blocks' + ); + } ); + + it( 'allows all blocks if the allowed blocks setting was not set', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-unset"]'; + await insertBlock( 'Prioritized Inserter Blocks Unset' ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `[data-type="test/prioritized-inserter-blocks-unset"] .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( + '.block-editor-inserter__quick-inserter-results' + ); + + await expect( await getAllBlockInserterItemTitles() ).toHaveLength( 6 ); + } ); + + // it( 'allows the blocks if the allowed blocks setting was set', async () => { + // const parentBlockSelector = '[data-type="test/prioritized-inner-block-set"]'; + // const childParagraphSelector = `${ parentBlockSelector } ${ imageBlockSelector }`; + // await insertBlock( 'Prioritized Inserter Blocks Set' ); + // await closeGlobalBlockInserter(); + // await page.waitForSelector( childParagraphSelector ); + // await page.click( childParagraphSelector ); + // await openGlobalBlockInserter(); + // expect( await getAllBlockInserterItemTitles() ).toEqual( [ + // 'Button', + // 'Gallery', + // 'List', + // 'Media & Text', + // 'Quote', + // ] ); + // } ); + + // it( 'correctly applies dynamic allowed blocks restrictions', async () => { + // await insertBlock( 'Prioritized Inserter Blocks Dynamic' ); + // await closeGlobalBlockInserter(); + // const parentBlockSelector = '[data-type="test/prioritized-inner-block-dynamic"]'; + // const blockAppender = '.block-list-appender button'; + // const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; + // await page.waitForSelector( appenderSelector ); + // await page.click( appenderSelector ); + // expect( await getAllBlockInserterItemTitles() ).toEqual( [ + // 'Image', + // 'List', + // ] ); + // const insertButton = ( + // await page.$x( `//button//span[contains(text(), 'List')]` ) + // )[ 0 ]; + // await insertButton.click(); + // // Select the list wrapper so the image is inserable. + // await page.keyboard.press( 'ArrowUp' ); + // await insertBlock( 'Image' ); + // await closeGlobalBlockInserter(); + // await page.waitForSelector( '.product[data-number-of-children="2"]' ); + // await clickBlockToolbarButton( + // 'Select Prioritized Inserter Blocks Dynamic' + // ); + // // This focus shouldn't be neessary but there's a bug in trunk right now + // // Where if you open the inserter, don't do anything and click the "appender" on the canvas + // // the appender is not opened right away. + // // It needs to be investigated on its own. + // await page.focus( appenderSelector ); + // await page.click( appenderSelector ); + // expect( await getAllBlockInserterItemTitles() ).toEqual( [ + // 'Gallery', + // 'Video', + // ] ); + // } ); +} ); From b1634477649db2049fa7132b7f8f5e06980dc10a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 11:57:55 +0100 Subject: [PATCH 25/35] Tidy up scaffolded test --- ...ner-blocks-prioritized-inserter-blocks.test.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 9f0cd85d9b2e1b..141b6578397270 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -7,14 +7,13 @@ import { deactivatePlugin, getAllBlockInserterItemTitles, insertBlock, - openGlobalBlockInserter, closeGlobalBlockInserter, - clickBlockToolbarButton, } from '@wordpress/e2e-test-utils'; +const QUICK_INSERTER_RESULTS_SELECTOR = + '.block-editor-inserter__quick-inserter-results'; + describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { - const imageBlockSelector = - '.block-editor-rich-text__editable[data-type="core/paragraph"]'; beforeAll( async () => { await activatePlugin( 'gutenberg-test-innerblocks-prioritized-inserter-blocks' @@ -31,7 +30,7 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { ); } ); - it( 'allows all blocks if the allowed blocks setting was not set', async () => { + it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => { const parentBlockSelector = '[data-type="test/prioritized-inserter-blocks-unset"]'; await insertBlock( 'Prioritized Inserter Blocks Unset' ); @@ -40,12 +39,10 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { await page.waitForSelector( parentBlockSelector ); await page.click( - `[data-type="test/prioritized-inserter-blocks-unset"] .block-list-appender .block-editor-inserter__toggle` + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` ); - await page.waitForSelector( - '.block-editor-inserter__quick-inserter-results' - ); + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); await expect( await getAllBlockInserterItemTitles() ).toHaveLength( 6 ); } ); From 6bf6d37f6887e3f790d8b388e905c0eafe216b81 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:06:46 +0100 Subject: [PATCH 26/35] Add test for new API It fails :( --- ...blocks-prioritized-inserter-blocks.test.js | 73 ++++++------------- 1 file changed, 22 insertions(+), 51 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 141b6578397270..02a24d6eaeb72c 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -47,56 +47,27 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { await expect( await getAllBlockInserterItemTitles() ).toHaveLength( 6 ); } ); - // it( 'allows the blocks if the allowed blocks setting was set', async () => { - // const parentBlockSelector = '[data-type="test/prioritized-inner-block-set"]'; - // const childParagraphSelector = `${ parentBlockSelector } ${ imageBlockSelector }`; - // await insertBlock( 'Prioritized Inserter Blocks Set' ); - // await closeGlobalBlockInserter(); - // await page.waitForSelector( childParagraphSelector ); - // await page.click( childParagraphSelector ); - // await openGlobalBlockInserter(); - // expect( await getAllBlockInserterItemTitles() ).toEqual( [ - // 'Button', - // 'Gallery', - // 'List', - // 'Media & Text', - // 'Quote', - // ] ); - // } ); + it( 'uses the priority ordering if prioritzed blocks setting is set', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-set"]'; + await insertBlock( 'Prioritized Inserter Blocks Set' ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); + + // Should still be only 6 results regardless of the priority ordering. + const inserterItems = await getAllBlockInserterItemTitles(); - // it( 'correctly applies dynamic allowed blocks restrictions', async () => { - // await insertBlock( 'Prioritized Inserter Blocks Dynamic' ); - // await closeGlobalBlockInserter(); - // const parentBlockSelector = '[data-type="test/prioritized-inner-block-dynamic"]'; - // const blockAppender = '.block-list-appender button'; - // const appenderSelector = `${ parentBlockSelector } ${ blockAppender }`; - // await page.waitForSelector( appenderSelector ); - // await page.click( appenderSelector ); - // expect( await getAllBlockInserterItemTitles() ).toEqual( [ - // 'Image', - // 'List', - // ] ); - // const insertButton = ( - // await page.$x( `//button//span[contains(text(), 'List')]` ) - // )[ 0 ]; - // await insertButton.click(); - // // Select the list wrapper so the image is inserable. - // await page.keyboard.press( 'ArrowUp' ); - // await insertBlock( 'Image' ); - // await closeGlobalBlockInserter(); - // await page.waitForSelector( '.product[data-number-of-children="2"]' ); - // await clickBlockToolbarButton( - // 'Select Prioritized Inserter Blocks Dynamic' - // ); - // // This focus shouldn't be neessary but there's a bug in trunk right now - // // Where if you open the inserter, don't do anything and click the "appender" on the canvas - // // the appender is not opened right away. - // // It needs to be investigated on its own. - // await page.focus( appenderSelector ); - // await page.click( appenderSelector ); - // expect( await getAllBlockInserterItemTitles() ).toEqual( [ - // 'Gallery', - // 'Video', - // ] ); - // } ); + expect( inserterItems.slice( 0, 2 ) ).toEqual( [ + 'Audio', + 'Spacer', + 'Code', + ] ); + } ); } ); From 8cb75c86b57bb06360fc279cf21897c18053bd53 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:13:01 +0100 Subject: [PATCH 27/35] Try removing sort from helper MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Why is this even here? It shouldn’t transfer results like this. --- .../e2e-test-utils/src/get-all-block-inserter-item-titles.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js b/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js index d9d27541ac6ef6..5c0525c80b2b8c 100644 --- a/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js +++ b/packages/e2e-test-utils/src/get-all-block-inserter-item-titles.js @@ -20,5 +20,5 @@ export async function getAllBlockInserterItemTitles() { return inserterItem.innerText; } ); } ); - return [ ...new Set( inserterItemTitles ) ].sort(); + return [ ...new Set( inserterItemTitles ) ]; } From d0ddf60cbdc67ab89c9e8a67addb9ebb73b75cee Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:13:15 +0100 Subject: [PATCH 28/35] Fix test --- .../plugins/inner-blocks-prioritized-inserter-blocks.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 02a24d6eaeb72c..4c8e15f754c17d 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -64,7 +64,7 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { // Should still be only 6 results regardless of the priority ordering. const inserterItems = await getAllBlockInserterItemTitles(); - expect( inserterItems.slice( 0, 2 ) ).toEqual( [ + expect( inserterItems.slice( 0, 3 ) ).toEqual( [ 'Audio', 'Spacer', 'Code', From 836b4075699301f6905372aaf62ac08021e125cf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:24:39 +0100 Subject: [PATCH 29/35] Add test to check does not override allowedBlocks when conflicted --- .../index.js | 53 +++++++++---------- ...blocks-prioritized-inserter-blocks.test.js | 28 ++++++++++ 2 files changed, 54 insertions(+), 27 deletions(-) diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js index f070e3d26a051e..7e1540bcb4760d 100644 --- a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js @@ -2,7 +2,6 @@ const { registerBlockType } = wp.blocks; const { createElement: el } = wp.element; const { InnerBlocks } = wp.blockEditor; - const __ = wp.i18n.__; const divProps = { className: 'product', @@ -51,32 +50,32 @@ save, } ); - // registerBlockType( 'test/prioritized-inserter-blocks-dynamic', { - // title: 'Allowed Blocks Dynamic', - // icon: 'carrot', - // category: 'text', + registerBlockType( 'test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks', { + title: 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks', + icon: 'carrot', + category: 'text', + edit() { + return el( + 'div', + divProps, + el( InnerBlocks, { + template, + allowedBlocks: [ + 'core/spacer', + 'core/code', + 'core/paragraph', + 'core/heading' + ], + prioritizedInserterBlocks: [ + 'core/audio', // this is **not** in the allowedBlocks list + 'core/spacer', + 'core/code', + ], + } ) + ); + }, - // edit: withSelect( function ( select, ownProps ) { - // const getBlockOrder = select( 'core/block-editor' ).getBlockOrder; - // return { - // numberOfChildren: getBlockOrder( ownProps.clientId ).length, - // }; - // } )( function ( props ) { - // return el( - // 'div', - // { - // ...divProps, - // 'data-number-of-children': props.numberOfChildren, - // }, - // el( InnerBlocks, { - // allowedBlocks: - // props.numberOfChildren < 2 - // ? allowedBlocksWhenSingleEmptyChild - // : allowedBlocksWhenMultipleChildren, - // } ) - // ); - // } ), + save, + } ); - // save, - // } ); } )(); diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 4c8e15f754c17d..66e91a8cd09fbc 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -70,4 +70,32 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { 'Code', ] ); } ); + + it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]'; + await insertBlock( + 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks' + ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); + + const inserterItems = await getAllBlockInserterItemTitles(); + + expect( inserterItems.slice( 0, 3 ) ).toEqual( [ + 'Spacer', + 'Code', + 'Paragraph', + ] ); + expect( inserterItems ).toEqual( + expect.not.arrayContaining( [ 'Audio' ] ) + ); + } ); } ); From a954bae8b0c06476314d978274f956694be37eda Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:26:03 +0100 Subject: [PATCH 30/35] Add additional assertion for retaining of correct number of results --- .../plugins/inner-blocks-prioritized-inserter-blocks.test.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 66e91a8cd09fbc..586b42f0e4e039 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -64,6 +64,9 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { // Should still be only 6 results regardless of the priority ordering. const inserterItems = await getAllBlockInserterItemTitles(); + // Should still be only 6 results regardless of the priority ordering. + expect( inserterItems ).toHaveLength( 6 ); + expect( inserterItems.slice( 0, 3 ) ).toEqual( [ 'Audio', 'Spacer', From a787e9d3aa3f7fcbeac83d91cb13ca8eebaee57c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 12 May 2023 12:27:16 +0100 Subject: [PATCH 31/35] Ensure tests reflect target of Quick Inserter --- ...blocks-prioritized-inserter-blocks.test.js | 144 +++++++++--------- 1 file changed, 74 insertions(+), 70 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js index 586b42f0e4e039..c34e402ea19806 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js @@ -30,75 +30,79 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => { ); } ); - it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => { - const parentBlockSelector = - '[data-type="test/prioritized-inserter-blocks-unset"]'; - await insertBlock( 'Prioritized Inserter Blocks Unset' ); - await closeGlobalBlockInserter(); - - await page.waitForSelector( parentBlockSelector ); - - await page.click( - `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` - ); - - await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); - - await expect( await getAllBlockInserterItemTitles() ).toHaveLength( 6 ); - } ); - - it( 'uses the priority ordering if prioritzed blocks setting is set', async () => { - const parentBlockSelector = - '[data-type="test/prioritized-inserter-blocks-set"]'; - await insertBlock( 'Prioritized Inserter Blocks Set' ); - await closeGlobalBlockInserter(); - - await page.waitForSelector( parentBlockSelector ); - - await page.click( - `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` - ); - - await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); - - // Should still be only 6 results regardless of the priority ordering. - const inserterItems = await getAllBlockInserterItemTitles(); - - // Should still be only 6 results regardless of the priority ordering. - expect( inserterItems ).toHaveLength( 6 ); - - expect( inserterItems.slice( 0, 3 ) ).toEqual( [ - 'Audio', - 'Spacer', - 'Code', - ] ); - } ); - - it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => { - const parentBlockSelector = - '[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]'; - await insertBlock( - 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks' - ); - await closeGlobalBlockInserter(); - - await page.waitForSelector( parentBlockSelector ); - - await page.click( - `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` - ); - - await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); - - const inserterItems = await getAllBlockInserterItemTitles(); - - expect( inserterItems.slice( 0, 3 ) ).toEqual( [ - 'Spacer', - 'Code', - 'Paragraph', - ] ); - expect( inserterItems ).toEqual( - expect.not.arrayContaining( [ 'Audio' ] ) - ); + describe( 'Quick inserter', () => { + it( 'uses defaulting ordering if prioritzed blocks setting was not set', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-unset"]'; + await insertBlock( 'Prioritized Inserter Blocks Unset' ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); + + await expect( await getAllBlockInserterItemTitles() ).toHaveLength( + 6 + ); + } ); + + it( 'uses the priority ordering if prioritzed blocks setting is set', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-set"]'; + await insertBlock( 'Prioritized Inserter Blocks Set' ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); + + // Should still be only 6 results regardless of the priority ordering. + const inserterItems = await getAllBlockInserterItemTitles(); + + // Should still be only 6 results regardless of the priority ordering. + expect( inserterItems ).toHaveLength( 6 ); + + expect( inserterItems.slice( 0, 3 ) ).toEqual( [ + 'Audio', + 'Spacer', + 'Code', + ] ); + } ); + + it( 'obeys allowed blocks over prioritzed blocks setting if conflicted', async () => { + const parentBlockSelector = + '[data-type="test/prioritized-inserter-blocks-set-with-conflicting-allowed-blocks"]'; + await insertBlock( + 'Prioritized Inserter Blocks Set With Conflicting Allowed Blocks' + ); + await closeGlobalBlockInserter(); + + await page.waitForSelector( parentBlockSelector ); + + await page.click( + `${ parentBlockSelector } .block-list-appender .block-editor-inserter__toggle` + ); + + await page.waitForSelector( QUICK_INSERTER_RESULTS_SELECTOR ); + + const inserterItems = await getAllBlockInserterItemTitles(); + + expect( inserterItems.slice( 0, 3 ) ).toEqual( [ + 'Spacer', + 'Code', + 'Paragraph', + ] ); + expect( inserterItems ).toEqual( + expect.not.arrayContaining( [ 'Audio' ] ) + ); + } ); } ); } ); From 45bd5acc4ca8e1c1fcf25d629573eba5d534bfb7 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 12 May 2023 15:36:37 +0200 Subject: [PATCH 32/35] sort allowed blocks on the tests that consume getAllBlockInserterItemTitles --- packages/e2e-tests/specs/editor/plugins/child-blocks.test.js | 3 ++- .../specs/editor/plugins/inner-blocks-allowed-blocks.test.js | 5 +++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js index 183813a9511362..c7ca368003397e 100644 --- a/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/child-blocks.test.js @@ -56,7 +56,8 @@ describe( 'Child Blocks', () => { '[data-type="test/child-blocks-restricted-parent"] .block-editor-default-block-appender' ); await openGlobalBlockInserter(); - expect( await getAllBlockInserterItemTitles() ).toEqual( [ + const allowedBlocks = await getAllBlockInserterItemTitles(); + expect( allowedBlocks.sort() ).toEqual( [ 'Child Blocks Child', 'Image', 'Paragraph', diff --git a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js index 3eb1ee4775f74b..4431d3bd5802f0 100644 --- a/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +++ b/packages/e2e-tests/specs/editor/plugins/inner-blocks-allowed-blocks.test.js @@ -50,7 +50,8 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => { await page.waitForSelector( childParagraphSelector ); await page.click( childParagraphSelector ); await openGlobalBlockInserter(); - expect( await getAllBlockInserterItemTitles() ).toEqual( [ + const allowedBlocks = await getAllBlockInserterItemTitles(); + expect( allowedBlocks.sort() ).toEqual( [ 'Button', 'Gallery', 'List', @@ -75,7 +76,7 @@ describe( 'Allowed Blocks Setting on InnerBlocks', () => { await page.$x( `//button//span[contains(text(), 'List')]` ) )[ 0 ]; await insertButton.click(); - // Select the list wrapper so the image is inserable. + // Select the list wrapper so the image is insertable. await page.keyboard.press( 'ArrowUp' ); await insertBlock( 'Image' ); await closeGlobalBlockInserter(); From 01ad80aa1b4e51cedba422c032efe106a421b580 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 15 May 2023 11:05:17 +0100 Subject: [PATCH 33/35] Improve e2e test comment --- .../plugins/inner-blocks-prioritized-inserter-blocks/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js index 7e1540bcb4760d..d5ded59237a182 100644 --- a/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js +++ b/packages/e2e-tests/plugins/inner-blocks-prioritized-inserter-blocks/index.js @@ -8,7 +8,8 @@ style: { outline: '1px solid gray', padding: 5 }, }; - // Make it easier to select the block. + // without a placeholder within the inner blocks it can be difficult to select the block using e2e tests + // especially using Puppeteer, so we use an image block which has a placeholder. const template = [ [ 'core/image' ], ]; From 784bffb17239b046a06c9a41fdd8d065885e0880 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 15 May 2023 14:35:21 +0100 Subject: [PATCH 34/35] Update packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js --- .../src/components/inner-blocks/use-nested-settings-update.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js index c1b586c6e2115a..49d2da85688c3f 100644 --- a/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js +++ b/packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js @@ -25,7 +25,7 @@ const pendingSettingsUpdates = new WeakMap(); * @param {string} clientId The client ID of the block to update. * @param {string[]} allowedBlocks An array of block names which are permitted * in inner blocks. - * @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritized in the inserter. + * @param {string[]} prioritizedInserterBlocks Block names and/or block variations to be prioritized in the inserter, in the format {blockName}/{variationName}. * @param {?WPDirectInsertBlock} __experimentalDefaultBlock The default block to insert: [ blockName, { blockAttributes } ]. * @param {?Function|boolean} __experimentalDirectInsert If a default block should be inserted directly by the * appender. From 259a23dc42a7c9967901a2a3deee12461c5cff51 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 15 May 2023 14:38:40 +0100 Subject: [PATCH 35/35] Update packages/block-editor/src/components/inner-blocks/README.md --- packages/block-editor/src/components/inner-blocks/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md index 2f836a6e5c4f42..5ecd9c90898210 100644 --- a/packages/block-editor/src/components/inner-blocks/README.md +++ b/packages/block-editor/src/components/inner-blocks/README.md @@ -184,4 +184,4 @@ For example, a button block, deeply nested in several levels of block `X` that u ### `prioritizedInserterBlocks` - **Type:** `Array` -- **Default:** - `undefined`. Determines which inner blocks should be returned first from the block inserter. For example, when inserting a block within the Navigation Block, `core/navigation-link` and `core/navigation-link/page` are the most commonly used inner blocks. We can use `prioritizedInserterBlocks` to pass these `navigation-link` blocks as an array so they can be returned first by default from the Navigation Block inserter. +- **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.