From f7d9645b13f49affeb9527bb6ca5006c63e16bb4 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 4 Nov 2022 12:20:26 +0200 Subject: [PATCH 1/8] add list view to navigation block --- .../src/navigation/edit/index.js | 123 +++++++++++++----- .../block-library/src/navigation/editor.scss | 7 + 2 files changed, 94 insertions(+), 36 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 918b609f92a0e..09ea75c6d805e 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -3,12 +3,19 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ +/** + * WordPress dependencies + */ /** * WordPress dependencies */ import { useState, useEffect, useRef, Platform } from '@wordpress/element'; import { addQueryArgs } from '@wordpress/url'; import { + __experimentalOffCanvasEditor as OffCanvasEditor, InspectorControls, useBlockProps, __experimentalRecursionProvider as RecursionProvider, @@ -37,6 +44,12 @@ import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; import { close, Icon } from '@wordpress/icons'; +/** + * Internal dependencies + */ +/** + * Internal dependencies + */ /** * Internal dependencies */ @@ -82,6 +95,9 @@ function Navigation( { hasColorSettings = true, customPlaceholder: CustomPlaceholder = null, } ) { + const isOffCanvasNavigationEditorEnabled = + window?.__experimentalEnableOffCanvasNavigationEditor === true; + const { openSubmenusOnClick, overlayMenu, @@ -676,18 +692,27 @@ function Navigation( { /* translators: %s: The name of a menu. */ actionLabel={ __( "Switch to '%s'" ) } /> - + { isOffCanvasNavigationEditorEnabled && ( + + ) } + { ! isOffCanvasNavigationEditorEnabled && ( + + ) } { stylingInspectorControls } @@ -759,18 +784,20 @@ function Navigation( { /* translators: %s: The name of a menu. */ actionLabel={ __( "Switch to '%s'" ) } /> - + { ! isOffCanvasNavigationEditorEnabled && ( + + ) } @@ -877,18 +904,27 @@ function Navigation( { /* translators: %s: The name of a menu. */ actionLabel={ __( "Switch to '%s'" ) } /> - + { isOffCanvasNavigationEditorEnabled && ( + + ) } + { ! isOffCanvasNavigationEditorEnabled && ( + + ) } { stylingInspectorControls } @@ -915,6 +951,21 @@ function Navigation( { } } /> ) } + { isOffCanvasNavigationEditorEnabled && ( + + ) } ) } diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index f669b39cb6586..9e7b9ff91e943 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -582,6 +582,13 @@ body.editor-styles-wrapper margin-bottom: $grid-unit-20; } +// increased specificity to override button variant +// for the manage menus button in the advanced area +// of the navigation block +.components-button.is-link.wp-block-navigation-manage-menus-button { + margin-bottom: $grid-unit-20; +} + .wp-block-navigation__overlay-menu-preview { display: flex; align-items: center; From 8ab3486247441773601dcde8b4e3134f175d21e7 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 4 Nov 2022 15:53:54 +0200 Subject: [PATCH 2/8] adds a selectBlockInCanvas to allow control on block selection from list view --- .../src/components/off-canvas-editor/block.js | 15 ++++++++++++- .../components/off-canvas-editor/branch.js | 6 +++++ .../src/components/off-canvas-editor/index.js | 22 +++++++++++++------ 3 files changed, 35 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index 4d5e2e7ea8c49..1e01ee98a8077 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -3,6 +3,9 @@ */ import classnames from 'classnames'; +/** + * WordPress dependencies + */ /** * WordPress dependencies */ @@ -23,6 +26,9 @@ import { import { useDispatch, useSelect } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; +/** + * Internal dependencies + */ /** * Internal dependencies */ @@ -54,6 +60,7 @@ function ListViewBlock( { isExpanded, selectedClientIds, preventAnnouncement, + selectBlockInCanvas, } ) { const cellRef = useRef( null ); const [ isHovered, setIsHovered ] = useState( false ); @@ -245,7 +252,13 @@ function ListViewBlock( {
{ + event.preventDefault(); + } + } onToggleExpanded={ toggleExpanded } isSelected={ isSelected } position={ position } diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js index 0c2b541f3199a..657b393b6fef4 100644 --- a/packages/block-editor/src/components/off-canvas-editor/branch.js +++ b/packages/block-editor/src/components/off-canvas-editor/branch.js @@ -10,6 +10,9 @@ import { AsyncModeProvider, useSelect } from '@wordpress/data'; /** * Internal dependencies */ +/** + * Internal dependencies + */ import ListViewBlock from './block'; import { useListViewContext } from './context'; import { isClientIdSelected } from './utils'; @@ -92,6 +95,7 @@ function ListViewBranch( props ) { isExpanded, parentId, shouldShowInnerBlocks = true, + selectBlockInCanvas, } = props; const isContentLocked = useSelect( @@ -174,6 +178,7 @@ function ListViewBranch( props ) { isExpanded={ shouldExpand } listPosition={ nextPosition } selectedClientIds={ selectedClientIds } + selectBlockInCanvas={ selectBlockInCanvas } /> ) } { ! showBlock && ( @@ -194,6 +199,7 @@ function ListViewBranch( props ) { isBranchSelected={ isSelectedBranch } selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } + selectBlockInCanvas={ selectBlockInCanvas } /> ) } 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 df48b8b0046ad..dd88b9ec43cc9 100644 --- a/packages/block-editor/src/components/off-canvas-editor/index.js +++ b/packages/block-editor/src/components/off-canvas-editor/index.js @@ -50,15 +50,22 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36; /** * Show a hierarchical list of blocks. * - * @param {Object} props Components props. - * @param {string} props.id An HTML element id for the root element of ListView. - * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. - * @param {boolean} props.showBlockMovers Flag to enable block movers - * @param {boolean} props.isExpanded Flag to determine whether nested levels are expanded by default. - * @param {Object} ref Forwarded ref + * @param {Object} props Components props. + * @param {string} props.id An HTML element id for the root element of ListView. + * @param {Array} props.blocks Custom subset of block client IDs to be used instead of the default hierarchy. + * @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 {Object} ref Forwarded ref */ function __ExperimentalOffCanvasEditor( - { id, blocks, showBlockMovers = false, isExpanded = false }, + { + id, + blocks, + showBlockMovers = false, + isExpanded = false, + selectBlockInCanvas = true, + }, ref ) { const { clientIdsTree, draggedClientIds, selectedClientIds } = @@ -199,6 +206,7 @@ function __ExperimentalOffCanvasEditor( selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } shouldShowInnerBlocks={ shouldShowInnerBlocks } + selectBlockInCanvas={ selectBlockInCanvas } /> From a3b8846a2b5284a1b1fe58a65d68524e7d923eca Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:20:42 -0700 Subject: [PATCH 3/8] Update packages/block-library/src/navigation/edit/index.js --- packages/block-library/src/navigation/edit/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 09ea75c6d805e..576d8b9d0f35d 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -6,7 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -/** * WordPress dependencies */ /** From 6f7aefca551170760b71e50698358556eb1726ff Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:20:52 -0700 Subject: [PATCH 4/8] Update packages/block-library/src/navigation/edit/index.js --- packages/block-library/src/navigation/edit/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 576d8b9d0f35d..3994f57bc2402 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -7,7 +7,6 @@ import classnames from 'classnames'; * WordPress dependencies */ * WordPress dependencies - */ /** * WordPress dependencies */ From 9f2f2979876f3252e88af5ef4954935ede120a77 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:21:00 -0700 Subject: [PATCH 5/8] Update packages/block-library/src/navigation/edit/index.js --- packages/block-library/src/navigation/edit/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 3994f57bc2402..d6955f084cd7d 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -6,7 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ - * WordPress dependencies /** * WordPress dependencies */ From 176e4995c7773a4b2406c97f5c2e61c60711cbe7 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:23:30 -0700 Subject: [PATCH 6/8] remove duplicated comment --- packages/block-library/src/navigation/edit/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index d6955f084cd7d..397953da59661 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -3,9 +3,6 @@ */ import classnames from 'classnames'; -/** - * WordPress dependencies - */ /** * WordPress dependencies */ From 938e3b3f2882998c621c240b2799279565bbc0db Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:24:37 -0700 Subject: [PATCH 7/8] remove duplicated comment --- .../block-editor/src/components/off-canvas-editor/block.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/block.js b/packages/block-editor/src/components/off-canvas-editor/block.js index 1e01ee98a8077..e338c4c35c957 100644 --- a/packages/block-editor/src/components/off-canvas-editor/block.js +++ b/packages/block-editor/src/components/off-canvas-editor/block.js @@ -3,9 +3,6 @@ */ import classnames from 'classnames'; -/** - * WordPress dependencies - */ /** * WordPress dependencies */ @@ -26,9 +23,6 @@ import { import { useDispatch, useSelect } from '@wordpress/data'; import { sprintf, __ } from '@wordpress/i18n'; -/** - * Internal dependencies - */ /** * Internal dependencies */ From 18c01bb6bc67aa2ded4a3a74b679a4712d738a53 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Mon, 7 Nov 2022 14:27:14 -0700 Subject: [PATCH 8/8] remove duplicated comment --- .../block-editor/src/components/off-canvas-editor/branch.js | 6 ------ packages/block-library/src/navigation/edit/index.js | 6 ------ 2 files changed, 12 deletions(-) diff --git a/packages/block-editor/src/components/off-canvas-editor/branch.js b/packages/block-editor/src/components/off-canvas-editor/branch.js index 657b393b6fef4..e752bcbc6cae5 100644 --- a/packages/block-editor/src/components/off-canvas-editor/branch.js +++ b/packages/block-editor/src/components/off-canvas-editor/branch.js @@ -4,12 +4,6 @@ import { memo } from '@wordpress/element'; import { AsyncModeProvider, useSelect } from '@wordpress/data'; -/** - * Internal dependencies - */ -/** - * Internal dependencies - */ /** * Internal dependencies */ diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 397953da59661..51e473fffdd68 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -38,12 +38,6 @@ import { speak } from '@wordpress/a11y'; import { createBlock } from '@wordpress/blocks'; import { close, Icon } from '@wordpress/icons'; -/** - * Internal dependencies - */ -/** - * Internal dependencies - */ /** * Internal dependencies */