From 557df6dd462a59266b72190af7e3d7fda4a23fef Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 26 Jan 2023 09:18:56 -0600 Subject: [PATCH] Make the off-canvas navigation editor the default experience (#46995) * Move site editor nav menu sidebar to its own experimental flag * Remove experimental option for off canvas editor * Reword nav sidebar experiment label * Remove unused Fragment imports * Remove unused toggleProps in NavigationMenuSelector * Remove unused id in NavigationMenu * reverse the conditional * add explanatory comment * reset value if the experiment is off * Add comment about nav block specific code Co-authored-by: Ben Dwyer --- lib/experimental/editor-settings.php | 4 +- lib/experiments-page.php | 16 ++--- .../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 | 15 ++--- .../edit/navigation-menu-selector.js | 63 ++++++++++--------- .../src/navigation/edit/placeholder/index.js | 6 -- .../src/components/sidebar-edit-mode/index.js | 4 +- .../navigation-inspector.js | 5 +- .../navigation-menu.js | 15 ++--- 11 files changed, 62 insertions(+), 96 deletions(-) diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index b0c05544d6b19..88b6c2ac783ef 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -83,8 +83,8 @@ 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 09746caa559f2..14e589a6aee74 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -54,26 +54,26 @@ function gutenberg_initialize_experiments_settings() { ); add_settings_field( - 'gutenberg-off-canvas-navigation-editor', - __( 'Off canvas navigation editor ', 'gutenberg' ), + 'gutenberg-color-randomizer', + __( 'Color randomizer ', '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', + 'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ), + 'id' => 'gutenberg-color-randomizer', ) ); add_settings_field( - 'gutenberg-color-randomizer', - __( 'Color randomizer ', 'gutenberg' ), + 'gutenberg-site-editor-navigation-menu-sidebar', + __( 'Global navigation menu sidebar ', 'gutenberg' ), 'gutenberg_display_experiment_field', 'gutenberg-experiments', 'gutenberg_experiments_section', array( - 'label' => __( 'Test the Global Styles color randomizer; a utility that lets you mix the current color palette pseudo-randomly.', 'gutenberg' ), - 'id' => 'gutenberg-color-randomizer', + 'label' => __( 'Test a new global navigation menu sidebar in the site editor.', 'gutenberg' ), + 'id' => 'gutenberg-site-editor-navigation-menu-sidebar', ) ); diff --git a/packages/block-editor/src/components/block-card/index.js b/packages/block-editor/src/components/block-card/index.js index dab832861ae66..48f08f06f368c 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 && ( // This is only used by the Navigation block for now. It's not ideal having Navigation block specific code here. - ); - } - - return ( + const NavigationMenuSelectorDropdown = ( { ( { onClose } ) => ( @@ -247,6 +222,32 @@ function NavigationMenuSelector( { ) } ); + + const NavigationMenuSelectorButton = ( + + ); + + 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 NavigationMenuSelectorDropdown; } export default NavigationMenuSelector; 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', - } } />
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; } 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 89a66bd6c7359..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 @@ -2,7 +2,6 @@ * WordPress dependencies */ import { - __experimentalListView as ListView, __experimentalOffCanvasEditor as OffCanvasEditor, store as blockEditorStore, } from '@wordpress/block-editor'; @@ -32,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 @@ -50,13 +49,7 @@ export default function NavigationMenu( { innerBlocks, id } ) { } ); }, [ updateBlockListSettings, innerBlocks ] ); - if ( window?.__experimentalEnableOffCanvasNavigationEditor ) { - return ( - - ); - } - return ; + return ( + + ); }