diff --git a/packages/block-editor/src/components/block-controls/fill.js b/packages/block-editor/src/components/block-controls/fill.js index 391ea16d248a9..10b9472830686 100644 --- a/packages/block-editor/src/components/block-controls/fill.js +++ b/packages/block-editor/src/components/block-controls/fill.js @@ -15,8 +15,7 @@ import { /** * Internal dependencies */ -import useDisplayBlockControls from '../use-display-block-controls'; -import groups from './groups'; +import useBlockControlsFill from './hook'; export default function BlockControlsFill( { group = 'default', @@ -24,10 +23,10 @@ export default function BlockControlsFill( { children, __experimentalExposeToChildren = false, } ) { - if ( ! useDisplayBlockControls( { __experimentalExposeToChildren } ) ) { + const Fill = useBlockControlsFill( group, __experimentalExposeToChildren ); + if ( ! Fill ) { return null; } - const Fill = groups[ group ].Fill; return ( diff --git a/packages/block-editor/src/components/block-controls/groups.js b/packages/block-editor/src/components/block-controls/groups.js index 42a94a4ab7a81..9b9dfec8d8d45 100644 --- a/packages/block-editor/src/components/block-controls/groups.js +++ b/packages/block-editor/src/components/block-controls/groups.js @@ -7,12 +7,14 @@ const BlockControlsDefault = createSlotFill( 'BlockControls' ); const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' ); const BlockControlsInline = createSlotFill( 'BlockFormatControls' ); const BlockControlsOther = createSlotFill( 'BlockControlsOther' ); +const BlockControlsParent = createSlotFill( 'BlockControlsParent' ); const groups = { default: BlockControlsDefault, block: BlockControlsBlock, inline: BlockControlsInline, other: BlockControlsOther, + parent: BlockControlsParent, }; export default groups; diff --git a/packages/block-editor/src/components/block-controls/hook.js b/packages/block-editor/src/components/block-controls/hook.js new file mode 100644 index 0000000000000..c71b711df1671 --- /dev/null +++ b/packages/block-editor/src/components/block-controls/hook.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import groups from './groups'; +import { store as blockEditorStore } from '../../store'; +import { useBlockEditContext } from '../block-edit/context'; +import useDisplayBlockControls from '../use-display-block-controls'; + +export default function useBlockControlsFill( group, exposeToChildren ) { + const isDisplayed = useDisplayBlockControls(); + const { clientId } = useBlockEditContext(); + const isParentDisplayed = useSelect( + ( select ) => { + return ( + exposeToChildren && + select( blockEditorStore ).hasSelectedInnerBlock( clientId ) + ); + }, + [ exposeToChildren, clientId ] + ); + + if ( isDisplayed ) { + return groups[ group ]?.Fill; + } + if ( isParentDisplayed ) { + return groups.parent.Fill; + } + return null; +} diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 599c936eeeb73..7a18e4430fbb6 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -108,7 +108,15 @@ export default function BlockToolbar( { hideDragHandle } ) { return (
{ ! isMultiToolbar && ! displayHeaderToolbar && ( - + <> + + { shouldShowVisualToolbar && ( + + ) } + ) }
{ ( shouldShowVisualToolbar || isMultiToolbar ) && ( diff --git a/packages/block-editor/src/components/use-display-block-controls/index.js b/packages/block-editor/src/components/use-display-block-controls/index.js index e1614f60ce121..605556f295b96 100644 --- a/packages/block-editor/src/components/use-display-block-controls/index.js +++ b/packages/block-editor/src/components/use-display-block-controls/index.js @@ -9,11 +9,9 @@ import { useSelect } from '@wordpress/data'; import { useBlockEditContext } from '../block-edit/context'; import { store as blockEditorStore } from '../../store'; -export default function useDisplayBlockControls( { - __experimentalExposeToChildren = false, -} = {} ) { +export default function useDisplayBlockControls() { const { isSelected, clientId, name } = useBlockEditContext(); - const isActive = useSelect( + return useSelect( ( select ) => { if ( isSelected ) { return true; @@ -23,7 +21,6 @@ export default function useDisplayBlockControls( { getBlockName, isFirstMultiSelectedBlock, getMultiSelectedBlockClientIds, - hasSelectedInnerBlock, } = select( blockEditorStore ); if ( isFirstMultiSelectedBlock( clientId ) ) { @@ -31,14 +28,9 @@ export default function useDisplayBlockControls( { ( id ) => getBlockName( id ) === name ); } - if ( __experimentalExposeToChildren ) { - return hasSelectedInnerBlock( clientId ); - } return false; }, [ clientId, isSelected, name ] ); - - return isActive; }