From 5dd4d63d08d197fe34d8a5311ede7736cf5566d5 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 9 Jan 2023 12:36:54 -0600 Subject: [PATCH 01/11] Move site editor nav menu sidebar to its own experimental flag --- lib/experimental/editor-settings.php | 3 +++ lib/experiments-page.php | 12 ++++++++++++ .../src/components/sidebar-edit-mode/index.js | 4 +++- 3 files changed, 18 insertions(+), 1 deletion(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index b0c05544d6b19..6766e480922e6 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -86,6 +86,9 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' ); } + if ( $gutenberg_experiments && array_key_exists( 'gutenberg-site-editor-navigation-menu-sidebar', $gutenberg_experiments ) ) { + wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSiteEditorNavigationMenuSidebar = true', 'before' ); + } } add_action( 'admin_init', 'gutenberg_enable_experiments' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 09746caa559f2..12e5b3cff1fdb 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -77,6 +77,18 @@ function gutenberg_initialize_experiments_settings() { ) ); + add_settings_field( + 'gutenberg-site-editor-navigation-menu-sidebar', + __( 'Global navigation menu sidebar ', 'gutenberg' ), + 'gutenberg_display_experiment_field', + 'gutenberg-experiments', + 'gutenberg_experiments_section', + array( + 'label' => __( 'Test a new navigation menu editor sidebar in the site editor.', 'gutenberg' ), + 'id' => 'gutenberg-site-editor-navigation-menu-sidebar', + ) + ); + register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/edit-site/src/components/sidebar-edit-mode/index.js b/packages/edit-site/src/components/sidebar-edit-mode/index.js index 54a1901c83b8d..efc99f8a69d85 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/index.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/index.js @@ -69,7 +69,9 @@ export function SidebarComplementaryAreaFills() { // See https://github.com/WordPress/gutenberg/blob/trunk/docs/how-to-guides/feature-flags.md#dead-code-elimination. let MaybeNavigationMenuSidebar = Fragment; - if ( window?.__experimentalEnableOffCanvasNavigationEditor === true ) { + if ( + window?.__experimentalEnableSiteEditorNavigationMenuSidebar === true + ) { MaybeNavigationMenuSidebar = NavigationMenuSidebar; } From 21e3a7bd80cf4dc183675803e76145707ec04f97 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 9 Jan 2023 13:05:49 -0600 Subject: [PATCH 02/11] Remove experimental option for off canvas editor --- lib/experimental/editor-settings.php | 3 -- lib/experiments-page.php | 12 ------ .../src/components/block-card/index.js | 5 +-- .../src/components/block-inspector/index.js | 12 ++---- .../src/navigation/edit/index.js | 13 ++----- .../edit/menu-inspector-controls.js | 13 ++----- .../edit/navigation-menu-selector.js | 39 +------------------ .../navigation-menu.js | 13 ++----- 8 files changed, 17 insertions(+), 93 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 6766e480922e6..88b6c2ac783ef 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -83,9 +83,6 @@ function gutenberg_enable_experiments() { if ( $gutenberg_experiments && array_key_exists( 'gutenberg-color-randomizer', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableColorRandomizer = true', 'before' ); } - if ( $gutenberg_experiments && array_key_exists( 'gutenberg-off-canvas-navigation-editor', $gutenberg_experiments ) ) { - wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableOffCanvasNavigationEditor = true', 'before' ); - } if ( $gutenberg_experiments && array_key_exists( 'gutenberg-site-editor-navigation-menu-sidebar', $gutenberg_experiments ) ) { wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableSiteEditorNavigationMenuSidebar = true', 'before' ); } diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 12e5b3cff1fdb..e7ab1bb1f8206 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -53,18 +53,6 @@ function gutenberg_initialize_experiments_settings() { ) ); - add_settings_field( - 'gutenberg-off-canvas-navigation-editor', - __( 'Off canvas navigation editor ', 'gutenberg' ), - 'gutenberg_display_experiment_field', - 'gutenberg-experiments', - 'gutenberg_experiments_section', - array( - 'label' => __( 'Test a new "off canvas" editor for navigation block using the block inspector and a tree view of the current menu', 'gutenberg' ), - 'id' => 'gutenberg-off-canvas-navigation-editor', - ) - ); - add_settings_field( 'gutenberg-color-randomizer', __( 'Color randomizer ', 'gutenberg' ), diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index dab832861ae66..700e8a95b3d7f 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -27,9 +27,6 @@ function BlockCard( { title, icon, description, blockType, className } ) { ( { title, icon, description } = blockType ); } - const isOffCanvasNavigationEditorEnabled = - window?.__experimentalEnableOffCanvasNavigationEditor === true; - const { parentNavBlockClientId } = useSelect( ( select ) => { const { getSelectedBlockClientId, getBlockParentsByBlockName } = select( blockEditorStore ); @@ -49,7 +46,7 @@ function BlockCard( { title, icon, description, blockType, className } ) { return (
- { isOffCanvasNavigationEditorEnabled && parentNavBlockClientId && ( + { parentNavBlockClientId && ( - ); - } - return ( { ( { onClose } ) => ( <> diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js index 89a66bd6c7359..906bed9ccc1db 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { - __experimentalListView as ListView, __experimentalOffCanvasEditor as OffCanvasEditor, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -50,13 +49,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { } ); }, [ updateBlockListSettings, innerBlocks ] ); - if ( window?.__experimentalEnableOffCanvasNavigationEditor ) { - return ( - - ); - } - return ; + return ( + + ); } From 2a846e74d7ad3c76a9e3b42e693e1d3fb6956061 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 9 Jan 2023 13:12:04 -0600 Subject: [PATCH 03/11] Reword nav sidebar experiment label --- lib/experiments-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/experiments-page.php b/lib/experiments-page.php index e7ab1bb1f8206..14e589a6aee74 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -72,7 +72,7 @@ function gutenberg_initialize_experiments_settings() { 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test a new navigation menu editor sidebar in the site editor.', 'gutenberg' ), + 'label' => __( 'Test a new global navigation menu sidebar in the site editor.', 'gutenberg' ), 'id' => 'gutenberg-site-editor-navigation-menu-sidebar', ) ); From fab0a26063a8ef375115e6f3d8e1d1ca06c4a6d0 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 9 Jan 2023 14:12:32 -0600 Subject: [PATCH 04/11] Remove unused Fragment imports --- .../src/navigation/edit/menu-inspector-controls.js | 2 +- 1 file changed, 1 insertion(+), 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 ce37e80821152..2848fdf141974 100644 --- a/packages/block-library/src/navigation/edit/menu-inspector-controls.js +++ b/packages/block-library/src/navigation/edit/menu-inspector-controls.js @@ -126,7 +126,7 @@ const DefaultControls = ( props ) => { }; const MenuInspectorControls = ( props ) => { - // Show the OffCanvasEditor controls if we're in the Gutenberg plugin. + // Show the OffCanvasEditor controls if we're in the Gutenberg plugin. Previously used isOffCanvasNavigationEditorEnabled. return ( Date: Mon, 9 Jan 2023 14:15:41 -0600 Subject: [PATCH 05/11] Remove unused toggleProps in NavigationMenuSelector --- .../edit/navigation-menu-selector.js | 35 +------------------ .../src/navigation/edit/placeholder/index.js | 6 ---- 2 files changed, 1 insertion(+), 40 deletions(-) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 31c8a0dc3a159..224ea5b9284c2 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -6,11 +6,9 @@ import { MenuItem, MenuItemsChoice, DropdownMenu, - Button, - VisuallyHidden, } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; -import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons'; +import { moreVertical } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import { useEffect, useMemo, useState } from '@wordpress/element'; @@ -35,8 +33,6 @@ function NavigationMenuSelector( { const createActionLabel = __( "Create from '%s'" ); const [ selectorLabel, setSelectorLabel ] = useState( '' ); - const [ isPressed, setIsPressed ] = useState( false ); - const [ enableOptions, setEnableOptions ] = useState( false ); const [ isCreatingMenu, setIsCreatingMenu ] = useState( false ); actionLabel = actionLabel || createActionLabel; @@ -57,11 +53,6 @@ function NavigationMenuSelector( { 'title' ); - const shouldEnableMenuSelector = - ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) && - hasResolvedNavigationMenus && - ! isCreatingMenu; - const menuChoices = useMemo( () => { return ( navigationMenus?.map( ( { id, title }, index ) => { @@ -125,28 +116,6 @@ function NavigationMenuSelector( { isNavigationMenuResolved, ] ); - toggleProps = { - ...toggleProps, - className: 'wp-block-navigation__navigation-selector-button', - children: ( - <> - - { __( 'Select Menu' ) } - - - - ), - isBusy: ! enableOptions, - disabled: ! enableOptions, - __experimentalIsFocusable: true, - onClick: () => { - setIsPressed( ! isPressed ); - }, - }; - return ( { __( 'Create new menu' ) } diff --git a/packages/block-library/src/navigation/edit/placeholder/index.js b/packages/block-library/src/navigation/edit/placeholder/index.js index 101cd1308f461..68f81c4aed99d 100644 --- a/packages/block-library/src/navigation/edit/placeholder/index.js +++ b/packages/block-library/src/navigation/edit/placeholder/index.js @@ -70,12 +70,6 @@ export default function NavigationPlaceholder( { clientId={ clientId } onSelectNavigationMenu={ onSelectNavigationMenu } onSelectClassicMenu={ onSelectClassicMenu } - toggleProps={ { - variant: 'tertiary', - iconPosition: 'right', - className: - 'wp-block-navigation-placeholder__actions__dropdown', - } } />
From 5e35de5a3423e88058020f05bb24cec5a9a4e677 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Mon, 9 Jan 2023 14:16:18 -0600 Subject: [PATCH 06/11] Remove unused id in NavigationMenu --- .../navigation-menu-sidebar/navigation-inspector.js | 5 +---- .../navigation-menu-sidebar/navigation-menu.js | 2 +- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js index 34c697a809f3f..12d5b9819debd 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js @@ -206,10 +206,7 @@ export default function NavigationInspector() { onChange={ onChange } onInput={ onInput } > - + ) } diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js index 906bed9ccc1db..16e8c49b02386 100644 --- a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js +++ b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-menu.js @@ -31,7 +31,7 @@ const ALLOWED_BLOCKS = { ], }; -export default function NavigationMenu( { innerBlocks, id } ) { +export default function NavigationMenu( { innerBlocks } ) { const { updateBlockListSettings } = useDispatch( blockEditorStore ); //TODO: Block settings are normally updated as a side effect of rendering InnerBlocks in BlockList From 3c3adcf4e96d7b213838fb54c0ed555982568b7e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 25 Jan 2023 07:26:06 +0000 Subject: [PATCH 07/11] reverse the conditional --- .../edit/navigation-menu-selector.js | 70 ++++++++++++++++++- 1 file changed, 67 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 224ea5b9284c2..16c84f94cfef8 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -6,9 +6,11 @@ import { MenuItem, MenuItemsChoice, DropdownMenu, + Button, + VisuallyHidden, } from '@wordpress/components'; import { useEntityProp } from '@wordpress/core-data'; -import { moreVertical } from '@wordpress/icons'; +import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons'; import { __, sprintf } from '@wordpress/i18n'; import { decodeEntities } from '@wordpress/html-entities'; import { useEffect, useMemo, useState } from '@wordpress/element'; @@ -33,6 +35,8 @@ function NavigationMenuSelector( { const createActionLabel = __( "Create from '%s'" ); const [ selectorLabel, setSelectorLabel ] = useState( '' ); + const [ isPressed, setIsPressed ] = useState( false ); + const [ enableOptions, setEnableOptions ] = useState( false ); const [ isCreatingMenu, setIsCreatingMenu ] = useState( false ); actionLabel = actionLabel || createActionLabel; @@ -53,6 +57,11 @@ function NavigationMenuSelector( { 'title' ); + const shouldEnableMenuSelector = + ( canSwitchNavigationMenu || canUserCreateNavigationMenu ) && + hasResolvedNavigationMenus && + ! isCreatingMenu; + const menuChoices = useMemo( () => { return ( navigationMenus?.map( ( { id, title }, index ) => { @@ -116,11 +125,37 @@ function NavigationMenuSelector( { isNavigationMenuResolved, ] ); - return ( + toggleProps = { + ...toggleProps, + className: 'wp-block-navigation__navigation-selector-button', + children: ( + <> + + { __( 'Select Menu' ) } + + + + ), + isBusy: ! enableOptions, + disabled: ! enableOptions, + __experimentalIsFocusable: true, + onClick: () => { + setIsPressed( ! isPressed ); + }, + }; + + const NavigationMenuSelectorDropdown = ( { ( { onClose } ) => ( <> @@ -145,6 +180,7 @@ function NavigationMenuSelector( { setSelectorLabel( __( 'Loading …' ) ); + setEnableOptions( false ); onSelectClassicMenu( menu ); onClose(); } } @@ -169,6 +205,7 @@ function NavigationMenuSelector( { onCreateNew(); setIsCreatingMenu( true ); setSelectorLabel( __( 'Loading …' ) ); + setEnableOptions( false ); } } > { __( 'Create new menu' ) } @@ -179,6 +216,33 @@ function NavigationMenuSelector( { ) } ); + + const NavigationMenuSelectorButton = ( + + ); + + if ( ! hasNavigationMenus && ! hasClassicMenus ) { + if ( ! process.env.IS_GUTENBERG_PLUGIN ) { + return NavigationMenuSelectorButton; + } + + return NavigationMenuSelectorButton; + } + + return NavigationMenuSelectorDropdown; } export default NavigationMenuSelector; From 6642309c82cb8552f3f43b1ceb07dd41addf43fe Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 25 Jan 2023 07:27:52 +0000 Subject: [PATCH 08/11] add explanatory comment --- .../src/navigation/edit/navigation-menu-selector.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 16c84f94cfef8..799fac54ad236 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -236,10 +236,9 @@ function NavigationMenuSelector( { if ( ! hasNavigationMenus && ! hasClassicMenus ) { if ( ! process.env.IS_GUTENBERG_PLUGIN ) { + // This has to be in it's own conditional so it is removed by dead code elimination. Previously used isOffCanvasNavigationEditorEnabled. return NavigationMenuSelectorButton; } - - return NavigationMenuSelectorButton; } return NavigationMenuSelectorDropdown; From a8bbbfe4848ee8206cc9ea936681a69e1f9c0e2a Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 25 Jan 2023 09:47:04 +0000 Subject: [PATCH 09/11] reset value if the experiment is off --- .../src/navigation/edit/navigation-menu-selector.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/edit/navigation-menu-selector.js b/packages/block-library/src/navigation/edit/navigation-menu-selector.js index 799fac54ad236..8285c89244720 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-selector.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-selector.js @@ -149,8 +149,14 @@ function NavigationMenuSelector( { const NavigationMenuSelectorDropdown = ( Date: Thu, 26 Jan 2023 09:56:42 +0000 Subject: [PATCH 10/11] Add comment about nav block specific code --- packages/block-editor/src/components/block-card/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index 700e8a95b3d7f..48f08f06f368c 100644 --- a/packages/block-editor/src/components/block-card/index.js +++ b/packages/block-editor/src/components/block-card/index.js @@ -46,7 +46,7 @@ function BlockCard( { title, icon, description, blockType, className } ) { return (
- { parentNavBlockClientId && ( + { parentNavBlockClientId && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here.