diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 65ff0d13cac0d..d50c692b6b9b0 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -549,6 +549,144 @@ function Navigation( {
} );
}, [ clientId, ref ] );
+ const isResponsive = 'never' !== overlayMenu;
+
+ const overlayMenuPreviewClasses = classnames(
+ 'wp-block-navigation__overlay-menu-preview',
+ { open: overlayMenuPreview }
+ );
+
+ const stylingInspectorControls = (
+
+ { hasSubmenuIndicatorSetting && (
+
+ { isResponsive && (
+
+ ) }
+ { overlayMenuPreview && (
+
+ setAttributes( { hasIcon: value } )
+ }
+ checked={ hasIcon }
+ />
+ ) }
+ { __( 'Overlay Menu' ) }
+
+ setAttributes( { overlayMenu: value } )
+ }
+ isBlock
+ hideLabelFromVision
+ >
+
+
+
+
+ { hasSubmenus && (
+ <>
+ { __( 'Submenus' ) }
+ {
+ setAttributes( {
+ openSubmenusOnClick: value,
+ ...( value && {
+ showSubmenuIcon: true,
+ } ), // Make sure arrows are shown when we toggle this on.
+ } );
+ } }
+ label={ __( 'Open on click' ) }
+ />
+
+ {
+ setAttributes( {
+ showSubmenuIcon: value,
+ } );
+ } }
+ disabled={ attributes.openSubmenusOnClick }
+ label={ __( 'Show arrow' ) }
+ />
+ >
+ ) }
+
+ ) }
+ { hasColorSettings && (
+
+ { enableContrastChecking && (
+ <>
+
+
+ >
+ ) }
+
+ ) }
+
+ );
+
// If the block has inner blocks, but no menu id, then these blocks are either:
// - inserted via a pattern.
// - inserted directly via Code View (or otherwise).
@@ -559,6 +697,7 @@ function Navigation( {
if ( hasUnsavedBlocks ) {
return (
+ { stylingInspectorControls }
@@ -668,142 +800,7 @@ function Navigation( {
) }
-
- { hasSubmenuIndicatorSetting && (
-
- { isResponsive && (
-
- ) }
- { overlayMenuPreview && (
-
- setAttributes( { hasIcon: value } )
- }
- checked={ hasIcon }
- />
- ) }
- { __( 'Overlay Menu' ) }
-
- setAttributes( { overlayMenu: value } )
- }
- isBlock
- hideLabelFromVision
- >
-
-
-
-
- { hasSubmenus && (
- <>
- { __( 'Submenus' ) }
- {
- setAttributes( {
- openSubmenusOnClick: value,
- ...( value && {
- showSubmenuIcon: true,
- } ), // Make sure arrows are shown when we toggle this on.
- } );
- } }
- label={ __( 'Open on click' ) }
- />
-
- {
- setAttributes( {
- showSubmenuIcon: value,
- } );
- } }
- disabled={
- attributes.openSubmenusOnClick
- }
- label={ __( 'Show arrow' ) }
- />
- >
- ) }
-
- ) }
- { hasColorSettings && (
-
- { enableContrastChecking && (
- <>
-
-
- >
- ) }
-
- ) }
-
+ { stylingInspectorControls }
{ isEntityAvailable && (
{ hasResolvedCanUserUpdateNavigationMenu &&