Fix block toolbar

WordPress · Oct 17, 2024 · 5448b74 · 5448b74
1 parent 04d8cd7
commit 5448b74
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 51 deletions.
diff --git 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 }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
-				{ showParentSelector &&
-					! isMultiToolbar &&
-					isLargeViewport &&
-					isDefaultEditingMode && <BlockParentSelector /> }
+				{ showParentSelector && ! isMultiToolbar && isLargeViewport && (
+					<BlockParentSelector />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
-					( isDefaultEditingMode ||
-						( isContentOnlyEditingMode && ! hasParentPattern ) ||
-						isSynced ) && (
+					! hasParentPattern && (
 						<div
 							ref={ nodeRef }
 							{ ...showHoveredOrFocusedGestures }
@@ -202,19 +198,15 @@ export function PrivateBlockToolbar( {
 									disabled={ ! isDefaultEditingMode }
 									isUsingBindings={ isUsingBindings }
 								/>
-								{ isDefaultEditingMode && (
-									<>
-										{ ! isMultiToolbar && (
-											<BlockLockToolbar
-												clientId={ blockClientId }
-											/>
-										) }
-										<BlockMover
-											clientIds={ blockClientIds }
-											hideDragHandle={ hideDragHandle }
-										/>
-									</>
+								{ ! isMultiToolbar && (
+									<BlockLockToolbar
+										clientId={ blockClientId }
+									/>
 								) }
+								<BlockMover
+									clientIds={ blockClientIds }
+									hideDragHandle={ hideDragHandle }
+								/>
 							</ToolbarGroup>
 						</div>
 					) }

diff --git 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
@@ -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;
 	}