From 6b600e855c7441f5bd69b5a00b59b024ebf223f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 2 Jun 2020 14:57:36 +0200
Subject: [PATCH 1/6] Use Card instead of Panel for BlockEditorPanel

---
 .../menu-editor/block-editor-panel.js         | 19 ++++++++++++++-----
 .../src/components/menu-editor/style.scss     |  7 ++++---
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
index 144df87c34df92..67a6a932d95997 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
@@ -14,7 +14,13 @@ import {
 	WritingFlow,
 } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
-import { Button, Panel, PanelBody, Popover } from '@wordpress/components';
+import {
+	Button,
+	Card,
+	CardHeader,
+	CardBody,
+	Popover,
+} from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 
@@ -59,8 +65,11 @@ export default function BlockEditorPanel( {
 	}, [ rootBlockId ] );
 
 	return (
-		<Panel className="edit-navigation-menu-editor__block-editor-panel">
-			<PanelBody title={ __( 'Navigation menu' ) }>
+		<Card className="edit-navigation-menu-editor__block-editor-panel">
+			<CardHeader className="edit-navigation-menu-editor__block-editor-panel-header">
+				{ __( 'Navigation menu' ) }
+			</CardHeader>
+			<CardBody>
 				<div className="components-panel__header-actions">
 					<Button isPrimary onClick={ saveBlocks }>
 						{ __( 'Save navigation' ) }
@@ -89,7 +98,7 @@ export default function BlockEditorPanel( {
 						onDelete={ onDeleteMenu }
 					/>
 				</div>
-			</PanelBody>
-		</Panel>
+			</CardBody>
+		</Card>
 	);
 }
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
index ae2c8cab11ad50..50353e12347e18 100644
--- a/packages/edit-navigation/src/components/menu-editor/style.scss
+++ b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -71,15 +71,16 @@
 
 	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
 	-ms-grid-row-align: start;
+
+	.edit-navigation-menu-editor__block-editor-panel-header {
+		font-weight: bold;
+	}
 }
 
 .components-panel__header-actions {
-	margin-top: $grid-unit-20;
-	padding-bottom: $grid-unit-20;
 	margin-bottom: $grid-unit-60;
 	width: 100%;
 	text-align: right;
-	border-bottom: 1px solid $light-gray-300;
 }
 
 .components-panel__footer-actions {

From c1230af3d78da12b6ffdc898504d46c287b5f3f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Tue, 2 Jun 2020 15:04:45 +0200
Subject: [PATCH 2/6] Rename BlockEditorPanel to BlockEditorArea

---
 .../{block-editor-panel.js => block-editor-area.js}         | 2 +-
 .../edit-navigation/src/components/menu-editor/index.js     | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/edit-navigation/src/components/menu-editor/{block-editor-panel.js => block-editor-area.js} (98%)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
similarity index 98%
rename from packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
rename to packages/edit-navigation/src/components/menu-editor/block-editor-area.js
index 67a6a932d95997..f645a143be814d 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-panel.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
@@ -29,7 +29,7 @@ import { __ } from '@wordpress/i18n';
  */
 import DeleteMenuButton from '../delete-menu-button';
 
-export default function BlockEditorPanel( {
+export default function BlockEditorArea( {
 	onDeleteMenu,
 	menuId,
 	saveBlocks,
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
index 77416a699009f5..ddf5e22732ac72 100644
--- a/packages/edit-navigation/src/components/menu-editor/index.js
+++ b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -14,7 +14,7 @@ import { useMemo } from '@wordpress/element';
 import useMenuItems from './use-menu-items';
 import useNavigationBlocks from './use-navigation-blocks';
 import MenuEditorShortcuts from './shortcuts';
-import BlockEditorPanel from './block-editor-panel';
+import BlockEditorArea from './block-editor-area';
 import NavigationStructureArea from './navigation-structure-area';
 
 export default function MenuEditor( {
@@ -60,8 +60,8 @@ export default function MenuEditor( {
 					blocks={ blocks }
 					initialOpen={ isLargeViewport }
 				/>
-				<BlockEditorPanel
-					saveBlocks={ saveMenuItems }
+				<BlockEditorArea
+					saveBlocks={ eventuallySaveMenuItems }
 					menuId={ menuId }
 					onDeleteMenu={ onDeleteMenu }
 				/>

From e8f5e443d0682661cf7426d9d25356ca8f66e6cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 3 Jun 2020 13:35:04 +0200
Subject: [PATCH 3/6] Move the save and delete buttons to the header

---
 .../menu-editor/block-editor-area.js          | 28 +++++++++++--------
 .../src/components/menu-editor/style.scss     | 14 ++++++++++
 2 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
index f645a143be814d..47c746dc7896f0 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
@@ -67,14 +67,24 @@ export default function BlockEditorArea( {
 	return (
 		<Card className="edit-navigation-menu-editor__block-editor-panel">
 			<CardHeader className="edit-navigation-menu-editor__block-editor-panel-header">
-				{ __( 'Navigation menu' ) }
+				<div className="edit-navigation-menu-editor__block-editor-panel-header-text">
+					{ __( 'Navigation menu' ) }
+				</div>
+
+				<DeleteMenuButton
+					className="edit-navigation-menu-editor__block-editor-panel-action"
+					menuId={ menuId }
+					onDelete={ onDeleteMenu }
+				/>
+				<Button
+					className="edit-navigation-menu-editor__block-editor-panel-action"
+					isPrimary
+					onClick={ saveBlocks }
+				>
+					{ __( 'Save navigation' ) }
+				</Button>
 			</CardHeader>
 			<CardBody>
-				<div className="components-panel__header-actions">
-					<Button isPrimary onClick={ saveBlocks }>
-						{ __( 'Save navigation' ) }
-					</Button>
-				</div>
 				<NavigableToolbar
 					className={ classnames(
 						'edit-navigation-menu-editor__block-editor-toolbar',
@@ -92,12 +102,6 @@ export default function BlockEditorArea( {
 						<BlockList />
 					</ObserveTyping>
 				</WritingFlow>
-				<div className="components-panel__footer-actions">
-					<DeleteMenuButton
-						menuId={ menuId }
-						onDelete={ onDeleteMenu }
-					/>
-				</div>
 			</CardBody>
 		</Card>
 	);
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
index 50353e12347e18..95b1125856db4a 100644
--- a/packages/edit-navigation/src/components/menu-editor/style.scss
+++ b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -73,7 +73,21 @@
 	-ms-grid-row-align: start;
 
 	.edit-navigation-menu-editor__block-editor-panel-header {
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+
+	.edit-navigation-menu-editor__block-editor-panel-header-text {
+		flex-grow: 1;
 		font-weight: bold;
+		flex-basis: 100%;
+		@include break-medium {
+			flex-basis: auto;
+		}
+	}
+	.edit-navigation-menu-editor__block-editor-panel-action {
+		margin-left: $grid-unit-20;
 	}
 }
 

From 5268af25a8ddbc7c531a3fb08299ddcd8a126fc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 3 Jun 2020 14:37:38 +0200
Subject: [PATCH 4/6] Move the delete button to the footer

---
 .../menu-editor/block-editor-area.js           | 18 ++++++++++++------
 .../src/components/menu-editor/style.scss      | 11 ++++-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
index 47c746dc7896f0..27a928c74b2ca9 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
@@ -19,6 +19,7 @@ import {
 	Card,
 	CardHeader,
 	CardBody,
+	CardFooter,
 	Popover,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
@@ -66,16 +67,11 @@ export default function BlockEditorArea( {
 
 	return (
 		<Card className="edit-navigation-menu-editor__block-editor-panel">
-			<CardHeader className="edit-navigation-menu-editor__block-editor-panel-header">
+			<CardHeader>
 				<div className="edit-navigation-menu-editor__block-editor-panel-header-text">
 					{ __( 'Navigation menu' ) }
 				</div>
 
-				<DeleteMenuButton
-					className="edit-navigation-menu-editor__block-editor-panel-action"
-					menuId={ menuId }
-					onDelete={ onDeleteMenu }
-				/>
 				<Button
 					className="edit-navigation-menu-editor__block-editor-panel-action"
 					isPrimary
@@ -103,6 +99,16 @@ export default function BlockEditorArea( {
 					</ObserveTyping>
 				</WritingFlow>
 			</CardBody>
+			<CardFooter>
+				<DeleteMenuButton menuId={ menuId } onDelete={ onDeleteMenu } />
+				<Button
+					className="edit-navigation-menu-editor__block-editor-panel-action"
+					isPrimary
+					onClick={ saveBlocks }
+				>
+					{ __( 'Save navigation' ) }
+				</Button>
+			</CardFooter>
 		</Card>
 	);
 }
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
index 95b1125856db4a..1df6ad1117f9f2 100644
--- a/packages/edit-navigation/src/components/menu-editor/style.scss
+++ b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -72,21 +72,18 @@
 	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
 	-ms-grid-row-align: start;
 
-	.edit-navigation-menu-editor__block-editor-panel-header {
+	.components-card__footer,
+	.components-card__header {
 		display: flex;
 		align-items: center;
-		flex-wrap: wrap;
+		justify-content: space-between;
 	}
 
 	.edit-navigation-menu-editor__block-editor-panel-header-text {
 		flex-grow: 1;
 		font-weight: bold;
-		flex-basis: 100%;
-		@include break-medium {
-			flex-basis: auto;
-		}
 	}
-	.edit-navigation-menu-editor__block-editor-panel-action {
+	.edit-navigation-menu-editor__action {
 		margin-left: $grid-unit-20;
 	}
 }

From 6dbde96aba4a1610023492dc53df8fc7a88da1cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 3 Jun 2020 14:39:03 +0200
Subject: [PATCH 5/6] Tidy up class names

---
 .../components/menu-editor/block-editor-area.js  | 16 ++++------------
 .../src/components/menu-editor/style.scss        | 10 ++--------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
index 27a928c74b2ca9..c276d279051f01 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
@@ -66,17 +66,13 @@ export default function BlockEditorArea( {
 	}, [ rootBlockId ] );
 
 	return (
-		<Card className="edit-navigation-menu-editor__block-editor-panel">
+		<Card className="edit-navigation-menu-editor__block-editor-area">
 			<CardHeader>
-				<div className="edit-navigation-menu-editor__block-editor-panel-header-text">
+				<div className="edit-navigation-menu-editor__block-editor-area-header-text">
 					{ __( 'Navigation menu' ) }
 				</div>
 
-				<Button
-					className="edit-navigation-menu-editor__block-editor-panel-action"
-					isPrimary
-					onClick={ saveBlocks }
-				>
+				<Button isPrimary onClick={ saveBlocks }>
 					{ __( 'Save navigation' ) }
 				</Button>
 			</CardHeader>
@@ -101,11 +97,7 @@ export default function BlockEditorArea( {
 			</CardBody>
 			<CardFooter>
 				<DeleteMenuButton menuId={ menuId } onDelete={ onDeleteMenu } />
-				<Button
-					className="edit-navigation-menu-editor__block-editor-panel-action"
-					isPrimary
-					onClick={ saveBlocks }
-				>
+				<Button isPrimary onClick={ saveBlocks }>
 					{ __( 'Save navigation' ) }
 				</Button>
 			</CardFooter>
diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
index 1df6ad1117f9f2..0e6bfa69a33e1a 100644
--- a/packages/edit-navigation/src/components/menu-editor/style.scss
+++ b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -62,16 +62,13 @@
 	font-weight: bold;
 }
 
-.edit-navigation-menu-editor__block-editor-panel {
+.edit-navigation-menu-editor__block-editor-area {
 	@include break-medium {
 		// IE11 requires the column to be explicitly declared.
 		// Only shift this into the second column on desktop.
 		grid-column: 2;
 	}
 
-	// Make panels collapsible in IE. The IE analogue of align-items: self-start;.
-	-ms-grid-row-align: start;
-
 	.components-card__footer,
 	.components-card__header {
 		display: flex;
@@ -79,13 +76,10 @@
 		justify-content: space-between;
 	}
 
-	.edit-navigation-menu-editor__block-editor-panel-header-text {
+	.edit-navigation-menu-editor__block-editor-area-header-text {
 		flex-grow: 1;
 		font-weight: bold;
 	}
-	.edit-navigation-menu-editor__action {
-		margin-left: $grid-unit-20;
-	}
 }
 
 .components-panel__header-actions {

From e5a625e339df5789836b125ffebc65c2729aee2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adam=20Zieli=C5=84ski?= <adam@adamziel.com>
Date: Wed, 3 Jun 2020 16:54:35 +0200
Subject: [PATCH 6/6] Remove the second save button (from the footer)

---
 .../src/components/menu-editor/block-editor-area.js            | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
index c276d279051f01..9c06ba2c8776e9 100644
--- a/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
+++ b/packages/edit-navigation/src/components/menu-editor/block-editor-area.js
@@ -97,9 +97,6 @@ export default function BlockEditorArea( {
 			</CardBody>
 			<CardFooter>
 				<DeleteMenuButton menuId={ menuId } onDelete={ onDeleteMenu } />
-				<Button isPrimary onClick={ saveBlocks }>
-					{ __( 'Save navigation' ) }
-				</Button>
 			</CardFooter>
 		</Card>
 	);