From 45356c58b8b0da01a4cc2a67b91123a47393b7a1 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Mon, 16 Dec 2024 13:10:09 +0530
Subject: [PATCH 1/3] Navigation: Refactor display panel to use ToolsPanel

---
 .../src/navigation/edit/index.js              | 165 ++++++++++++------
 1 file changed, 113 insertions(+), 52 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index ae7dd60bd0c5ba..30b852a27ffef1 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -31,7 +31,8 @@ import { EntityProvider, store as coreStore } from '@wordpress/core-data';
 
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
-	PanelBody,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -72,6 +73,7 @@ import DeletedNavigationWarning from './deleted-navigation-warning';
 import AccessibleDescription from './accessible-description';
 import AccessibleMenuDescription from './accessible-menu-description';
 import { unlock } from '../../lock-unlock';
+import { useToolsPanelDropdownMenuProps } from '../../utils/hooks';
 
 function ColorTools( {
 	textColor,
@@ -583,13 +585,34 @@ function Navigation( {
 		`overlay-menu-preview`
 	);
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	const stylingInspectorControls = (
 		<>
 			<InspectorControls>
 				{ hasSubmenuIndicatorSetting && (
-					<PanelBody title={ __( 'Display' ) }>
+					<ToolsPanel
+						label={ __( 'Display' ) }
+						resetAll={ () => {
+							setAttributes( {
+								overlayMenu: 'mobile',
+								openSubmenusOnClick: false,
+								showSubmenuIcon: true,
+								hasIcon: true,
+								icon: 'handle',
+							} );
+						} }
+						dropdownMenuProps={ dropdownMenuProps }
+					>
 						{ isResponsive && (
-							<>
+							<ToolsPanelItem
+								hasValue={ () => overlayMenuPreview }
+								label={ __( 'Overlay menu controls' ) }
+								onDeselect={ () =>
+									setOverlayMenuPreview( false )
+								}
+								isShownByDefault
+							>
 								<Button
 									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
@@ -625,63 +648,101 @@ function Navigation( {
 										/>
 									) }
 								</div>
-							</>
+							</ToolsPanelItem>
 						) }
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+
+						<ToolsPanelItem
+							hasValue={ () => overlayMenu !== 'mobile' }
 							label={ __( 'Overlay Menu' ) }
-							aria-label={ __( 'Configure overlay menu' ) }
-							value={ overlayMenu }
-							help={ __(
-								'Collapses the navigation options in a menu icon opening an overlay.'
-							) }
-							onChange={ ( value ) =>
-								setAttributes( { overlayMenu: value } )
+							onDeselect={ () =>
+								setAttributes( { overlayMenu: 'mobile' } )
 							}
-							isBlock
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="never"
-								label={ __( 'Off' ) }
-							/>
-							<ToggleGroupControlOption
-								value="mobile"
-								label={ __( 'Mobile' ) }
-							/>
-							<ToggleGroupControlOption
-								value="always"
-								label={ __( 'Always' ) }
-							/>
-						</ToggleGroupControl>
+							<ToggleGroupControl
+								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Overlay Menu' ) }
+								aria-label={ __( 'Configure overlay menu' ) }
+								value={ overlayMenu }
+								help={ __(
+									'Collapses the navigation options in a menu icon opening an overlay.'
+								) }
+								onChange={ ( value ) =>
+									setAttributes( { overlayMenu: value } )
+								}
+								isBlock
+							>
+								<ToggleGroupControlOption
+									value="never"
+									label={ __( 'Off' ) }
+								/>
+								<ToggleGroupControlOption
+									value="mobile"
+									label={ __( 'Mobile' ) }
+								/>
+								<ToggleGroupControlOption
+									value="always"
+									label={ __( 'Always' ) }
+								/>
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+
 						{ hasSubmenus && (
 							<>
-								<h3>{ __( 'Submenus' ) }</h3>
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ openSubmenusOnClick }
-									onChange={ ( value ) => {
-										setAttributes( {
-											openSubmenusOnClick: value,
-											...( value && {
-												showSubmenuIcon: true,
-											} ), // Make sure arrows are shown when we toggle this on.
-										} );
-									} }
+								<ToolsPanelItem
+									hasValue={ () => openSubmenusOnClick }
 									label={ __( 'Open on click' ) }
-								/>
-
-								<ToggleControl
-									__nextHasNoMarginBottom
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
+									onDeselect={ () =>
 										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									disabled={ attributes.openSubmenusOnClick }
+											openSubmenusOnClick: false,
+											showSubmenuIcon: true,
+										} )
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+								</ToolsPanelItem>
+
+								<ToolsPanelItem
+									hasValue={ () => ! showSubmenuIcon }
 									label={ __( 'Show arrow' ) }
-								/>
+									onDeselect={ () =>
+										setAttributes( {
+											showSubmenuIcon: true,
+										} )
+									}
+									isDisabled={
+										attributes.openSubmenusOnClick
+									}
+									isShownByDefault
+								>
+									<ToggleControl
+										__nextHasNoMarginBottom
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</ToolsPanelItem>
 
 								{ submenuAccessibilityNotice && (
 									<div>
@@ -696,7 +757,7 @@ function Navigation( {
 								) }
 							</>
 						) }
-					</PanelBody>
+					</ToolsPanel>
 				) }
 			</InspectorControls>
 			<InspectorControls group="color">

From 286c74fe035fc78951a83060844e57e75c42f3f1 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Wed, 18 Dec 2024 17:19:59 +0530
Subject: [PATCH 2/3] Navigation: Add ToolsPanelItem in overlay-menu-preview

---
 .../src/navigation/edit/index.js              | 16 ++---
 .../navigation/edit/overlay-menu-preview.js   | 69 ++++++++++++-------
 2 files changed, 48 insertions(+), 37 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index 30b852a27ffef1..aa476fe88080ab 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -595,9 +595,9 @@ function Navigation( {
 						label={ __( 'Display' ) }
 						resetAll={ () => {
 							setAttributes( {
-								overlayMenu: 'mobile',
-								openSubmenusOnClick: false,
 								showSubmenuIcon: true,
+								openSubmenusOnClick: false,
+								overlayMenu: 'mobile',
 								hasIcon: true,
 								icon: 'handle',
 							} );
@@ -605,14 +605,7 @@ function Navigation( {
 						dropdownMenuProps={ dropdownMenuProps }
 					>
 						{ isResponsive && (
-							<ToolsPanelItem
-								hasValue={ () => overlayMenuPreview }
-								label={ __( 'Overlay menu controls' ) }
-								onDeselect={ () =>
-									setOverlayMenuPreview( false )
-								}
-								isShownByDefault
-							>
+							<>
 								<Button
 									__next40pxDefaultSize
 									className={ overlayMenuPreviewClasses }
@@ -648,7 +641,7 @@ function Navigation( {
 										/>
 									) }
 								</div>
-							</ToolsPanelItem>
+							</>
 						) }
 
 						<ToolsPanelItem
@@ -690,6 +683,7 @@ function Navigation( {
 
 						{ hasSubmenus && (
 							<>
+								<h3>{ __( 'Submenus' ) }</h3>
 								<ToolsPanelItem
 									hasValue={ () => openSubmenusOnClick }
 									label={ __( 'Open on click' ) }
diff --git a/packages/block-library/src/navigation/edit/overlay-menu-preview.js b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
index cdd4d6e3263c98..c73ba71c1afcbc 100644
--- a/packages/block-library/src/navigation/edit/overlay-menu-preview.js
+++ b/packages/block-library/src/navigation/edit/overlay-menu-preview.js
@@ -5,6 +5,7 @@ import {
 	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -16,36 +17,52 @@ import OverlayMenuIcon from './overlay-menu-icon';
 export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 	return (
 		<>
-			<ToggleControl
-				__nextHasNoMarginBottom
+			<ToolsPanelItem
 				label={ __( 'Show icon button' ) }
-				help={ __(
-					'Configure the visual appearance of the button that toggles the overlay menu.'
-				) }
-				onChange={ ( value ) => setAttributes( { hasIcon: value } ) }
-				checked={ hasIcon }
-			/>
+				isShownByDefault
+				hasValue={ () => ! hasIcon }
+				onDeselect={ () => setAttributes( { hasIcon: true } ) }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Show icon button' ) }
+					help={ __(
+						'Configure the visual appearance of the button that toggles the overlay menu.'
+					) }
+					onChange={ ( value ) =>
+						setAttributes( { hasIcon: value } )
+					}
+					checked={ hasIcon }
+				/>
+			</ToolsPanelItem>
 
-			<ToggleGroupControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
-				className="wp-block-navigation__overlay-menu-icon-toggle-group"
+			<ToolsPanelItem
 				label={ __( 'Icon' ) }
-				value={ icon }
-				onChange={ ( value ) => setAttributes( { icon: value } ) }
-				isBlock
+				isShownByDefault
+				hasValue={ () => icon !== 'handle' }
+				onDeselect={ () => setAttributes( { icon: 'handle' } ) }
 			>
-				<ToggleGroupControlOption
-					value="handle"
-					aria-label={ __( 'handle' ) }
-					label={ <OverlayMenuIcon icon="handle" /> }
-				/>
-				<ToggleGroupControlOption
-					value="menu"
-					aria-label={ __( 'menu' ) }
-					label={ <OverlayMenuIcon icon="menu" /> }
-				/>
-			</ToggleGroupControl>
+				<ToggleGroupControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					className="wp-block-navigation__overlay-menu-icon-toggle-group"
+					label={ __( 'Icon' ) }
+					value={ icon }
+					onChange={ ( value ) => setAttributes( { icon: value } ) }
+					isBlock
+				>
+					<ToggleGroupControlOption
+						value="handle"
+						aria-label={ __( 'handle' ) }
+						label={ <OverlayMenuIcon icon="handle" /> }
+					/>
+					<ToggleGroupControlOption
+						value="menu"
+						aria-label={ __( 'menu' ) }
+						label={ <OverlayMenuIcon icon="menu" /> }
+					/>
+				</ToggleGroupControl>
+			</ToolsPanelItem>
 		</>
 	);
 }

From f26224244850705916b8b9128afa62e08afe9a74 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 20 Dec 2024 12:04:57 +0530
Subject: [PATCH 3/3] Navigation: Improve Layout and Styling for Overlay Menu
 and Submenus

---
 .../src/navigation/edit/index.js              | 17 ++++++++++------
 .../block-library/src/navigation/editor.scss  | 20 +++++++++++++++----
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
index aa476fe88080ab..b1918ff201805b 100644
--- a/packages/block-library/src/navigation/edit/index.js
+++ b/packages/block-library/src/navigation/edit/index.js
@@ -631,16 +631,19 @@ function Navigation( {
 										</>
 									) }
 								</Button>
-								<div id={ overlayMenuPreviewId }>
-									{ overlayMenuPreview && (
+								{ overlayMenuPreview && (
+									<div
+										id={ overlayMenuPreviewId }
+										className="wp-block-navigation__overlay-menu-preview-controls"
+									>
 										<OverlayMenuPreview
 											setAttributes={ setAttributes }
 											hasIcon={ hasIcon }
 											icon={ icon }
 											hidden={ ! overlayMenuPreview }
 										/>
-									) }
-								</div>
+									</div>
+								) }
 							</>
 						) }
 
@@ -683,7 +686,9 @@ function Navigation( {
 
 						{ hasSubmenus && (
 							<>
-								<h3>{ __( 'Submenus' ) }</h3>
+								<h3 className="wp-block-navigation__submenu-header">
+									{ __( 'Submenus' ) }
+								</h3>
 								<ToolsPanelItem
 									hasValue={ () => openSubmenusOnClick }
 									label={ __( 'Open on click' ) }
@@ -739,7 +744,7 @@ function Navigation( {
 								</ToolsPanelItem>
 
 								{ submenuAccessibilityNotice && (
-									<div>
+									<div className="wp-block-navigation__submenu-accessibility-notice">
 										<Notice
 											spokenMessage={ null }
 											status="warning"
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 2f61a19be2b799..f547169101e953 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -569,7 +569,7 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	// Ref - https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	height: $grid-unit-40 * 2 !important;
 
-	margin-bottom: $grid-unit-15;
+	grid-column: span 2;
 
 	&.open {
 		box-shadow: inset 0 0 0 $border-width $gray-200;
@@ -637,7 +637,19 @@ body.editor-styles-wrapper .wp-block-navigation__responsive-container.is-menu-op
 	margin-left: 24px;
 }
 
-.wp-block-navigation__overlay-menu-icon-toggle-group {
-	// Counteract the margin added by the block inspector.
-	margin-bottom: $grid-unit-20;
+.editor-sidebar__panel .wp-block-navigation__submenu-header {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.wp-block-navigation__overlay-menu-preview-controls {
+	grid-column: span 2;
+
+	.components-tools-panel-item:first-child {
+		margin-bottom: 16px;
+	}
+}
+
+.wp-block-navigation__submenu-accessibility-notice {
+	grid-column: span 2;
 }