diff --git a/packages/block-editor/src/components/block-toolbar/index.js b/packages/block-editor/src/components/block-toolbar/index.js
index 0a6a9fca62970d..c9eddd5a5b4756 100644
--- a/packages/block-editor/src/components/block-toolbar/index.js
+++ b/packages/block-editor/src/components/block-toolbar/index.js
@@ -36,6 +36,7 @@ import __unstableBlockNameContext from './block-name-context';
import NavigableToolbar from '../navigable-toolbar';
import { useHasBlockToolbar } from './use-has-block-toolbar';
import Shuffle from './shuffle';
+import { unlock } from '../../lock-unlock';
/**
* Renders the block toolbar.
@@ -59,7 +60,6 @@ export function PrivateBlockToolbar( {
const {
blockClientId,
blockClientIds,
- isContentOnlyEditingMode,
isDefaultEditingMode,
blockType,
toolbarKey,
@@ -81,7 +81,7 @@ export function PrivateBlockToolbar( {
getBlockParentsByBlockName,
getTemplateLock,
isZoomOutMode,
- } = select( blockEditorStore );
+ } = unlock( select( blockEditorStore ) );
const selectedBlockClientIds = getSelectedBlockClientIds();
const selectedBlockClientId = selectedBlockClientIds[ 0 ];
const parents = getBlockParents( selectedBlockClientId );
@@ -115,7 +115,6 @@ export function PrivateBlockToolbar( {
return {
blockClientId: selectedBlockClientId,
blockClientIds: selectedBlockClientIds,
- isContentOnlyEditingMode: editingMode === 'contentOnly',
isDefaultEditingMode: _isDefaultEditingMode,
blockType: selectedBlockClientId && getBlockType( _blockName ),
shouldShowVisualToolbar: isValid && isVisual,
@@ -184,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;
}