From ae0de476565995d827d6fb19cec956c2e4952271 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 20 Oct 2022 11:21:22 +1300 Subject: [PATCH 01/11] Add new store action/reducer/selector to indicate when the spacing visualiser is showing --- .../data/data-core-block-editor.md | 28 +++++++++++++++++++ .../block-tools/selected-block-popover.js | 7 ++++- packages/block-editor/src/hooks/dimensions.js | 14 ++++++++-- packages/block-editor/src/store/actions.js | 22 +++++++++++++++ packages/block-editor/src/store/reducer.js | 21 ++++++++++++++ packages/block-editor/src/store/selectors.js | 11 ++++++++ 6 files changed, 100 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 8d7bceb5b44317..f3455bebda1b53 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -1122,6 +1122,18 @@ _Returns_ - `?boolean`: Whether the template is valid or not. +### isVisualizerShowing + +Returns true if the user is showing spacing visualizer, or false otherwise. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether user is showing spacing visualizer. + ### wasBlockJustInserted Tells if the block with the passed clientId was just inserted. @@ -1541,6 +1553,14 @@ _Returns_ - `Object`: Action object. +### startShowingVisualizer + +Returns an action object used in signalling that the user has begun to show spacing visualizer. + +_Returns_ + +- `Object`: Action object. + ### startTyping Returns an action object used in signalling that the user has begun to type. @@ -1565,6 +1585,14 @@ _Returns_ - `Object`: Action object. +### stopShowingVisualizer + +Returns an action object used in signalling that the user has stopped showing spacing visualizer. + +_Returns_ + +- `Object`: Action object. + ### stopTyping Returns an action object used in signalling that the user has stopped typing. 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..f266733940d334 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, + isVisualizerShowing, getSettings, getLastMultiSelectedBlockClientId, } = select( blockEditorStore ); + return { editorMode: __unstableGetEditorMode(), isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), + isVisualizerShowing: isVisualizerShowing(), hasFixedToolbar: getSettings().hasFixedToolbar, isDistractionFree: getSettings().isDistractionFree, lastClientId: hasMultiSelection() @@ -56,6 +59,7 @@ function SelectedBlockPopover( { editorMode, isMultiSelecting, isTyping, + isVisualizerShowing, hasFixedToolbar, isDistractionFree, lastClientId, @@ -92,7 +96,8 @@ function SelectedBlockPopover( { isLargeViewport && ! isMultiSelecting && ! showEmptyBlockSideInserter && - ! isTyping; + ! isTyping && + ! isVisualizerShowing; const canFocusHiddenToolbar = editorMode === 'edit' && ! shouldShowContextualToolbar && diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 171080934213de..a596d0f4361e34 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 @@ -39,6 +40,7 @@ import { useIsPaddingDisabled, } from './padding'; import useSetting from '../components/use-setting'; +import { store as blockEditorStore } from '../store'; export const SPACING_SUPPORT_KEY = 'spacing'; export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ]; @@ -46,8 +48,16 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); - const onMouseOver = () => setIsMouseOver( true ); - const onMouseOut = () => setIsMouseOver( false ); + const { startShowingVisualizer, stopShowingVisualizer } = + useDispatch( blockEditorStore ); + const onMouseOver = () => { + startShowingVisualizer(); + setIsMouseOver( true ); + }; + const onMouseOut = () => { + stopShowingVisualizer(); + 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 971525c94dfd65..bafdb34bfeaf68 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 user has begun to show spacing visualizer. + * + * @return {Object} Action object. + */ +export function startShowingVisualizer() { + return { + type: 'START_SHOWING_VISUALIZER', + }; +} + +/** + * Returns an action object used in signalling that the user has stopped showing spacing visualizer. + * + * @return {Object} Action object. + */ +export function stopShowingVisualizer() { + return { + type: 'STOP_SHOWING_VISUALIZER', + }; +} + /** * 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..e19a4bb3e39b08 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 visualizer state. + * + * @param {boolean} state Current state. + * @param {Object} action Dispatched action. + * + * @return {boolean} Updated state. + */ +export function isVisualizerShowing( state = false, action ) { + switch ( action.type ) { + case 'START_SHOWING_VISUALIZER': + return true; + + case 'STOP_SHOWING_VISUALIZER': + return false; + } + + return state; +} + /** * Reducer returning typing state. * @@ -1809,6 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) { export default combineReducers( { blocks, isTyping, + isVisualizerShowing, draggedBlocks, selection, isMultiSelecting, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 837cee4427708f..c8fc9dbf8548d2 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1276,6 +1276,17 @@ export function isTyping( state ) { return state.isTyping; } +/** + * Returns true if the user is showing spacing visualizer, or false otherwise. + * + * @param {Object} state Global application state. + * + * @return {boolean} Whether user is showing spacing visualizer. + */ +export function isVisualizerShowing( state ) { + return state.isVisualizerShowing; +} + /** * Returns true if the user is dragging blocks, or false otherwise. * From 14d3aebf62262b8b6b08bb6bb5ab2cc82089f65a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 20 Oct 2022 16:51:26 +1300 Subject: [PATCH 02/11] Switch action/reducer wording to better identify what is happening --- .../data/data-core-block-editor.md | 56 +++++++++---------- .../block-tools/selected-block-popover.js | 8 +-- packages/block-editor/src/hooks/dimensions.js | 6 +- packages/block-editor/src/store/actions.js | 8 +-- packages/block-editor/src/store/reducer.js | 10 ++-- packages/block-editor/src/store/selectors.js | 8 +-- 6 files changed, 48 insertions(+), 48 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index f3455bebda1b53..053972686c7370 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -963,6 +963,18 @@ _Returns_ - `boolean`: Whether block is selected and multi-selection exists. +### isBlockToolbarHidden + +Returns true if the the block toolbar should be hidden, or false otherwise. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether the block toolbar is hidden. + ### isBlockValid Returns whether a block is valid or not. @@ -1122,18 +1134,6 @@ _Returns_ - `?boolean`: Whether the template is valid or not. -### isVisualizerShowing - -Returns true if the user is showing spacing visualizer, or false otherwise. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `boolean`: Whether user is showing spacing visualizer. - ### wasBlockJustInserted Tells if the block with the passed clientId was just inserted. @@ -1199,6 +1199,14 @@ _Parameters_ - _clientId_ `string`: Target block client ID. +### hideBlockToolbar + +Returns an action object used in signalling that the user has begun to show spacing visualizer. + +_Returns_ + +- `Object`: Action object. + ### hideInsertionPoint Action that hides the insertion point. @@ -1514,6 +1522,14 @@ _Returns_ - `Object`: Action object. +### showBlockToolbar + +Returns an action object used in signalling that the user has stopped showing spacing visualizer. + +_Returns_ + +- `Object`: Action object. + ### showInsertionPoint Action that shows the insertion point. @@ -1553,14 +1569,6 @@ _Returns_ - `Object`: Action object. -### startShowingVisualizer - -Returns an action object used in signalling that the user has begun to show spacing visualizer. - -_Returns_ - -- `Object`: Action object. - ### startTyping Returns an action object used in signalling that the user has begun to type. @@ -1585,14 +1593,6 @@ _Returns_ - `Object`: Action object. -### stopShowingVisualizer - -Returns an action object used in signalling that the user has stopped showing spacing visualizer. - -_Returns_ - -- `Object`: Action object. - ### stopTyping Returns an action object used in signalling that the user has stopped typing. 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 f266733940d334..9acffa38fbec9e 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,7 +28,7 @@ function selector( select ) { isMultiSelecting, hasMultiSelection, isTyping, - isVisualizerShowing, + isBlockToolbarHidden, getSettings, getLastMultiSelectedBlockClientId, } = select( blockEditorStore ); @@ -37,7 +37,7 @@ function selector( select ) { editorMode: __unstableGetEditorMode(), isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), - isVisualizerShowing: isVisualizerShowing(), + isBlockToolbarHidden: isBlockToolbarHidden(), hasFixedToolbar: getSettings().hasFixedToolbar, isDistractionFree: getSettings().isDistractionFree, lastClientId: hasMultiSelection() @@ -59,7 +59,7 @@ function SelectedBlockPopover( { editorMode, isMultiSelecting, isTyping, - isVisualizerShowing, + isBlockToolbarHidden, hasFixedToolbar, isDistractionFree, lastClientId, @@ -97,7 +97,7 @@ function SelectedBlockPopover( { ! isMultiSelecting && ! showEmptyBlockSideInserter && ! isTyping && - ! isVisualizerShowing; + ! isBlockToolbarHidden; const canFocusHiddenToolbar = editorMode === 'edit' && ! shouldShowContextualToolbar && diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index a596d0f4361e34..289faae6880fcc 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -48,14 +48,14 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); - const { startShowingVisualizer, stopShowingVisualizer } = + const { hideBlockToolbar, showBlockToolbar } = useDispatch( blockEditorStore ); const onMouseOver = () => { - startShowingVisualizer(); + hideBlockToolbar(); setIsMouseOver( true ); }; const onMouseOut = () => { - stopShowingVisualizer(); + showBlockToolbar(); 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 bafdb34bfeaf68..11e00562028b59 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1268,9 +1268,9 @@ export function toggleBlockMode( clientId ) { * * @return {Object} Action object. */ -export function startShowingVisualizer() { +export function hideBlockToolbar() { return { - type: 'START_SHOWING_VISUALIZER', + type: 'HIDE_BLOCK_TOOLBAR', }; } @@ -1279,9 +1279,9 @@ export function startShowingVisualizer() { * * @return {Object} Action object. */ -export function stopShowingVisualizer() { +export function showBlockToolbar() { return { - type: 'STOP_SHOWING_VISUALIZER', + type: 'SHOW_BLOCK_TOOLBAR', }; } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index e19a4bb3e39b08..705bb73b28132f 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1161,19 +1161,19 @@ export const blocks = pipe( } ); /** - * Reducer returning visualizer state. + * Reducer returning visibility status of block toolbar. * * @param {boolean} state Current state. * @param {Object} action Dispatched action. * * @return {boolean} Updated state. */ -export function isVisualizerShowing( state = false, action ) { +export function isBlockToolbarHidden( state = false, action ) { switch ( action.type ) { - case 'START_SHOWING_VISUALIZER': + case 'HIDE_BLOCK_TOOLBAR': return true; - case 'STOP_SHOWING_VISUALIZER': + case 'SHOW_BLOCK_TOOLBAR': return false; } @@ -1829,7 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) { export default combineReducers( { blocks, isTyping, - isVisualizerShowing, + isBlockToolbarHidden, draggedBlocks, selection, isMultiSelecting, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index c8fc9dbf8548d2..53dd3bd2ffe979 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1277,14 +1277,14 @@ export function isTyping( state ) { } /** - * Returns true if the user is showing spacing visualizer, or false otherwise. + * Returns true if the the block toolbar should be hidden, or false otherwise. * * @param {Object} state Global application state. * - * @return {boolean} Whether user is showing spacing visualizer. + * @return {boolean} Whether the block toolbar is hidden. */ -export function isVisualizerShowing( state ) { - return state.isVisualizerShowing; +export function isBlockToolbarHidden( state ) { + return state.isBlockToolbarHidden; } /** From 696a77deb44c86d047ef3af95739ab496ae7c0fa Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 25 Oct 2022 11:21:17 +1300 Subject: [PATCH 03/11] Add unit tests for reducer/selector --- .../block-editor/src/store/test/reducer.js | 19 +++++++++++++++++++ .../block-editor/src/store/test/selectors.js | 19 +++++++++++++++++++ 2 files changed, 38 insertions(+) diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 0ae5d70504a4aa..294a110ba7bb20 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, + isBlockToolbarHidden, isTyping, draggedBlocks, selection, @@ -2253,6 +2254,24 @@ describe( 'state', () => { } ); } ); + describe( 'isBlockToolbarHidden()', () => { + it( 'should set the hide block toolbar flag to true', () => { + const state = isBlockToolbarHidden( false, { + type: 'HIDE_BLOCK_TOOLBAR', + } ); + + expect( state ).toBe( true ); + } ); + + it( 'should set the hide block toolbar flag to false', () => { + const state = isBlockToolbarHidden( false, { + type: 'SHOW_BLOCK_TOOLBAR', + } ); + + 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 129eab5cce7b96..7d1e8ea3fe57c4 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, + isBlockToolbarHidden, isTyping, isDraggingBlocks, getDraggedBlockClientIds, @@ -1940,6 +1941,24 @@ describe( 'selectors', () => { } ); } ); + describe( 'isBlockToolbarHidden', () => { + it( 'should return the true if toggled try in state', () => { + const state = { + isBlockToolbarHidden: true, + }; + + expect( isBlockToolbarHidden( state ) ).toBe( true ); + } ); + + it( 'should return false if toggle false in state', () => { + const state = { + isBlockToolbarHidden: false, + }; + + expect( isBlockToolbarHidden( state ) ).toBe( false ); + } ); + } ); + describe( 'isTyping', () => { it( 'should return the isTyping flag if the block is selected', () => { const state = { From af8b01cf547b0c94ff08c35ea660254f39f62c20 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 25 Oct 2022 11:27:48 +1300 Subject: [PATCH 04/11] Add action unit tests --- .../block-editor/src/store/test/actions.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 45e432ad8bf3f8..776e43e3a3a8bd 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, + hideBlockToolbar, insertBlock, insertBlocks, mergeBlocks, @@ -39,6 +40,7 @@ const { replaceInnerBlocks, resetBlocks, selectBlock, + showBlockToolbar, showInsertionPoint, startMultiSelect, startTyping, @@ -775,6 +777,22 @@ describe( 'actions', () => { } ); } ); + describe( 'hideBlockToolbar', () => { + it( 'should return the HIDE_BLOCK_TOOLBAR action', () => { + expect( hideBlockToolbar() ).toEqual( { + type: 'HIDE_BLOCK_TOOLBAR', + } ); + } ); + } ); + + describe( 'showBlockToolbar', () => { + it( 'should return the SHOW_BLOCK_TOOLBAR action', () => { + expect( showBlockToolbar() ).toEqual( { + type: 'SHOW_BLOCK_TOOLBAR', + } ); + } ); + } ); + describe( 'startTyping', () => { it( 'should return the START_TYPING action', () => { expect( startTyping() ).toEqual( { From 422e17f5fe81bad7f508773b600ec22d8ee142d2 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 31 Oct 2022 11:32:05 +1300 Subject: [PATCH 05/11] Switch to a more generic 'isBlockInterfaceHidden' approach --- .../data/data-core-block-editor.md | 32 +++++++++---------- .../block-tools/selected-block-popover.js | 8 ++--- packages/block-editor/src/hooks/dimensions.js | 6 ++-- packages/block-editor/src/store/actions.js | 12 +++---- packages/block-editor/src/store/reducer.js | 10 +++--- packages/block-editor/src/store/selectors.js | 6 ++-- .../block-editor/src/store/test/actions.js | 20 ++++++------ .../block-editor/src/store/test/reducer.js | 16 +++++----- .../block-editor/src/store/test/selectors.js | 16 +++++----- 9 files changed, 63 insertions(+), 63 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 053972686c7370..214b27dab5c861 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -935,6 +935,18 @@ _Returns_ - `?boolean`: Whether the insertion point is visible or not. +### isBlockInterfaceHidden + +Returns true if the the block interface should be hidden, or false otherwise. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `boolean`: Whether the block toolbar is hidden. + ### isBlockMultiSelected Returns true if the client ID occurs within the block multi-selection, or @@ -963,18 +975,6 @@ _Returns_ - `boolean`: Whether block is selected and multi-selection exists. -### isBlockToolbarHidden - -Returns true if the the block toolbar should be hidden, or false otherwise. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `boolean`: Whether the block toolbar is hidden. - ### isBlockValid Returns whether a block is valid or not. @@ -1199,9 +1199,9 @@ _Parameters_ - _clientId_ `string`: Target block client ID. -### hideBlockToolbar +### hideBlockInterface -Returns an action object used in signalling that the user has begun to show spacing visualizer. +Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden. _Returns_ @@ -1522,9 +1522,9 @@ _Returns_ - `Object`: Action object. -### showBlockToolbar +### showBlockInterface -Returns an action object used in signalling that the user has stopped showing spacing visualizer. +Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown. _Returns_ 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 9acffa38fbec9e..7f32095f974601 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,7 +28,7 @@ function selector( select ) { isMultiSelecting, hasMultiSelection, isTyping, - isBlockToolbarHidden, + isBlockInterfaceHidden, getSettings, getLastMultiSelectedBlockClientId, } = select( blockEditorStore ); @@ -37,7 +37,7 @@ function selector( select ) { editorMode: __unstableGetEditorMode(), isMultiSelecting: isMultiSelecting(), isTyping: isTyping(), - isBlockToolbarHidden: isBlockToolbarHidden(), + isBlockInterfaceHidden: isBlockInterfaceHidden(), hasFixedToolbar: getSettings().hasFixedToolbar, isDistractionFree: getSettings().isDistractionFree, lastClientId: hasMultiSelection() @@ -59,7 +59,7 @@ function SelectedBlockPopover( { editorMode, isMultiSelecting, isTyping, - isBlockToolbarHidden, + isBlockInterfaceHidden, hasFixedToolbar, isDistractionFree, lastClientId, @@ -97,7 +97,7 @@ function SelectedBlockPopover( { ! isMultiSelecting && ! showEmptyBlockSideInserter && ! isTyping && - ! isBlockToolbarHidden; + ! 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 289faae6880fcc..682e97b53d5c85 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -48,14 +48,14 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); - const { hideBlockToolbar, showBlockToolbar } = + const { hideBlockInterface, showBlockInterface } = useDispatch( blockEditorStore ); const onMouseOver = () => { - hideBlockToolbar(); + hideBlockInterface(); setIsMouseOver( true ); }; const onMouseOut = () => { - showBlockToolbar(); + 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 11e00562028b59..fc1b9f8023b9a4 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1264,24 +1264,24 @@ export function toggleBlockMode( clientId ) { } /** - * Returns an action object used in signalling that the user has begun to show spacing visualizer. + * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden. * * @return {Object} Action object. */ -export function hideBlockToolbar() { +export function hideBlockInterface() { return { - type: 'HIDE_BLOCK_TOOLBAR', + type: 'HIDE_BLOCK_INTERFACE', }; } /** - * Returns an action object used in signalling that the user has stopped showing spacing visualizer. + * Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown. * * @return {Object} Action object. */ -export function showBlockToolbar() { +export function showBlockInterface() { return { - type: 'SHOW_BLOCK_TOOLBAR', + type: 'SHOW_BLOCK_INTERFACE', }; } diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 705bb73b28132f..9e8526bb137b1e 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1161,19 +1161,19 @@ export const blocks = pipe( } ); /** - * Reducer returning visibility status of block toolbar. + * Reducer returning visibility status of block interface. * * @param {boolean} state Current state. * @param {Object} action Dispatched action. * * @return {boolean} Updated state. */ -export function isBlockToolbarHidden( state = false, action ) { +export function isBlockInterfaceHidden( state = false, action ) { switch ( action.type ) { - case 'HIDE_BLOCK_TOOLBAR': + case 'HIDE_BLOCK_INTERFACE': return true; - case 'SHOW_BLOCK_TOOLBAR': + case 'SHOW_BLOCK_INTERFACE': return false; } @@ -1829,7 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) { export default combineReducers( { blocks, isTyping, - isBlockToolbarHidden, + isBlockInterfaceHidden, draggedBlocks, selection, isMultiSelecting, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 53dd3bd2ffe979..403bcd59a239c9 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1277,14 +1277,14 @@ export function isTyping( state ) { } /** - * Returns true if the the block toolbar should be hidden, or false otherwise. + * 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 isBlockToolbarHidden( state ) { - return state.isBlockToolbarHidden; +export function isBlockInterfaceHidden( state ) { + return state.isBlockInterfaceHidden; } /** diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 776e43e3a3a8bd..97430f95aa9651 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -27,7 +27,7 @@ const noop = () => {}; const { clearSelectedBlock, - hideBlockToolbar, + hideBlockInterface, insertBlock, insertBlocks, mergeBlocks, @@ -40,7 +40,7 @@ const { replaceInnerBlocks, resetBlocks, selectBlock, - showBlockToolbar, + showBlockInterface, showInsertionPoint, startMultiSelect, startTyping, @@ -777,18 +777,18 @@ describe( 'actions', () => { } ); } ); - describe( 'hideBlockToolbar', () => { - it( 'should return the HIDE_BLOCK_TOOLBAR action', () => { - expect( hideBlockToolbar() ).toEqual( { - type: 'HIDE_BLOCK_TOOLBAR', + describe( 'hideBlockInterface', () => { + it( 'should return the HIDE_BLOCK_INTERFACE action', () => { + expect( hideBlockInterface() ).toEqual( { + type: 'HIDE_BLOCK_INTERFACE', } ); } ); } ); - describe( 'showBlockToolbar', () => { - it( 'should return the SHOW_BLOCK_TOOLBAR action', () => { - expect( showBlockToolbar() ).toEqual( { - type: 'SHOW_BLOCK_TOOLBAR', + describe( 'showBlockInterface', () => { + it( 'should return the SHOW_BLOCK_INTERFACE action', () => { + expect( showBlockInterface() ).toEqual( { + type: 'SHOW_BLOCK_INTERFACE', } ); } ); } ); diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 294a110ba7bb20..9bfe0975f800c7 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -19,7 +19,7 @@ import { hasSameKeys, isUpdatingSameBlockAttribute, blocks, - isBlockToolbarHidden, + isBlockInterfaceHidden, isTyping, draggedBlocks, selection, @@ -2254,18 +2254,18 @@ describe( 'state', () => { } ); } ); - describe( 'isBlockToolbarHidden()', () => { - it( 'should set the hide block toolbar flag to true', () => { - const state = isBlockToolbarHidden( false, { - type: 'HIDE_BLOCK_TOOLBAR', + 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 toolbar flag to false', () => { - const state = isBlockToolbarHidden( false, { - type: 'SHOW_BLOCK_TOOLBAR', + it( 'should set the hide block interface flag to false', () => { + const state = isBlockInterfaceHidden( false, { + type: 'SHOW_BLOCK_INTERFACE', } ); expect( state ).toBe( false ); diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 7d1e8ea3fe57c4..95f0fe53cc8403 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -44,7 +44,7 @@ const { isBlockMultiSelected, isFirstMultiSelectedBlock, getBlockMode, - isBlockToolbarHidden, + isBlockInterfaceHidden, isTyping, isDraggingBlocks, getDraggedBlockClientIds, @@ -1941,21 +1941,21 @@ describe( 'selectors', () => { } ); } ); - describe( 'isBlockToolbarHidden', () => { - it( 'should return the true if toggled try in state', () => { + describe( 'isBlockInterfaceHidden', () => { + it( 'should return the true if toggled true in state', () => { const state = { - isBlockToolbarHidden: true, + isBlockInterfaceHidden: true, }; - expect( isBlockToolbarHidden( state ) ).toBe( true ); + expect( isBlockInterfaceHidden( state ) ).toBe( true ); } ); - it( 'should return false if toggle false in state', () => { + it( 'should return false if toggled false in state', () => { const state = { - isBlockToolbarHidden: false, + isBlockInterfaceHidden: false, }; - expect( isBlockToolbarHidden( state ) ).toBe( false ); + expect( isBlockInterfaceHidden( state ) ).toBe( false ); } ); } ); From ec9f990638e1e04c36c34d6400bcf38a76738455 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Mon, 31 Oct 2022 11:46:57 +1300 Subject: [PATCH 06/11] Stop propagation of mouse events in dimensions control so as not to fire the stopTyping action --- packages/block-editor/src/hooks/dimensions.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 682e97b53d5c85..0b0681717791ee 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -50,11 +50,13 @@ function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); const { hideBlockInterface, showBlockInterface } = useDispatch( blockEditorStore ); - const onMouseOver = () => { + const onMouseOver = ( e ) => { + e.stopPropagation(); hideBlockInterface(); setIsMouseOver( true ); }; - const onMouseOut = () => { + const onMouseOut = ( e ) => { + e.stopPropagation(); showBlockInterface(); setIsMouseOver( false ); }; From 3d7687c77e3287795ed89f6addee6d0e2bedeb93 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Nov 2022 17:04:06 +1300 Subject: [PATCH 07/11] Make the API experimental --- .../data/data-core-block-editor.md | 28 ------------------- .../block-tools/selected-block-popover.js | 2 +- packages/block-editor/src/hooks/dimensions.js | 6 ++-- packages/block-editor/src/store/actions.js | 4 +-- packages/block-editor/src/store/reducer.js | 4 +-- packages/block-editor/src/store/selectors.js | 2 +- .../block-editor/src/store/test/actions.js | 4 +-- .../block-editor/src/store/test/reducer.js | 2 +- .../block-editor/src/store/test/selectors.js | 2 +- 9 files changed, 14 insertions(+), 40 deletions(-) diff --git a/docs/reference-guides/data/data-core-block-editor.md b/docs/reference-guides/data/data-core-block-editor.md index 214b27dab5c861..8d7bceb5b44317 100644 --- a/docs/reference-guides/data/data-core-block-editor.md +++ b/docs/reference-guides/data/data-core-block-editor.md @@ -935,18 +935,6 @@ _Returns_ - `?boolean`: Whether the insertion point is visible or not. -### isBlockInterfaceHidden - -Returns true if the the block interface should be hidden, or false otherwise. - -_Parameters_ - -- _state_ `Object`: Global application state. - -_Returns_ - -- `boolean`: Whether the block toolbar is hidden. - ### isBlockMultiSelected Returns true if the client ID occurs within the block multi-selection, or @@ -1199,14 +1187,6 @@ _Parameters_ - _clientId_ `string`: Target block client ID. -### hideBlockInterface - -Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be hidden. - -_Returns_ - -- `Object`: Action object. - ### hideInsertionPoint Action that hides the insertion point. @@ -1522,14 +1502,6 @@ _Returns_ - `Object`: Action object. -### showBlockInterface - -Returns an action object used in signalling that the block interface, eg. toolbar, outline, etc. should be shown. - -_Returns_ - -- `Object`: Action object. - ### showInsertionPoint Action that shows the insertion point. 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 7f32095f974601..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,7 +28,7 @@ function selector( select ) { isMultiSelecting, hasMultiSelection, isTyping, - isBlockInterfaceHidden, + __experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden, getSettings, getLastMultiSelectedBlockClientId, } = select( blockEditorStore ); diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js index 0b0681717791ee..58e7aead457535 100644 --- a/packages/block-editor/src/hooks/dimensions.js +++ b/packages/block-editor/src/hooks/dimensions.js @@ -48,8 +48,10 @@ export const AXIAL_SIDES = [ 'vertical', 'horizontal' ]; function useVisualizerMouseOver() { const [ isMouseOver, setIsMouseOver ] = useState( false ); - const { hideBlockInterface, showBlockInterface } = - useDispatch( blockEditorStore ); + const { + __experimentalHideBlockInterface: hideBlockInterface, + __experimentalShowBlockInterface: showBlockInterface, + } = useDispatch( blockEditorStore ); const onMouseOver = ( e ) => { e.stopPropagation(); hideBlockInterface(); diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index fc1b9f8023b9a4..f22faa7a4560eb 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -1268,7 +1268,7 @@ export function toggleBlockMode( clientId ) { * * @return {Object} Action object. */ -export function hideBlockInterface() { +export function __experimentalHideBlockInterface() { return { type: 'HIDE_BLOCK_INTERFACE', }; @@ -1279,7 +1279,7 @@ export function hideBlockInterface() { * * @return {Object} Action object. */ -export function showBlockInterface() { +export function __experimentalShowBlockInterface() { return { type: 'SHOW_BLOCK_INTERFACE', }; diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 9e8526bb137b1e..ee525d57409811 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1168,7 +1168,7 @@ export const blocks = pipe( * * @return {boolean} Updated state. */ -export function isBlockInterfaceHidden( state = false, action ) { +export function __experimentalIsBlockInterfaceHidden( state = false, action ) { switch ( action.type ) { case 'HIDE_BLOCK_INTERFACE': return true; @@ -1829,7 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) { export default combineReducers( { blocks, isTyping, - isBlockInterfaceHidden, + __experimentalIsBlockInterfaceHidden, draggedBlocks, selection, isMultiSelecting, diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 403bcd59a239c9..fff63e87c086c1 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1283,7 +1283,7 @@ export function isTyping( state ) { * * @return {boolean} Whether the block toolbar is hidden. */ -export function isBlockInterfaceHidden( state ) { +export function __experimentalIsBlockInterfaceHidden( state ) { return state.isBlockInterfaceHidden; } diff --git a/packages/block-editor/src/store/test/actions.js b/packages/block-editor/src/store/test/actions.js index 97430f95aa9651..82cf9831f104a2 100644 --- a/packages/block-editor/src/store/test/actions.js +++ b/packages/block-editor/src/store/test/actions.js @@ -27,7 +27,7 @@ const noop = () => {}; const { clearSelectedBlock, - hideBlockInterface, + __experimentalHideBlockInterface: hideBlockInterface, insertBlock, insertBlocks, mergeBlocks, @@ -40,7 +40,7 @@ const { replaceInnerBlocks, resetBlocks, selectBlock, - showBlockInterface, + __experimentalShowBlockInterface: showBlockInterface, showInsertionPoint, startMultiSelect, startTyping, diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 9bfe0975f800c7..3b1973d86f584a 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -19,7 +19,7 @@ import { hasSameKeys, isUpdatingSameBlockAttribute, blocks, - isBlockInterfaceHidden, + __experimentalIsBlockInterfaceHidden as isBlockInterfaceHidden, isTyping, draggedBlocks, selection, diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 95f0fe53cc8403..d77d1a9bf11a13 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/packages/block-editor/src/store/test/selectors.js @@ -44,7 +44,7 @@ const { isBlockMultiSelected, isFirstMultiSelectedBlock, getBlockMode, - isBlockInterfaceHidden, + __experimentalIsBlockInterfaceHidden: isBlockInterfaceHidden, isTyping, isDraggingBlocks, getDraggedBlockClientIds, From 967e306303d86cbd92acca31ca19dcd032080b2a Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Tue, 1 Nov 2022 17:12:23 +1300 Subject: [PATCH 08/11] Remove experimental from reducer --- packages/block-editor/src/store/reducer.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index ee525d57409811..9e8526bb137b1e 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -1168,7 +1168,7 @@ export const blocks = pipe( * * @return {boolean} Updated state. */ -export function __experimentalIsBlockInterfaceHidden( state = false, action ) { +export function isBlockInterfaceHidden( state = false, action ) { switch ( action.type ) { case 'HIDE_BLOCK_INTERFACE': return true; @@ -1829,7 +1829,7 @@ export function temporarilyEditingAsBlocks( state = '', action ) { export default combineReducers( { blocks, isTyping, - __experimentalIsBlockInterfaceHidden, + isBlockInterfaceHidden, draggedBlocks, selection, isMultiSelecting, From c43eacf5ec2c45ca332f0738a60ccc375c1d9a82 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 2 Nov 2022 10:53:24 +1300 Subject: [PATCH 09/11] Fix unit test --- packages/block-editor/src/store/test/reducer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/store/test/reducer.js b/packages/block-editor/src/store/test/reducer.js index 3b1973d86f584a..9bfe0975f800c7 100644 --- a/packages/block-editor/src/store/test/reducer.js +++ b/packages/block-editor/src/store/test/reducer.js @@ -19,7 +19,7 @@ import { hasSameKeys, isUpdatingSameBlockAttribute, blocks, - __experimentalIsBlockInterfaceHidden as isBlockInterfaceHidden, + isBlockInterfaceHidden, isTyping, draggedBlocks, selection, From 17015e41bb6acf752ec9bec66c97e88e8c4686d4 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 3 Nov 2022 09:23:53 +1300 Subject: [PATCH 10/11] Don't run the mouseovers if no value set or value is 0 --- .../spacing-input-control.js | 28 +++++++++++++------ 1 file changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js index 54d07e61c6d2b4..44ee084c15d808 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js @@ -57,6 +57,18 @@ export default function SpacingInputControl( { // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes. value = getPresetValueFromCustomValue( value, spacingSizes ); + const handleOnMouseOver = ( e ) => { + if ( onMouseOver && value && value !== '0' ) { + onMouseOver( e ); + } + }; + const handleOnMouseOut = ( e ) => { + // Need to still run this if value is '0' to account for user switching it to '0' before mousing out. + if ( onMouseOut && value ) { + onMouseOut( e ); + } + }; + let selectListSizes = spacingSizes; const showRangeControl = spacingSizes.length <= 8; @@ -220,8 +232,8 @@ export default function SpacingInputControl( { { showCustomValueControl && ( <> onChange( getNewCustomValue( newSize ) ) } @@ -238,8 +250,8 @@ export default function SpacingInputControl( { /> @@ -301,8 +313,8 @@ export default function SpacingInputControl( { hideLabelFromVision={ true } __nextUnconstrainedWidth={ true } size={ '__unstable-large' } - onMouseOver={ onMouseOver } - onMouseOut={ onMouseOut } + onMouseOver={ handleOnMouseOver } + onMouseOut={ handleOnMouseOut } /> ) } From 9b45382cff0e78b109a7c7b36a9aa50aaca48716 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Thu, 3 Nov 2022 13:55:55 +1300 Subject: [PATCH 11/11] Revert "Don't run the mouseovers if no value set or value is 0" This reverts commit 17015e41bb6acf752ec9bec66c97e88e8c4686d4. --- .../spacing-input-control.js | 28 ++++++------------- 1 file changed, 8 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js index 44ee084c15d808..54d07e61c6d2b4 100644 --- a/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js +++ b/packages/block-editor/src/components/spacing-sizes-control/spacing-input-control.js @@ -57,18 +57,6 @@ export default function SpacingInputControl( { // Treat value as a preset value if the passed in value matches the value of one of the spacingSizes. value = getPresetValueFromCustomValue( value, spacingSizes ); - const handleOnMouseOver = ( e ) => { - if ( onMouseOver && value && value !== '0' ) { - onMouseOver( e ); - } - }; - const handleOnMouseOut = ( e ) => { - // Need to still run this if value is '0' to account for user switching it to '0' before mousing out. - if ( onMouseOut && value ) { - onMouseOut( e ); - } - }; - let selectListSizes = spacingSizes; const showRangeControl = spacingSizes.length <= 8; @@ -232,8 +220,8 @@ export default function SpacingInputControl( { { showCustomValueControl && ( <> onChange( getNewCustomValue( newSize ) ) } @@ -250,8 +238,8 @@ export default function SpacingInputControl( { /> @@ -313,8 +301,8 @@ export default function SpacingInputControl( { hideLabelFromVision={ true } __nextUnconstrainedWidth={ true } size={ '__unstable-large' } - onMouseOver={ handleOnMouseOver } - onMouseOut={ handleOnMouseOut } + onMouseOver={ onMouseOver } + onMouseOut={ onMouseOut } /> ) }