differentiate between section toolbar and block toolbar for correct p…

…ositioning when both are visible

packages/block-editor/src/components/block-popover/index.js

@@ -77,30 +77,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
-	const { isZoomOut, sectionRootClientId, getParentSectionBlock } = useSelect(
-		( select ) => {
-			const {
-				isZoomOut: isZoomOutSelector,
-				getSectionRootClientId,
-				getParentSectionBlock: getParentSectionBlockFn,
-			} = unlock( select( blockEditorStore ) );
-
-			const root = getSectionRootClientId();
-			return {
-				sectionRootClientId: root,
-				isZoomOut: isZoomOutSelector(),
-				getParentSectionBlock: getParentSectionBlockFn,
-			};
-		},
-		[]
-	);
+	const {
+		isZoomOut,
+		sectionRootClientId,
+		getParentSectionBlock,
+		getBlockOrder,
+	} = useSelect( ( select ) => {
+		const {
+			isZoomOut: isZoomOutSelector,
+			getSectionRootClientId,
+			getParentSectionBlock: getParentSectionBlockFn,
+			getBlockOrder: getBlockOrderFn,
+		} = unlock( select( blockEditorStore ) );
+
+		const root = getSectionRootClientId();
+		return {
+			sectionRootClientId: root,
+			isZoomOut: isZoomOutSelector(),
+			getParentSectionBlock: getParentSectionBlockFn,
+			getBlockOrder: getBlockOrderFn,
+		};
+	}, [] );
 
 	// These elements are used to position the zoom out view vertical toolbar
 	// correctly, relative to the selected section.
 	const rootSectionElement = useBlockElement( sectionRootClientId );
 	const parentSectionElement = useBlockElement(
 		getParentSectionBlock( clientId ) ?? clientId
 	);
+	const isSectionSelected =
+		getBlockOrder( sectionRootClientId ).includes( clientId );
 
 	const popoverAnchor = useMemo( () => {
 		if (
@@ -123,7 +129,7 @@ function BlockPopover(
 				// selected section. This condition changes the anchor of the toolbar
 				// to the section instead of the block to handle blocksn that are
 				// not full width and nested blocks to keep section height.
-				if ( isZoomOut ) {
+				if ( isZoomOut && isSectionSelected ) {
 					// Compute the height based on the parent section of the
 					// selected block, because the selected block may be
 					// shorter than the section.

packages/block-editor/src/components/block-tools/use-show-block-tools.js

@@ -8,6 +8,7 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -24,7 +25,9 @@ export function useShowBlockTools() {
 			getSettings,
 			__unstableGetEditorMode,
 			isTyping,
-		} = select( blockEditorStore );
+			getBlockOrder,
+			getSectionRootClientId,
+		} = unlock( select( blockEditorStore ) );
 
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
@@ -42,8 +45,14 @@ export function useShowBlockTools() {
 			editorMode === 'edit' &&
 			isEmptyDefaultBlock;
 		const isZoomOut = editorMode === 'zoom-out';
+		const isSectionSelected = getBlockOrder(
+			getSectionRootClientId()
+		).includes( clientId );
 		const _showZoomOutToolbar =
-			clientId && isZoomOut && ! _showEmptyBlockSideInserter;
+			clientId &&
+			isZoomOut &&
+			! _showEmptyBlockSideInserter &&
+			isSectionSelected;
 		const _showBlockToolbarPopover =
 			! _showZoomOutToolbar &&
 			! getSettings().hasFixedToolbar &&