diff --git a/lib/experimental/editor-settings.php b/lib/experimental/editor-settings.php index 2b46a401d4b0e9..3849bdfe5f4d2a 100644 --- a/lib/experimental/editor-settings.php +++ b/lib/experimental/editor-settings.php @@ -83,3 +83,15 @@ function gutenberg_enable_zoomed_out_view() { } add_action( 'admin_init', 'gutenberg_enable_zoomed_out_view' ); + +/** + * Sets a global JS variable used to trigger the availability of zoomed out view. + */ +function gutenberg_enable_off_canvas_navigation_editor() { + $gutenberg_experiments = get_option( 'gutenberg-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' ); + } +} + +add_action( 'admin_init', 'gutenberg_enable_off_canvas_navigation_editor' ); diff --git a/lib/experiments-page.php b/lib/experiments-page.php index 3d09f05bd655c8..d925b77925cfdd 100644 --- a/lib/experiments-page.php +++ b/lib/experiments-page.php @@ -52,6 +52,17 @@ function gutenberg_initialize_experiments_settings() { 'id' => 'gutenberg-zoomed-out-view', ) ); + 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', 'gutenberg' ), + 'id' => 'gutenberg-off-canvas-navigation-editor', + ) + ); register_setting( 'gutenberg-experiments', 'gutenberg-experiments' diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index f5ba0d522bc297..c2cc65004a88b9 100644 --- a/packages/block-library/src/navigation/edit/index.js +++ b/packages/block-library/src/navigation/edit/index.js @@ -83,6 +83,9 @@ function Navigation( { hasColorSettings = true, customPlaceholder: CustomPlaceholder = null, } ) { + const isOffCanvasNavigationEditorEnabled = + window?.__experimentalEnableOffCanvasNavigationEditor === true; + const { openSubmenusOnClick, overlayMenu, @@ -658,7 +661,12 @@ function Navigation( { /* translators: %s: The name of a menu. */ actionLabel={ __( "Switch to '%s'" ) } /> - + { isOffCanvasNavigationEditorEnabled && ( + + ) } { stylingInspectorControls } @@ -832,7 +840,12 @@ function Navigation( { /* translators: %s: The name of a menu. */ actionLabel={ __( "Switch to '%s'" ) } /> - + { isOffCanvasNavigationEditorEnabled && ( + + ) } { stylingInspectorControls }