From 8f35cbdddd1341f307f7c53c688239a6700b743f Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 3 Nov 2022 15:20:58 +1300 Subject: [PATCH] Hide block toolbar when spacing visualizer is showing (#45131) --- .../block-tools/selected-block-popover.js | 7 +++++- packages/block-editor/src/hooks/dimensions.js | 18 +++++++++++++-- packages/block-editor/src/store/actions.js | 22 +++++++++++++++++++ packages/block-editor/src/store/reducer.js | 21 ++++++++++++++++++ packages/block-editor/src/store/selectors.js | 11 ++++++++++ .../block-editor/src/store/test/actions.js | 18 +++++++++++++++ .../block-editor/src/store/test/reducer.js | 19 ++++++++++++++++ .../block-editor/src/store/test/selectors.js | 19 ++++++++++++++++ 8 files changed, 132 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/selected-block-popover.js b/packages/block-editor/src/components/block-tools/selected-block-popover.js index 44dd9b04b31359..e11ff490520e99 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-popover.js +++ b/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 && diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index bf55564d082d93..44a9fd83278a95 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/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 }; } diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index 0b8da600e64541..e1c88c2bd99b49 100644 --- a/packages/block-editor/src/store/actions.js +++ b/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. * diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 8a3d8c00e770a6..9e8526bb137b1e 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/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, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index b97e677fb4694d..a2c996f8406c2c 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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. * diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 45e432ad8bf3f8..82cf9831f104a2 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/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( { diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 0ae5d70504a4aa..9bfe0975f800c7 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/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, { diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 2785745ff5c754..95038fe2f58b8e 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/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 = {