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 }