diff --git a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js index 77afb824101d41..dee4808fac2447 100644 --- a/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js +++ b/packages/block-editor/src/components/block-tools/block-toolbar-breadcrumb.js @@ -1,3 +1,7 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; /** * External dependencies */ @@ -10,11 +14,19 @@ import BlockSelectionButton from './block-selection-button'; import BlockPopover from '../block-popover'; import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props'; import useSelectedBlockToolProps from './use-selected-block-tool-props'; +import { store as blockEditorStore } from '../../store'; export default function BlockToolbarBreadcrumb( { clientId, __unstableContentRef, } ) { + const { editorMode } = useSelect( ( select ) => { + const { __unstableGetEditorMode } = select( blockEditorStore ); + return { + editorMode: __unstableGetEditorMode(), + }; + } ); + const { capturingClientId, isInsertionPointVisible, @@ -27,12 +39,20 @@ export default function BlockToolbarBreadcrumb( { clientId, } ); + const isZoomedOutViewExperimentEnabled = + window?.__experimentalEnableZoomedOutView && editorMode === 'zoom-out'; + + if ( isZoomedOutViewExperimentEnabled ) { + popoverProps.placement = 'left-start'; + } + return (