Show zoom-out toolbar even when child blocks are selected

WordPress · Sep 30, 2024 · 90dcc61 · 90dcc61
1 parent a7f757e
commit 90dcc61
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js
@@ -34,18 +34,28 @@ function selector( select ) {
 		getSettings,
 		__unstableGetEditorMode,
 		isTyping,
-	} = select( blockEditorStore );
+		isSectionBlock,
+		getParentSectionBlock,
+	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
 	const editorMode = __unstableGetEditorMode();
+	const isZoomOut = editorMode === 'zoom-out';
+	let zoomOutToolbarClientId;
+	if ( isZoomOut ) {
+		zoomOutToolbarClientId = isSectionBlock( clientId )
+			? clientId
+			: getParentSectionBlock( clientId );
+	}
 
 	return {
 		clientId,
+		zoomOutToolbarClientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
-		isZoomOutMode: editorMode === 'zoom-out',
+		isZoomOutMode: isZoomOut,
 	};
 }
 
@@ -63,10 +73,13 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
-		selector,
-		[]
-	);
+	const {
+		clientId,
+		zoomOutToolbarClientId,
+		hasFixedToolbar,
+		isTyping,
+		isZoomOutMode,
+	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
@@ -221,10 +234,10 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
+				{ showZoomOutToolbar && !! zoomOutToolbarClientId && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
+						clientId={ zoomOutToolbarClientId }
 					/>
 				) }
 

diff --git a/packages/block-editor/src/components/block-tools/use-show-block-tools.js b/packages/block-editor/src/components/block-tools/use-show-block-tools.js
@@ -8,6 +8,8 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+import { isZoomOutMode } from '../../store/private-selectors';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -24,7 +26,8 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+			isSectionBlock,
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -42,12 +45,9 @@ export function useShowBlockTools() {
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
 		const isZoomOut = editorMode === 'zoom-out';
-		const _showZoomOutToolbar =
-			isZoomOut &&
-			block?.attributes?.align === 'full' &&
-			! _showEmptyBlockSideInserter;
+		const _showZoomOutToolbar = isZoomOut;
 		const _showBlockToolbarPopover =
-			! _showZoomOutToolbar &&
+			( ! isZoomOutMode || ! isSectionBlock( clientId ) ) &&
 			! getSettings().hasFixedToolbar &&
 			! _showEmptyBlockSideInserter &&
 			hasSelectedBlock &&

diff --git a/packages/block-editor/src/store/private-selectors.js b/packages/block-editor/src/store/private-selectors.js
@@ -15,8 +15,8 @@ import {
 	getBlockName,
 	getTemplateLock,
 	getClientIdsWithDescendants,
-	isNavigationMode,
 	getBlockRootClientId,
+	__unstableGetEditorMode,
 } from './selectors';
 import {
 	checkAllowListRecursive,
@@ -522,7 +522,10 @@ export function isSectionBlock( state, clientId ) {
 	return (
 		getBlockName( state, clientId ) === 'core/block' ||
 		getTemplateLock( state, clientId ) === 'contentOnly' ||
-		( isNavigationMode( state ) && sectionClientIds.includes( clientId ) )
+		( [ 'navigation', 'zoom-out' ].includes(
+			__unstableGetEditorMode( state )
+		) &&
+			sectionClientIds.includes( clientId ) )
 	);
 }