diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js index 28a2bf37637d12..c9eddd5a5b4756 100644 --- a/packages/block-editor/src/components/block-toolbar/index.js +++ b/packages/block-editor/src/components/block-toolbar/index.js @@ -60,7 +60,6 @@ export function PrivateBlockToolbar( { const { blockClientId, blockClientIds, - isContentOnlyEditingMode, isDefaultEditingMode, blockType, toolbarKey, @@ -116,7 +115,6 @@ export function PrivateBlockToolbar( { return { blockClientId: selectedBlockClientId, blockClientIds: selectedBlockClientIds, - isContentOnlyEditingMode: editingMode === 'contentOnly', isDefaultEditingMode: _isDefaultEditingMode, blockType: selectedBlockClientId && getBlockType( _blockName ), shouldShowVisualToolbar: isValid && isVisual, @@ -185,14 +183,11 @@ export function PrivateBlockToolbar( { key={ toolbarKey } >
- { showParentSelector && - ! isMultiToolbar && - isLargeViewport && - isDefaultEditingMode && } + { showParentSelector && ! isMultiToolbar && isLargeViewport && ( + + ) } { ( shouldShowVisualToolbar || isMultiToolbar ) && - ( isDefaultEditingMode || - ( isContentOnlyEditingMode && ! hasParentPattern ) || - isSynced ) && ( + ! hasParentPattern && (
- { isDefaultEditingMode && ( - <> - { ! isMultiToolbar && ( - - ) } - - + { ! isMultiToolbar && ( + ) } +
) } diff --git a/packages/block-editor/src/components/block-toolbar/style.scss b/packages/block-editor/src/components/block-toolbar/style.scss index aec568bccb1fb0..ae03eeed1a817c 100644 --- a/packages/block-editor/src/components/block-toolbar/style.scss +++ b/packages/block-editor/src/components/block-toolbar/style.scss @@ -59,9 +59,18 @@ > :last-child, > :last-child .components-toolbar-group, - > :last-child .components-toolbar { + > :last-child .components-toolbar, + // If the last toolbar group is empty, + // we need to remove the double border from the penultimate one. + &:has(> :last-child:empty) > :nth-last-child(2), + &:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar-group, + &:has(> :last-child:empty) > :nth-last-child(2) .components-toolbar { border-right: none; } + + .components-toolbar-group:empty { + display: none; + } } .block-editor-block-contextual-toolbar { diff --git a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js index c4e228f8a3c07b..e6bf1ace3ffb7b 100644 --- a/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js +++ b/packages/block-editor/src/components/block-toolbar/use-has-block-toolbar.js @@ -15,40 +15,31 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls * @return {boolean} Whether the block toolbar component will be rendered. */ export function useHasBlockToolbar() { - const { isToolbarEnabled, isDefaultEditingMode } = useSelect( - ( select ) => { - const { - getBlockEditingMode, - getBlockName, - getBlockSelectionStart, - } = select( blockEditorStore ); + const { isToolbarEnabled, isBlockDisabled } = useSelect( ( select ) => { + const { getBlockEditingMode, getBlockName, getBlockSelectionStart } = + select( blockEditorStore ); - // we only care about the 1st selected block - // for the toolbar, so we use getBlockSelectionStart - // instead of getSelectedBlockClientIds - const selectedBlockClientId = getBlockSelectionStart(); + // we only care about the 1st selected block + // for the toolbar, so we use getBlockSelectionStart + // instead of getSelectedBlockClientIds + const selectedBlockClientId = getBlockSelectionStart(); - const blockType = - selectedBlockClientId && - getBlockType( getBlockName( selectedBlockClientId ) ); + const blockType = + selectedBlockClientId && + getBlockType( getBlockName( selectedBlockClientId ) ); - return { - isToolbarEnabled: - blockType && - hasBlockSupport( blockType, '__experimentalToolbar', true ), - isDefaultEditingMode: - getBlockEditingMode( selectedBlockClientId ) === 'default', - }; - }, - [] - ); + return { + isToolbarEnabled: + blockType && + hasBlockSupport( blockType, '__experimentalToolbar', true ), + isBlockDisabled: + getBlockEditingMode( selectedBlockClientId ) === 'disabled', + }; + }, [] ); const hasAnyBlockControls = useHasAnyBlockControls(); - if ( - ! isToolbarEnabled || - ( ! isDefaultEditingMode && ! hasAnyBlockControls ) - ) { + if ( ! isToolbarEnabled || ( isBlockDisabled && ! hasAnyBlockControls ) ) { return false; }