From 42c036e14098c6eece4fca35555339341829ea34 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 22 Nov 2022 14:28:27 +0000 Subject: [PATCH 1/8] Include offcanvas specific styles --- .../components/off-canvas-editor/style.scss | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss index 7f22f6f5340cfd..680b166f97df82 100644 --- a/packages/block-editor/src/components/off-canvas-editor/style.scss +++ b/packages/block-editor/src/components/off-canvas-editor/style.scss @@ -1 +1,17 @@ -//Styles for off-canvas editor, remove this line when you add some css to this file! +.offcanvas-editor__list-appender__toggle { + flex-direction: row; + justify-content: flex-start; + border: 0; + box-shadow: none; + margin-left: 24px; + margin-top: $grid-unit-10; // List View block SVG icon size. + + &.components-button.components-button { + padding: 0; + } + + &:hover, + &:focus { + box-shadow: none; + } +} From e2b920644f4c58e7cab8651f6f0a320be2f0057b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 21 Nov 2022 16:08:41 +0000 Subject: [PATCH 2/8] Use standard Inserter only --- .../src/components/off-canvas-editor/index.js | 60 ++++++++++++++++--- .../components/off-canvas-editor/style.scss | 22 ++++--- .../edit/menu-inspector-controls.js | 1 + 3 files changed, 62 insertions(+), 21 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index dd88b9ec43cc94..d3a0351e0fb0e6 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -28,6 +28,7 @@ import useListViewClientIds from './use-list-view-client-ids'; import useListViewDropZone from './use-list-view-drop-zone'; import useListViewExpandSelectedItem from './use-list-view-expand-selected-item'; import { store as blockEditorStore } from '../../store'; +import Inserter from '../inserter'; const expanded = ( state, action ) => { if ( Array.isArray( action.clientIds ) ) { @@ -56,6 +57,7 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; * @param {boolean} props.showBlockMovers Flag to enable block movers * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,. + * @param {string} props.clientId Client ID of the root navigation block. * @param {Object} ref Forwarded ref */ function __ExperimentalOffCanvasEditor( @@ -65,6 +67,7 @@ function __ExperimentalOffCanvasEditor( showBlockMovers = false, isExpanded = false, selectBlockInCanvas = true, + clientId, }, ref ) { @@ -104,9 +107,9 @@ function __ExperimentalOffCanvasEditor( setExpandedState, } ); const selectEditorBlock = useCallback( - ( event, clientId ) => { - updateBlockSelection( event, clientId ); - setSelectedTreeId( clientId ); + ( event, _clientId ) => { + updateBlockSelection( event, _clientId ); + setSelectedTreeId( _clientId ); }, [ setSelectedTreeId, updateBlockSelection ] ); @@ -128,20 +131,20 @@ function __ExperimentalOffCanvasEditor( ); const expand = useCallback( - ( clientId ) => { - if ( ! clientId ) { + ( _clientId ) => { + if ( ! _clientId ) { return; } - setExpandedState( { type: 'expand', clientIds: [ clientId ] } ); + setExpandedState( { type: 'expand', clientIds: [ _clientId ] } ); }, [ setExpandedState ] ); const collapse = useCallback( - ( clientId ) => { - if ( ! clientId ) { + ( _clientId ) => { + if ( ! _clientId ) { return; } - setExpandedState( { type: 'collapse', clientIds: [ clientId ] } ); + setExpandedState( { type: 'collapse', clientIds: [ _clientId ] } ); }, [ setExpandedState ] ); @@ -208,9 +211,48 @@ function __ExperimentalOffCanvasEditor( shouldShowInnerBlocks={ shouldShowInnerBlocks } selectBlockInCanvas={ selectBlockInCanvas } /> + + + + + ); } + +function OffCanvasEditorAppender( { rootClientId } ) { + const { hideInserter } = useSelect( + ( select ) => { + const { getTemplateLock, __unstableGetEditorMode } = + select( blockEditorStore ); + + return { + hideInserter: + !! getTemplateLock( rootClientId ) || + __unstableGetEditorMode() === 'zoom-out', + }; + }, + [ rootClientId ] + ); + + if ( hideInserter ) { + return null; + } + + return ( +
+ +
+ ); +} + export default forwardRef( __ExperimentalOffCanvasEditor ); diff --git a/packages/block-editor/src/components/off-canvas-editor/style.scss b/packages/block-editor/src/components/off-canvas-editor/style.scss index 680b166f97df82..611ac309bf535b 100644 --- a/packages/block-editor/src/components/off-canvas-editor/style.scss +++ b/packages/block-editor/src/components/off-canvas-editor/style.scss @@ -1,17 +1,15 @@ -.offcanvas-editor__list-appender__toggle { - flex-direction: row; - justify-content: flex-start; - border: 0; - box-shadow: none; - margin-left: 24px; - margin-top: $grid-unit-10; // List View block SVG icon size. - - &.components-button.components-button { - padding: 0; - } +.offcanvas-editor__appender .block-editor-inserter__toggle { + background-color: #1e1e1e; + color: #fff; + margin: $grid-unit-10 0 0 28px; + border-radius: 2px; + height: 24px; + min-width: 24px; + padding: 0; &:hover, &:focus { - box-shadow: none; + background: var(--wp-admin-theme-color); + color: #fff; } } diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index 330812ef3e981c..93f7540e384ffb 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -104,6 +104,7 @@ const MenuInspectorControls = ( {

{ __( 'Select or create a menu' ) }

) : ( Date: Tue, 22 Nov 2022 14:30:19 +0000 Subject: [PATCH 3/8] Avoid using underscore naming convention --- .../src/components/off-canvas-editor/index.js | 24 ++++++++++++------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index d3a0351e0fb0e6..d5e5453cc1d500 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -107,9 +107,9 @@ function __ExperimentalOffCanvasEditor( setExpandedState, } ); const selectEditorBlock = useCallback( - ( event, _clientId ) => { - updateBlockSelection( event, _clientId ); - setSelectedTreeId( _clientId ); + ( event, blockClientId ) => { + updateBlockSelection( event, blockClientId ); + setSelectedTreeId( blockClientId ); }, [ setSelectedTreeId, updateBlockSelection ] ); @@ -131,20 +131,26 @@ function __ExperimentalOffCanvasEditor( ); const expand = useCallback( - ( _clientId ) => { - if ( ! _clientId ) { + ( blockClientId ) => { + if ( ! blockClientId ) { return; } - setExpandedState( { type: 'expand', clientIds: [ _clientId ] } ); + setExpandedState( { + type: 'expand', + clientIds: [ blockClientId ], + } ); }, [ setExpandedState ] ); const collapse = useCallback( - ( _clientId ) => { - if ( ! _clientId ) { + ( blockClientId ) => { + if ( ! blockClientId ) { return; } - setExpandedState( { type: 'collapse', clientIds: [ _clientId ] } ); + setExpandedState( { + type: 'collapse', + clientIds: [ blockClientId ], + } ); }, [ setExpandedState ] ); From 3c00dc552096081dd59dd56cb970d441db4ce58c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 22 Nov 2022 14:45:38 +0000 Subject: [PATCH 4/8] Use standard UI components for keyboard navigation --- .../src/components/off-canvas-editor/index.js | 81 +++++++++++-------- 1 file changed, 46 insertions(+), 35 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index d5e5453cc1d500..e4f1e445500c54 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -5,7 +5,11 @@ import { useMergeRefs, __experimentalUseFixedWindowList as useFixedWindowList, } from '@wordpress/compose'; -import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components'; +import { + __experimentalTreeGrid as TreeGrid, + __experimentalTreeGridRow as TreeGridRow, + __experimentalTreeGridCell as TreeGridCell, +} from '@wordpress/components'; import { AsyncModeProvider, useSelect } from '@wordpress/data'; import { useCallback, @@ -217,48 +221,55 @@ function __ExperimentalOffCanvasEditor( shouldShowInnerBlocks={ shouldShowInnerBlocks } selectBlockInCanvas={ selectBlockInCanvas } /> - - - - - + + + { ( props ) => ( + + ) } + + ); } -function OffCanvasEditorAppender( { rootClientId } ) { - const { hideInserter } = useSelect( - ( select ) => { - const { getTemplateLock, __unstableGetEditorMode } = - select( blockEditorStore ); +const OffCanvasEditorAppender = forwardRef( + ( { rootClientId, ...props }, ref ) => { + const { hideInserter } = useSelect( + ( select ) => { + const { getTemplateLock, __unstableGetEditorMode } = + select( blockEditorStore ); - return { - hideInserter: - !! getTemplateLock( rootClientId ) || - __unstableGetEditorMode() === 'zoom-out', - }; - }, - [ rootClientId ] - ); + return { + hideInserter: + !! getTemplateLock( rootClientId ) || + __unstableGetEditorMode() === 'zoom-out', + }; + }, + [ rootClientId ] + ); - if ( hideInserter ) { - return null; - } + if ( hideInserter ) { + return null; + } - return ( -
- -
- ); -} + return ( +
+ +
+ ); + } +); export default forwardRef( __ExperimentalOffCanvasEditor ); From 1a3b0414d4529ed6665e5b1b3ca0205811ffc290 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 23 Nov 2022 09:16:05 +0000 Subject: [PATCH 5/8] Extract appender to file --- .../components/off-canvas-editor/appender.js | 43 +++++++++++++++++++ .../src/components/off-canvas-editor/index.js | 39 +---------------- 2 files changed, 45 insertions(+), 37 deletions(-) create mode 100644 packages/block-editor/src/components/off-canvas-editor/appender.js diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js new file mode 100644 index 00000000000000..8aa209c920bd79 --- /dev/null +++ b/packages/block-editor/src/components/off-canvas-editor/appender.js @@ -0,0 +1,43 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { forwardRef } from '@wordpress/element'; +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../../store'; +import Inserter from '../inserter'; + +export const Appender = forwardRef( ( { rootClientId, ...props }, ref ) => { + const { hideInserter } = useSelect( + ( select ) => { + const { getTemplateLock, __unstableGetEditorMode } = + select( blockEditorStore ); + + return { + hideInserter: + !! getTemplateLock( rootClientId ) || + __unstableGetEditorMode() === 'zoom-out', + }; + }, + [ rootClientId ] + ); + + if ( hideInserter ) { + return null; + } + + return ( +
+ +
+ ); +} ); diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index e4f1e445500c54..6db49b5cffb7e4 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -32,7 +32,7 @@ import useListViewClientIds from './use-list-view-client-ids'; import useListViewDropZone from './use-list-view-drop-zone'; import useListViewExpandSelectedItem from './use-list-view-expand-selected-item'; import { store as blockEditorStore } from '../../store'; -import Inserter from '../inserter'; +import { Appender } from './appender'; const expanded = ( state, action ) => { if ( Array.isArray( action.clientIds ) ) { @@ -224,7 +224,7 @@ function __ExperimentalOffCanvasEditor( { ( props ) => ( - @@ -237,39 +237,4 @@ function __ExperimentalOffCanvasEditor( ); } -const OffCanvasEditorAppender = forwardRef( - ( { rootClientId, ...props }, ref ) => { - const { hideInserter } = useSelect( - ( select ) => { - const { getTemplateLock, __unstableGetEditorMode } = - select( blockEditorStore ); - - return { - hideInserter: - !! getTemplateLock( rootClientId ) || - __unstableGetEditorMode() === 'zoom-out', - }; - }, - [ rootClientId ] - ); - - if ( hideInserter ) { - return null; - } - - return ( -
- -
- ); - } -); - export default forwardRef( __ExperimentalOffCanvasEditor ); From 2ad866f26bd13c592b7fc8783172c2836b16bbb3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 23 Nov 2022 09:32:14 +0000 Subject: [PATCH 6/8] Apply TreeGridRow props --- .../src/components/off-canvas-editor/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/index.js b/packages/block-editor/src/components/off-canvas-editor/index.js index 6db49b5cffb7e4..32973ee65aa8f5 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -221,11 +221,16 @@ function __ExperimentalOffCanvasEditor( shouldShowInnerBlocks={ shouldShowInnerBlocks } selectBlockInCanvas={ selectBlockInCanvas } /> - + - { ( props ) => ( + { ( treeGridCellProps ) => ( ) } From c267917fc61b84d30f05d0d4d19522ecaba0dd5d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 23 Nov 2022 09:46:08 +0000 Subject: [PATCH 7/8] Remove clientId prop drilling --- .../components/off-canvas-editor/appender.js | 31 ++++++++++--------- .../src/components/off-canvas-editor/index.js | 7 +---- 2 files changed, 18 insertions(+), 20 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/appender.js b/packages/block-editor/src/components/off-canvas-editor/appender.js index 8aa209c920bd79..bf4d4e7804fd5f 100644 --- a/packages/block-editor/src/components/off-canvas-editor/appender.js +++ b/packages/block-editor/src/components/off-canvas-editor/appender.js @@ -9,20 +9,23 @@ import { forwardRef } from '@wordpress/element'; import { store as blockEditorStore } from '../../store'; import Inserter from '../inserter'; -export const Appender = forwardRef( ( { rootClientId, ...props }, ref ) => { - const { hideInserter } = useSelect( - ( select ) => { - const { getTemplateLock, __unstableGetEditorMode } = - select( blockEditorStore ); +export const Appender = forwardRef( ( props, ref ) => { + const { hideInserter, clientId } = useSelect( ( select ) => { + const { + getTemplateLock, + __unstableGetEditorMode, + getSelectedBlockClientId, + } = select( blockEditorStore ); - return { - hideInserter: - !! getTemplateLock( rootClientId ) || - __unstableGetEditorMode() === 'zoom-out', - }; - }, - [ rootClientId ] - ); + const _clientId = getSelectedBlockClientId(); + + return { + clientId: getSelectedBlockClientId(), + hideInserter: + !! getTemplateLock( _clientId ) || + __unstableGetEditorMode() === 'zoom-out', + }; + }, [] ); if ( hideInserter ) { return null; @@ -32,7 +35,7 @@ export const Appender = forwardRef( ( { rootClientId, ...props }, ref ) => {
{ ( treeGridCellProps ) => ( - + ) } From ef38df363c04aa28c96eed2e990dd3bf3449b7c0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 23 Nov 2022 09:46:56 +0000 Subject: [PATCH 8/8] Remove need to pass clientID to offcanvas component --- .../block-library/src/navigation/edit/menu-inspector-controls.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/menu-inspector-controls.js b/packages/block-library/src/navigation/edit/menu-inspector-controls.js index 93f7540e384ffb..330812ef3e981c 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -104,7 +104,6 @@ const MenuInspectorControls = ( {

{ __( 'Select or create a menu' ) }

) : (