From aab85e5eebafcd8cfafd9db75c3fb27f2315155c Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 10:06:24 +0300 Subject: [PATCH 01/10] Inserter: show all block --- .../components/inserter/block-types-tab.js | 214 +++++++++++------- .../inserter/hooks/use-block-types-state.js | 16 +- .../inserter/hooks/use-insertion-point.js | 41 +++- .../src/components/inserter/menu.js | 11 +- packages/block-editor/src/store/selectors.js | 36 ++- 5 files changed, 217 insertions(+), 101 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 57f66b6e4bb6ac..75f07a841a13fe 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -3,7 +3,9 @@ */ import { __, _x } from '@wordpress/i18n'; import { useMemo, useEffect, forwardRef } from '@wordpress/element'; -import { pipe, useAsyncList } from '@wordpress/compose'; +import { useAsyncList } from '@wordpress/compose'; +import { getBlockType } from '@wordpress/blocks'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -14,6 +16,7 @@ import useBlockTypesState from './hooks/use-block-types-state'; import InserterListbox from '../inserter-listbox'; import { orderBy } from '../../utils/sorting'; import InserterNoResults from './no-results'; +import { store as blockEditorStore } from '../../store'; const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ]; @@ -27,15 +30,14 @@ const MAX_SUGGESTED_ITEMS = 6; */ const EMPTY_ARRAY = []; -export function BlockTypesTab( - { rootClientId, onInsert, onHover, showMostUsedBlocks }, - ref -) { - const [ items, categories, collections, onSelectItem ] = useBlockTypesState( - rootClientId, - onInsert - ); - +export function BlockTypesTabPanel( { + items, + collections, + categories, + onSelectItem, + onHover, + showMostUsedBlocks, +} ) { const suggestedItems = useMemo( () => { return orderBy( items, 'frecency', 'desc' ).slice( 0, @@ -47,24 +49,6 @@ export function BlockTypesTab( return items.filter( ( item ) => ! item.category ); }, [ items ] ); - const itemsPerCategory = useMemo( () => { - return pipe( - ( itemList ) => - itemList.filter( - ( item ) => item.category && item.category !== 'reusable' - ), - ( itemList ) => - itemList.reduce( ( acc, item ) => { - const { category } = item; - if ( ! acc[ category ] ) { - acc[ category ] = []; - } - acc[ category ].push( item ); - return acc; - }, {} ) - )( items ); - }, [ items ] ); - const itemsPerCollection = useMemo( () => { // Create a new Object to avoid mutating collection. const result = { ...collections }; @@ -101,82 +85,146 @@ export function BlockTypesTab( didRenderAllCategories ? collectionEntries : EMPTY_ARRAY ); - if ( ! items.length ) { - return ; - } - return ( - -
- { showMostUsedBlocks && !! suggestedItems.length && ( - + <> + { showMostUsedBlocks && !! suggestedItems.length && ( + + + + ) } + + { currentlyRenderedCategories.map( ( category ) => { + const categoryItems = items.filter( + ( item ) => item.category === category.slug + ); + if ( ! categoryItems || ! categoryItems.length ) { + return null; + } + return ( + - ) } - - { currentlyRenderedCategories.map( ( category ) => { - const categoryItems = itemsPerCategory[ category.slug ]; - if ( ! categoryItems || ! categoryItems.length ) { + ); + } ) } + + { didRenderAllCategories && uncategorizedItems.length > 0 && ( + + + + ) } + + { currentlyRenderedCollections.map( + ( [ namespace, collection ] ) => { + const collectionItems = itemsPerCollection[ namespace ]; + if ( ! collectionItems || ! collectionItems.length ) { return null; } + return ( ); - } ) } + } + ) } + + ); +} - { didRenderAllCategories && uncategorizedItems.length > 0 && ( - - { + return select( blockEditorStore ).getBlockName( rootClientId ); + }, + [ rootClientId ] + ); + + if ( ! items.length ) { + return ; + } + + const itemsForCurrentRoot = []; + const itemsRemaining = []; + + for ( const item of items ) { + if ( rootClientId && item.rootClientId === rootClientId ) { + itemsForCurrentRoot.push( item ); + } else { + itemsRemaining.push( item ); + } + } + + return ( + +
+ { !! itemsForCurrentRoot.length && ( + <> +
+

+ { __( 'Can be inserted into ' ) + + getBlockType( rootBlockName )?.title } +

+
+ - - ) } - - { currentlyRenderedCollections.map( - ( [ namespace, collection ] ) => { - const collectionItems = itemsPerCollection[ namespace ]; - if ( ! collectionItems || ! collectionItems.length ) { - return null; - } - - return ( - - - - ); - } +
+ ) } +
); diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 566d0476fbd0f5..1eaa1c1d0e45e5 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -37,7 +37,14 @@ const useBlockTypesState = ( rootClientId, onInsert ) => { const onSelectItem = useCallback( ( - { name, initialAttributes, innerBlocks, syncStatus, content }, + { + name, + initialAttributes, + innerBlocks, + syncStatus, + content, + rootClientId: _rootClientId, + }, shouldFocusBlock ) => { const insertedBlock = @@ -51,7 +58,12 @@ const useBlockTypesState = ( rootClientId, onInsert ) => { createBlocksFromInnerBlocksTemplate( innerBlocks ) ); - onInsert( insertedBlock, undefined, shouldFocusBlock ); + onInsert( + insertedBlock, + undefined, + shouldFocusBlock, + _rootClientId + ); }, [ onInsert ] ); diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 0dae090578ab4f..05661e508d8bd1 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useDispatch, useSelect } from '@wordpress/data'; +import { useDispatch, useRegistry, useSelect } from '@wordpress/data'; import { isUnmodifiedDefaultBlock } from '@wordpress/blocks'; import { _n, sprintf } from '@wordpress/i18n'; import { speak } from '@wordpress/a11y'; @@ -42,6 +42,7 @@ function useInsertionPoint( { shouldFocusBlock = true, selectBlockOnInsert = true, } ) { + const registry = useRegistry(); const { getSelectedBlock } = useSelect( blockEditorStore ); const { destinationRootClientId, destinationIndex } = useSelect( ( select ) => { @@ -91,7 +92,7 @@ function useInsertionPoint( { } = unlock( useDispatch( blockEditorStore ) ); const onInsertBlocks = useCallback( - ( blocks, meta, shouldForceFocusBlock = false ) => { + ( blocks, meta, shouldForceFocusBlock = false, _rootClientId ) => { // When we are trying to move focus or select a new block on insert, we also // need to clear the last focus to avoid the focus being set to the wrong block // when tabbing back into the canvas if the block was added from outside the @@ -119,10 +120,23 @@ function useInsertionPoint( { meta ); } else { + const parents = registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ); + const index = + _rootClientId === destinationRootClientId + ? destinationIndex + : registry + .select( blockEditorStore ) + .getBlockIndex( + parents[ + parents.indexOf( _rootClientId ) + 1 + ] + ) + 1; insertBlocks( blocks, - destinationIndex, - destinationRootClientId, + index, + _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta @@ -154,9 +168,22 @@ function useInsertionPoint( { ); const onToggleInsertionPoint = useCallback( - ( show ) => { - if ( show ) { - showInsertionPoint( destinationRootClientId, destinationIndex ); + ( item ) => { + if ( item?.rootClientId ) { + const parents = registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ); + const index = + item.rootClientId === destinationRootClientId + ? destinationIndex + : registry + .select( blockEditorStore ) + .getBlockIndex( + parents[ + parents.indexOf( item.rootClientId ) + 1 + ] + ) + 1; + showInsertionPoint( item.rootClientId, index ); } else { hideInsertionPoint(); } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 3abaee330ed22b..6a4ac798b74900 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -81,8 +81,13 @@ function InserterMenu( const blockTypesTabRef = useRef(); const onInsert = useCallback( - ( blocks, meta, shouldForceFocusBlock ) => { - onInsertBlocks( blocks, meta, shouldForceFocusBlock ); + ( blocks, meta, shouldForceFocusBlock, _rootClientId ) => { + onInsertBlocks( + blocks, + meta, + shouldForceFocusBlock, + _rootClientId + ); onSelect(); // Check for focus loss due to filtering blocks by selected block type @@ -111,7 +116,7 @@ function InserterMenu( const onHover = useCallback( ( item ) => { - onToggleInsertionPoint( !! item ); + onToggleInsertionPoint( item ); setHoveredItem( item ); }, [ onToggleInsertionPoint, setHoveredItem ] diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 1c685eb4230ba4..960316956b3761 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2039,13 +2039,37 @@ export const getInserterItems = createRegistrySelector( ( select ) => const blockTypeInserterItems = getBlockTypes() .filter( ( blockType ) => - canIncludeBlockTypeInInserter( - state, - blockType, - rootClientId - ) + hasBlockSupport( blockType, 'inserter', true ) ) - .map( buildBlockTypeInserterItem ); + .map( buildBlockTypeInserterItem ) + .reduce( ( accumulator, item ) => { + item.rootClientId = rootClientId; + + while ( + ! canInsertBlockTypeUnmemoized( + state, + item.name, + item.rootClientId + ) + ) { + if ( ! item.rootClientId ) { + delete item.rootClientId; + break; + } else { + const parentClientId = getBlockRootClientId( + state, + item.rootClientId + ); + item.rootClientId = parentClientId; + } + } + + if ( item.hasOwnProperty( 'rootClientId' ) ) { + accumulator.push( item ); + } + + return accumulator; + }, [] ); const items = blockTypeInserterItems.reduce( ( accumulator, item ) => { From aaa65324fbfd37e1c64b93c90b330edc3ca6f7ef Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 11:38:25 +0300 Subject: [PATCH 02/10] Fix parents --- .../inserter/hooks/use-insertion-point.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 05661e508d8bd1..3e6e148b7f9f16 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -120,9 +120,13 @@ function useInsertionPoint( { meta ); } else { - const parents = registry - .select( blockEditorStore ) - .getBlockParents( destinationRootClientId ); + const parents = [ + '', + ...registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ), + destinationRootClientId, + ]; const index = _rootClientId === destinationRootClientId ? destinationIndex @@ -169,10 +173,14 @@ function useInsertionPoint( { const onToggleInsertionPoint = useCallback( ( item ) => { - if ( item?.rootClientId ) { - const parents = registry - .select( blockEditorStore ) - .getBlockParents( destinationRootClientId ); + if ( item?.hasOwnProperty( 'rootClientId' ) ) { + const parents = [ + '', + ...registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ), + destinationRootClientId, + ]; const index = item.rootClientId === destinationRootClientId ? destinationIndex From ef99120fe613b81423b3bdf78e4710c78385cf36 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 12:27:20 +0300 Subject: [PATCH 03/10] Use section root as fallback --- .../inserter/hooks/use-insertion-point.js | 79 ++++++++++--------- packages/block-editor/src/store/selectors.js | 17 +++- 2 files changed, 59 insertions(+), 37 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 3e6e148b7f9f16..c94ce6e3d9b644 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -13,6 +13,34 @@ import { useCallback } from '@wordpress/element'; import { store as blockEditorStore } from '../../../store'; import { unlock } from '../../../lock-unlock'; +function getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId, + registry, +} ) { + if ( rootClientId === destinationRootClientId ) { + return destinationIndex; + } + const parents = [ + '', + ...registry + .select( blockEditorStore ) + .getBlockParents( destinationRootClientId ), + destinationRootClientId, + ]; + const parentIndex = parents.indexOf( rootClientId ); + if ( parentIndex !== -1 ) { + return ( + registry + .select( blockEditorStore ) + .getBlockIndex( parents[ parentIndex + 1 ] ) + 1 + ); + } + return registry.select( blockEditorStore ).getBlockOrder( rootClientId ) + .length; +} + /** * @typedef WPInserterConfig * @@ -120,26 +148,14 @@ function useInsertionPoint( { meta ); } else { - const parents = [ - '', - ...registry - .select( blockEditorStore ) - .getBlockParents( destinationRootClientId ), - destinationRootClientId, - ]; - const index = - _rootClientId === destinationRootClientId - ? destinationIndex - : registry - .select( blockEditorStore ) - .getBlockIndex( - parents[ - parents.indexOf( _rootClientId ) + 1 - ] - ) + 1; insertBlocks( blocks, - index, + getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: _rootClientId, + registry, + } ), _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, @@ -174,24 +190,15 @@ function useInsertionPoint( { const onToggleInsertionPoint = useCallback( ( item ) => { if ( item?.hasOwnProperty( 'rootClientId' ) ) { - const parents = [ - '', - ...registry - .select( blockEditorStore ) - .getBlockParents( destinationRootClientId ), - destinationRootClientId, - ]; - const index = - item.rootClientId === destinationRootClientId - ? destinationIndex - : registry - .select( blockEditorStore ) - .getBlockIndex( - parents[ - parents.indexOf( item.rootClientId ) + 1 - ] - ) + 1; - showInsertionPoint( item.rootClientId, index ); + showInsertionPoint( + item.rootClientId, + getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: item.rootClientId, + registry, + } ) + ); } else { hideInsertionPoint(); } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 960316956b3761..8ad1f0e455fea3 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2053,7 +2053,21 @@ export const getInserterItems = createRegistrySelector( ( select ) => ) ) { if ( ! item.rootClientId ) { - delete item.rootClientId; + const { sectionRootClientId } = unlock( + getSettings( state ) + ); + if ( + sectionRootClientId && + canInsertBlockTypeUnmemoized( + state, + item.name, + sectionRootClientId + ) + ) { + item.rootClientId = sectionRootClientId; + } else { + delete item.rootClientId; + } break; } else { const parentClientId = getBlockRootClientId( @@ -2064,6 +2078,7 @@ export const getInserterItems = createRegistrySelector( ( select ) => } } + // We could also add non insertable items and gray them out. if ( item.hasOwnProperty( 'rootClientId' ) ) { accumulator.push( item ); } From 3cf78bac986a7b30915dc0822d09613de14fcae5 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 14:09:00 +0300 Subject: [PATCH 04/10] Remove heading, remove reusable blocks --- .../components/inserter/block-types-tab.js | 23 ++++--------------- 1 file changed, 5 insertions(+), 18 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 75f07a841a13fe..4fdf891f0f27a9 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -4,8 +4,6 @@ import { __, _x } from '@wordpress/i18n'; import { useMemo, useEffect, forwardRef } from '@wordpress/element'; import { useAsyncList } from '@wordpress/compose'; -import { getBlockType } from '@wordpress/blocks'; -import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -16,7 +14,6 @@ import useBlockTypesState from './hooks/use-block-types-state'; import InserterListbox from '../inserter-listbox'; import { orderBy } from '../../utils/sorting'; import InserterNoResults from './no-results'; -import { store as blockEditorStore } from '../../store'; const getBlockNamespace = ( item ) => item.name.split( '/' )[ 0 ]; @@ -170,12 +167,6 @@ export function BlockTypesTab( rootClientId, onInsert ); - const rootBlockName = useSelect( - ( select ) => { - return select( blockEditorStore ).getBlockName( rootClientId ); - }, - [ rootClientId ] - ); if ( ! items.length ) { return ; @@ -185,6 +176,11 @@ export function BlockTypesTab( const itemsRemaining = []; for ( const item of items ) { + // Skip reusable blocks, they moved to the patterns tab. + if ( item.category === 'reusable' ) { + continue; + } + if ( rootClientId && item.rootClientId === rootClientId ) { itemsForCurrentRoot.push( item ); } else { @@ -197,15 +193,6 @@ export function BlockTypesTab(
{ !! itemsForCurrentRoot.length && ( <> -
-

- { __( 'Can be inserted into ' ) + - getBlockType( rootBlockName )?.title } -

-
Date: Fri, 31 May 2024 14:43:18 +0300 Subject: [PATCH 05/10] Add private selector option --- .../inserter/hooks/use-block-types-state.js | 5 +- packages/block-editor/src/store/selectors.js | 96 +++++++++++-------- packages/block-editor/src/store/utils.js | 2 + 3 files changed, 62 insertions(+), 41 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 1eaa1c1d0e45e5..3b906e822a7140 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -14,6 +14,7 @@ import { useCallback } from '@wordpress/element'; * Internal dependencies */ import { store as blockEditorStore } from '../../../store'; +import { withRootClientIdOptionKey } from '../../../store/utils'; /** * Retrieves the block types inserter state. @@ -25,7 +26,9 @@ import { store as blockEditorStore } from '../../../store'; const useBlockTypesState = ( rootClientId, onInsert ) => { const [ items ] = useSelect( ( select ) => [ - select( blockEditorStore ).getInserterItems( rootClientId ), + select( blockEditorStore ).getInserterItems( rootClientId, { + [ withRootClientIdOptionKey ]: true, + } ), ], [ rootClientId ] ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 8ad1f0e455fea3..7240cf74e8cf9f 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -22,6 +22,7 @@ import { createSelector, createRegistrySelector } from '@wordpress/data'; * Internal dependencies */ import { + withRootClientIdOptionKey, checkAllowListRecursive, checkAllowList, getAllPatternsDependants, @@ -1995,7 +1996,7 @@ const buildBlockTypeItem = */ export const getInserterItems = createRegistrySelector( ( select ) => createSelector( - ( state, rootClientId = null ) => { + ( state, rootClientId = null, options = {} ) => { const buildReusableBlockInserterItem = ( reusableBlock ) => { const icon = ! reusableBlock.wp_pattern_sync_status ? { @@ -2037,54 +2038,69 @@ export const getInserterItems = createRegistrySelector( ( select ) => buildScope: 'inserter', } ); - const blockTypeInserterItems = getBlockTypes() + let blockTypeInserterItems = getBlockTypes() .filter( ( blockType ) => hasBlockSupport( blockType, 'inserter', true ) ) - .map( buildBlockTypeInserterItem ) - .reduce( ( accumulator, item ) => { - item.rootClientId = rootClientId; + .map( buildBlockTypeInserterItem ); - while ( - ! canInsertBlockTypeUnmemoized( - state, - item.name, - item.rootClientId - ) - ) { - if ( ! item.rootClientId ) { - const { sectionRootClientId } = unlock( - getSettings( state ) - ); - if ( - sectionRootClientId && - canInsertBlockTypeUnmemoized( - state, - item.name, - sectionRootClientId - ) - ) { - item.rootClientId = sectionRootClientId; - } else { - delete item.rootClientId; - } - break; - } else { - const parentClientId = getBlockRootClientId( + if ( options[ withRootClientIdOptionKey ] ) { + blockTypeInserterItems = blockTypeInserterItems.reduce( + ( accumulator, item ) => { + item.rootClientId = rootClientId ?? ''; + + while ( + ! canInsertBlockTypeUnmemoized( state, + item.name, item.rootClientId - ); - item.rootClientId = parentClientId; + ) + ) { + if ( ! item.rootClientId ) { + const { sectionRootClientId } = unlock( + getSettings( state ) + ); + if ( + sectionRootClientId && + canInsertBlockTypeUnmemoized( + state, + item.name, + sectionRootClientId + ) + ) { + item.rootClientId = sectionRootClientId; + } else { + delete item.rootClientId; + } + break; + } else { + const parentClientId = getBlockRootClientId( + state, + item.rootClientId + ); + item.rootClientId = parentClientId; + } } - } - // We could also add non insertable items and gray them out. - if ( item.hasOwnProperty( 'rootClientId' ) ) { - accumulator.push( item ); - } + // We could also add non insertable items and gray them out. + if ( item.hasOwnProperty( 'rootClientId' ) ) { + accumulator.push( item ); + } - return accumulator; - }, [] ); + return accumulator; + }, + [] + ); + } else { + blockTypeInserterItems = blockTypeInserterItems.filter( + ( blockType ) => + canIncludeBlockTypeInInserter( + state, + blockType, + rootClientId + ) + ); + } const items = blockTypeInserterItems.reduce( ( accumulator, item ) => { diff --git a/packages/block-editor/src/store/utils.js b/packages/block-editor/src/store/utils.js index f236c4a7e56eb8..c94453e99c60a4 100644 --- a/packages/block-editor/src/store/utils.js +++ b/packages/block-editor/src/store/utils.js @@ -5,6 +5,8 @@ import { selectBlockPatternsKey } from './private-keys'; import { unlock } from '../lock-unlock'; import { STORE_NAME } from './constants'; +export const withRootClientIdOptionKey = Symbol( 'withRootClientId' ); + export const checkAllowList = ( list, item, defaultResult = null ) => { if ( typeof list === 'boolean' ) { return list; From afa0d6e03a76e59bf31bb57c855ae207365bf665 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 15:18:35 +0300 Subject: [PATCH 06/10] Fix quick inserter --- .../src/components/inserter/hooks/use-block-types-state.js | 7 ++++--- .../block-editor/src/components/inserter/quick-inserter.js | 4 +++- .../block-editor/src/components/inserter/search-results.js | 3 ++- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js index 3b906e822a7140..6b9e694c1cdf8f 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js +++ b/packages/block-editor/src/components/inserter/hooks/use-block-types-state.js @@ -21,16 +21,17 @@ import { withRootClientIdOptionKey } from '../../../store/utils'; * * @param {string=} rootClientId Insertion's root client ID. * @param {Function} onInsert function called when inserter a list of blocks. + * @param {boolean} isQuick * @return {Array} Returns the block types state. (block types, categories, collections, onSelect handler) */ -const useBlockTypesState = ( rootClientId, onInsert ) => { +const useBlockTypesState = ( rootClientId, onInsert, isQuick ) => { const [ items ] = useSelect( ( select ) => [ select( blockEditorStore ).getInserterItems( rootClientId, { - [ withRootClientIdOptionKey ]: true, + [ withRootClientIdOptionKey ]: ! isQuick, } ), ], - [ rootClientId ] + [ rootClientId, isQuick ] ); const [ categories, collections ] = useSelect( ( select ) => { diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index 3405ac98b881cc..022957df952cea 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -44,7 +44,8 @@ export default function QuickInserter( { } ); const [ blockTypes ] = useBlockTypesState( destinationRootClientId, - onInsertBlocks + onInsertBlocks, + true ); const [ patterns ] = usePatternsState( @@ -126,6 +127,7 @@ export default function QuickInserter( { isDraggable={ false } prioritizePatterns={ prioritizePatterns } selectBlockOnInsert={ selectBlockOnInsert } + isQuick />
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index edd99609ea916c..9c001823745e6c 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -50,6 +50,7 @@ function InserterSearchResults( { shouldFocusBlock = true, prioritizePatterns, selectBlockOnInsert, + isQuick, } ) { const debouncedSpeak = useDebounce( speak, 500 ); @@ -80,7 +81,7 @@ function InserterSearchResults( { blockTypeCategories, blockTypeCollections, onSelectBlockType, - ] = useBlockTypesState( destinationRootClientId, onInsertBlocks ); + ] = useBlockTypesState( destinationRootClientId, onInsertBlocks, isQuick ); const [ patterns, , onClickPattern ] = usePatternsState( onInsertBlocks, destinationRootClientId From 9c52bd6c65fb869d0134f0a7a94e4d062caf97ca Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 16:00:09 +0300 Subject: [PATCH 07/10] Fix appender inserter --- .../inserter/hooks/use-insertion-point.js | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index c94ce6e3d9b644..691771c294d3a6 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -150,13 +150,15 @@ function useInsertionPoint( { } else { insertBlocks( blocks, - getIndex( { - destinationRootClientId, - destinationIndex, - rootClientId: _rootClientId, - registry, - } ), - _rootClientId, + isAppender + ? getIndex( { + destinationRootClientId, + destinationIndex, + rootClientId: _rootClientId, + registry, + } ) + : destinationIndex, + isAppender ? rootClientId : _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta From 08b13973646934523770bb57e865d9ae31e83b29 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 16:39:11 +0300 Subject: [PATCH 08/10] Fix most used, fix quick inserter --- .../components/inserter/block-types-tab.js | 24 +++++++++++-------- .../inserter/hooks/use-insertion-point.js | 12 ++++++---- 2 files changed, 21 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 4fdf891f0f27a9..8e89e79dc70237 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -84,16 +84,20 @@ export function BlockTypesTabPanel( { return ( <> - { showMostUsedBlocks && !! suggestedItems.length && ( - - - - ) } + { showMostUsedBlocks && + // Only show the most used blocks if the total amount of block + // is larger than 1 row, otherwise it is not so useful. + items.length > 3 && + !! suggestedItems.length && ( + + + + ) } { currentlyRenderedCategories.map( ( category ) => { const categoryItems = items.filter( diff --git a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js index 691771c294d3a6..24074ec5004565 100644 --- a/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js +++ b/packages/block-editor/src/components/inserter/hooks/use-insertion-point.js @@ -150,15 +150,17 @@ function useInsertionPoint( { } else { insertBlocks( blocks, - isAppender - ? getIndex( { + isAppender || _rootClientId === undefined + ? destinationIndex + : getIndex( { destinationRootClientId, destinationIndex, rootClientId: _rootClientId, registry, - } ) - : destinationIndex, - isAppender ? rootClientId : _rootClientId, + } ), + isAppender || _rootClientId === undefined + ? destinationRootClientId + : _rootClientId, selectBlockOnInsert, shouldFocusBlock || shouldForceFocusBlock ? 0 : null, meta From 80d6c1b0304fc4c317c3664fbec48e277ea1f8ff Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 16:44:26 +0300 Subject: [PATCH 09/10] Fix widgets page --- packages/block-editor/src/store/selectors.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 7240cf74e8cf9f..bf7b5125a770e6 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2057,9 +2057,12 @@ export const getInserterItems = createRegistrySelector( ( select ) => ) ) { if ( ! item.rootClientId ) { - const { sectionRootClientId } = unlock( - getSettings( state ) - ); + let sectionRootClientId; + try { + sectionRootClientId = unlock( + getSettings( state ) + ).sectionRootClientId; + } catch ( e ) {} if ( sectionRootClientId && canInsertBlockTypeUnmemoized( From 118f146f138330e97646bdaeb2d6639049097de4 Mon Sep 17 00:00:00 2001 From: Ella Date: Fri, 31 May 2024 17:20:06 +0300 Subject: [PATCH 10/10] Fix e2e tests --- .../components/inserter/block-types-tab.js | 7 +++++-- test/e2e/specs/editor/blocks/columns.spec.js | 2 +- .../specs/editor/plugins/child-blocks.spec.js | 20 +++++++++++++------ .../inner-blocks-allowed-blocks.spec.js | 20 +++++++++++++------ 4 files changed, 34 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-types-tab.js b/packages/block-editor/src/components/inserter/block-types-tab.js index 8e89e79dc70237..42c4a6a35e14bf 100644 --- a/packages/block-editor/src/components/inserter/block-types-tab.js +++ b/packages/block-editor/src/components/inserter/block-types-tab.js @@ -34,6 +34,7 @@ export function BlockTypesTabPanel( { onSelectItem, onHover, showMostUsedBlocks, + className, } ) { const suggestedItems = useMemo( () => { return orderBy( items, 'frecency', 'desc' ).slice( @@ -83,7 +84,7 @@ export function BlockTypesTabPanel( { ); return ( - <> +
{ showMostUsedBlocks && // Only show the most used blocks if the total amount of block // is larger than 1 row, otherwise it is not so useful. @@ -159,7 +160,7 @@ export function BlockTypesTabPanel( { ); } ) } - +
); } @@ -204,6 +205,7 @@ export function BlockTypesTab( onSelectItem={ onSelectItem } onHover={ onHover } showMostUsedBlocks={ showMostUsedBlocks } + className="block-editor-inserter__insertable-blocks-at-selection" />
@@ -215,6 +217,7 @@ export function BlockTypesTab( onSelectItem={ onSelectItem } onHover={ onHover } showMostUsedBlocks={ showMostUsedBlocks } + className="block-editor-inserter__all-blocks" />
diff --git a/test/e2e/specs/editor/blocks/columns.spec.js b/test/e2e/specs/editor/blocks/columns.spec.js index 8ddf7e9377ff20..e322a52eeba10b 100644 --- a/test/e2e/specs/editor/blocks/columns.spec.js +++ b/test/e2e/specs/editor/blocks/columns.spec.js @@ -40,7 +40,7 @@ test.describe( 'Columns', () => { // Verify Column const inserterOptions = page.locator( - 'role=region[name="Block Library"i] >> role=option' + 'role=region[name="Block Library"i] >> .block-editor-inserter__insertable-blocks-at-selection >> role=option' ); await expect( inserterOptions ).toHaveCount( 1 ); await expect( inserterOptions ).toHaveText( 'Column' ); diff --git a/test/e2e/specs/editor/plugins/child-blocks.spec.js b/test/e2e/specs/editor/plugins/child-blocks.spec.js index b3073b70a5409a..0cd043c6a46105 100644 --- a/test/e2e/specs/editor/plugins/child-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/child-blocks.spec.js @@ -48,9 +48,13 @@ test.describe( 'Child Blocks', () => { const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); - const blockLibrary = page.getByRole( 'region', { - name: 'Block Library', - } ); + const blockLibrary = page + .getByRole( 'region', { + name: 'Block Library', + } ) + .locator( + '.block-editor-inserter__insertable-blocks-at-selection' + ); await blockInserter.click(); await expect( blockLibrary ).toBeVisible(); @@ -82,9 +86,13 @@ test.describe( 'Child Blocks', () => { const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); - const blockLibrary = page.getByRole( 'region', { - name: 'Block Library', - } ); + const blockLibrary = page + .getByRole( 'region', { + name: 'Block Library', + } ) + .locator( + '.block-editor-inserter__insertable-blocks-at-selection' + ); await blockInserter.click(); await expect( blockLibrary ).toBeVisible(); diff --git a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js index eaf171adf9313c..d2dc521f0196bd 100644 --- a/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js +++ b/test/e2e/specs/editor/plugins/inner-blocks-allowed-blocks.spec.js @@ -46,9 +46,13 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => { const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); - const blockLibrary = page.getByRole( 'region', { - name: 'Block Library', - } ); + const blockLibrary = page + .getByRole( 'region', { + name: 'Block Library', + } ) + .locator( + '.block-editor-inserter__insertable-blocks-at-selection' + ); await blockInserter.click(); await expect( blockLibrary ).toBeVisible(); @@ -89,9 +93,13 @@ test.describe( 'Allowed Blocks Setting on InnerBlocks', () => { const blockInserter = page .getByRole( 'toolbar', { name: 'Document tools' } ) .getByRole( 'button', { name: 'Toggle block inserter' } ); - const blockLibrary = page.getByRole( 'region', { - name: 'Block Library', - } ); + const blockLibrary = page + .getByRole( 'region', { + name: 'Block Library', + } ) + .locator( + '.block-editor-inserter__insertable-blocks-at-selection' + ); await blockInserter.click(); await expect( blockLibrary ).toBeVisible();