From 437dc3c8ee4e987e8b5d1be3d53ef3c430cfdd55 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 22 Mar 2024 17:22:43 +0100 Subject: [PATCH] position toolbar popover to the left and change colors on zoomed-out mode --- .../block-tools/block-toolbar-breadcrumb.js | 20 +++++++++++++++++++ .../src/components/block-tools/style.scss | 17 ++++++++++++++++ 2 files changed, 37 insertions(+) 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 77afb824101d4..dee4808fac244 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 (