diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js index 99d0fc56374e42..c739c98f86e75b 100644 --- a/packages/block-editor/src/components/block-list-appender/index.js +++ b/packages/block-editor/src/components/block-list-appender/index.js @@ -41,7 +41,7 @@ function DefaultAppender( { rootClientId } ) { } function useAppender( rootClientId, CustomAppender ) { - const { hideInserter, isParentSelected } = useSelect( + const isVisible = useSelect( ( select ) => { const { getTemplateLock, @@ -50,35 +50,42 @@ function useAppender( rootClientId, CustomAppender ) { getBlockEditingMode, } = unlock( select( blockEditorStore ) ); - const selectedBlockClientId = getSelectedBlockClientId(); + if ( CustomAppender === false ) { + return false; + } - return { - hideInserter: - !! getTemplateLock( rootClientId ) || - getBlockEditingMode( rootClientId ) === 'disabled' || - __unstableGetEditorMode() === 'zoom-out', - isParentSelected: + if ( ! CustomAppender ) { + const selectedBlockClientId = getSelectedBlockClientId(); + const isParentSelected = rootClientId === selectedBlockClientId || - ( ! rootClientId && ! selectedBlockClientId ), - }; + ( ! rootClientId && ! selectedBlockClientId ); + if ( ! isParentSelected ) { + return false; + } + } + + if ( + getTemplateLock( rootClientId ) || + getBlockEditingMode( rootClientId ) === 'disabled' || + __unstableGetEditorMode() === 'zoom-out' + ) { + return false; + } + + return true; }, - [ rootClientId ] + [ rootClientId, CustomAppender ] ); - if ( hideInserter || CustomAppender === false ) { + if ( ! isVisible ) { return null; } - if ( CustomAppender ) { - // Prefer custom render prop if provided. - return ; - } - - if ( ! isParentSelected ) { - return null; - } - - return ; + return CustomAppender ? ( + + ) : ( + + ); } function BlockListAppender( { diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js index 1eff2e8510dcc5..a1ae32d5602399 100644 --- a/packages/block-editor/src/store/private-selectors.js +++ b/packages/block-editor/src/store/private-selectors.js @@ -73,41 +73,31 @@ export function getLastInsertedBlocksClientIds( state ) { * @return {BlockEditingMode} The block editing mode. One of `'disabled'`, * `'contentOnly'`, or `'default'`. */ -export const getBlockEditingMode = createSelector( - ( state, clientId = '' ) => { - if ( state.blockEditingModes.has( clientId ) ) { - return state.blockEditingModes.get( clientId ); - } - if ( ! clientId ) { - return 'default'; - } - const rootClientId = getBlockRootClientId( state, clientId ); - const templateLock = getTemplateLock( state, rootClientId ); - if ( templateLock === 'contentOnly' ) { - const name = getBlockName( state, clientId ); - // TODO: Terrible hack! We're calling the global select() function - // here instead of using createRegistrySelector(). The problem with - // using createRegistrySelector() is that then the public - // block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't - // call this private block-editor selector due to a bug in - // @wordpress/data. See - // https://github.com/WordPress/gutenberg/pull/50985. - const isContent = - select( blocksStore ).__experimentalHasContentRoleAttribute( - name - ); - return isContent ? 'contentOnly' : 'disabled'; - } - const parentMode = getBlockEditingMode( state, rootClientId ); - return parentMode === 'contentOnly' ? 'default' : parentMode; - }, - ( state ) => [ - state.blockEditingModes, - state.blocks.parents, - state.settings.templateLock, - state.blockListSettings, - ] -); +export function getBlockEditingMode( state, clientId = '' ) { + if ( state.blockEditingModes.has( clientId ) ) { + return state.blockEditingModes.get( clientId ); + } + if ( ! clientId ) { + return 'default'; + } + const rootClientId = getBlockRootClientId( state, clientId ); + const templateLock = getTemplateLock( state, rootClientId ); + if ( templateLock === 'contentOnly' ) { + const name = getBlockName( state, clientId ); + // TODO: Terrible hack! We're calling the global select() function + // here instead of using createRegistrySelector(). The problem with + // using createRegistrySelector() is that then the public + // block-editor selectors (e.g. canInsertBlockTypeUnmemoized) can't + // call this private block-editor selector due to a bug in + // @wordpress/data. See + // https://github.com/WordPress/gutenberg/pull/50985. + const isContent = + select( blocksStore ).__experimentalHasContentRoleAttribute( name ); + return isContent ? 'contentOnly' : 'disabled'; + } + const parentMode = getBlockEditingMode( state, rootClientId ); + return parentMode === 'contentOnly' ? 'default' : parentMode; +} /** * Returns true if the block with the given client ID and all of its descendants