position toolbar popover to the left and change colors on zoomed-out …

…mode

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 (
 		<BlockPopover
 			clientId={ capturingClientId || clientId }
 			bottomClientId={ lastClientId }
 			className={ classnames( 'block-editor-block-list__block-popover', {
 				'is-insertion-point-visible': isInsertionPointVisible,
+				'is-vertical': isZoomedOutViewExperimentEnabled,
 			} ) }
 			resize={ false }
 			{ ...popoverProps }

packages/block-editor/src/components/block-tools/style.scss

@@ -101,6 +101,23 @@
 	font-size: $default-font-size;
 	height: $block-toolbar-height;
 
+	//Vertical block toolbar on zoomed out view
+	.block-editor-block-list__block-popover.is-vertical & {
+		background-color: transparent;
+
+		.block-editor-block-icon {
+			color: $gray-900;
+		}
+
+		.components-button {
+			color: $gray-900;
+			&:active,
+			&[aria-disabled="true"]:hover {
+				color: $gray-900;
+			}
+		}
+	}
+
 	.block-editor-block-list__block-selection-button__content {
 		margin: auto;
 		display: inline-flex;