Hide block toolbar when spacing visualizer is showing (#45131)

packages/block-editor/src/components/block-tools/selected-block-popover.js

@@ -28,13 +28,16 @@ function selector( select ) {
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
+		__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 		getSettings,
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
+
 	return {
 		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
+		isBlockInterfaceHidden: isBlockInterfaceHidden(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isDistractionFree: getSettings().isDistractionFree,
 		lastClientId: hasMultiSelection()
@@ -56,6 +59,7 @@ function SelectedBlockPopover( {
 		editorMode,
 		isMultiSelecting,
 		isTyping,
+		isBlockInterfaceHidden,
 		hasFixedToolbar,
 		isDistractionFree,
 		lastClientId,
@@ -92,7 +96,8 @@ function SelectedBlockPopover( {
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
-		! isTyping;
+		! isTyping &&
+		! isBlockInterfaceHidden;
 	const canFocusHiddenToolbar =
 		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&

packages/block-editor/src/hooks/dimensions.js

@@ -10,6 +10,7 @@ import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/compo
 import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -46,6 +47,7 @@ import {
 	useIsPaddingDisabled,
 } from './padding';
 import useSetting from '../components/use-setting';
+import { store as blockEditorStore } from '../store';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -54,8 +56,20 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ];
 
 function useVisualizerMouseOver() {
 	const [ isMouseOver, setIsMouseOver ] = useState( false );
-	const onMouseOver = () => setIsMouseOver( true );
-	const onMouseOut = () => setIsMouseOver( false );
+	const {
+		__experimentalHideBlockInterface: hideBlockInterface,
+		__experimentalShowBlockInterface: showBlockInterface,
+	} = useDispatch( blockEditorStore );
+	const onMouseOver = ( e ) => {
+		e.stopPropagation();
+		hideBlockInterface();
+		setIsMouseOver( true );
+	};
+	const onMouseOut = ( e ) => {
+		e.stopPropagation();
+		showBlockInterface();
+		setIsMouseOver( false );
+	};
 	return { isMouseOver, onMouseOver, onMouseOut };
 }
 

packages/block-editor/src/store/actions.js

@@ -1263,6 +1263,28 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalHideBlockInterface() {
+	return {
+		type: 'HIDE_BLOCK_INTERFACE',
+	};
+}
+
+/**
+ * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown.
+ *
+ * @return {Object} Action object.
+ */
+export function __experimentalShowBlockInterface() {
+	return {
+		type: 'SHOW_BLOCK_INTERFACE',
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *

packages/block-editor/src/store/reducer.js

@@ -1160,6 +1160,26 @@ export const blocks = pipe(
 	},
 } );
 
+/**
+ * Reducer returning visibility status of block interface.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function isBlockInterfaceHidden( state = false, action ) {
+	switch ( action.type ) {
+		case 'HIDE_BLOCK_INTERFACE':
+			return true;
+
+		case 'SHOW_BLOCK_INTERFACE':
+			return false;
+	}
+
+	return state;
+}
+
 /**
  * Reducer returning typing state.
  *
@@ -1809,6 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) {
 export default combineReducers( {
 	blocks,
 	isTyping,
+	isBlockInterfaceHidden,
 	draggedBlocks,
 	selection,
 	isMultiSelecting,

packages/block-editor/src/store/selectors.js

@@ -1274,6 +1274,17 @@ export function isTyping( state ) {
 	return state.isTyping;
 }
 
+/**
+ * Returns true if the the block interface should be hidden, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the block toolbar is hidden.
+ */
+export function __experimentalIsBlockInterfaceHidden( state ) {
+	return state.isBlockInterfaceHidden;
+}
+
 /**
  * Returns true if the user is dragging blocks, or false otherwise.
  *

packages/block-editor/src/store/test/actions.js

@@ -27,6 +27,7 @@ const noop = () => {};
 
 const {
 	clearSelectedBlock,
+	__experimentalHideBlockInterface: hideBlockInterface,
 	insertBlock,
 	insertBlocks,
 	mergeBlocks,
@@ -39,6 +40,7 @@ const {
 	replaceInnerBlocks,
 	resetBlocks,
 	selectBlock,
+	__experimentalShowBlockInterface: showBlockInterface,
 	showInsertionPoint,
 	startMultiSelect,
 	startTyping,
@@ -775,6 +777,22 @@ describe( 'actions', () => {
 		} );
 	} );
 
+	describe( 'hideBlockInterface', () => {
+		it( 'should return the HIDE_BLOCK_INTERFACE action', () => {
+			expect( hideBlockInterface() ).toEqual( {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
+	describe( 'showBlockInterface', () => {
+		it( 'should return the SHOW_BLOCK_INTERFACE action', () => {
+			expect( showBlockInterface() ).toEqual( {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+		} );
+	} );
+
 	describe( 'startTyping', () => {
 		it( 'should return the START_TYPING action', () => {
 			expect( startTyping() ).toEqual( {

packages/block-editor/src/store/test/reducer.js

@@ -19,6 +19,7 @@ import {
 	hasSameKeys,
 	isUpdatingSameBlockAttribute,
 	blocks,
+	isBlockInterfaceHidden,
 	isTyping,
 	draggedBlocks,
 	selection,
@@ -2253,6 +2254,24 @@ describe( 'state', () => {
 		} );
 	} );
 
+	describe( 'isBlockInterfaceHidden()', () => {
+		it( 'should set the hide block interface flag to true', () => {
+			const state = isBlockInterfaceHidden( false, {
+				type: 'HIDE_BLOCK_INTERFACE',
+			} );
+
+			expect( state ).toBe( true );
+		} );
+
+		it( 'should set the hide block interface flag to false', () => {
+			const state = isBlockInterfaceHidden( false, {
+				type: 'SHOW_BLOCK_INTERFACE',
+			} );
+
+			expect( state ).toBe( false );
+		} );
+	} );
+
 	describe( 'isTyping()', () => {
 		it( 'should set the typing flag to true', () => {
 			const state = isTyping( false, {

packages/block-editor/src/store/test/selectors.js

@@ -44,6 +44,7 @@ const {
 	isBlockMultiSelected,
 	isFirstMultiSelectedBlock,
 	getBlockMode,
+	__experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden,
 	isTyping,
 	isDraggingBlocks,
 	getDraggedBlockClientIds,
@@ -1940,6 +1941,24 @@ describe( 'selectors', () => {
 		} );
 	} );
 
+	describe( 'isBlockInterfaceHidden', () => {
+		it( 'should return the true if toggled true in state', () => {
+			const state = {
+				isBlockInterfaceHidden: true,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( true );
+		} );
+
+		it( 'should return false if toggled false in state', () => {
+			const state = {
+				isBlockInterfaceHidden: false,
+			};
+
+			expect( isBlockInterfaceHidden( state ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'isTyping', () => {
 		it( 'should return the isTyping flag if the block is selected', () => {
 			const state = {