Implement initial styling of navigation menu screen (#21314)

* Implement initial styling of navigation menu screen * Use sentence case for title * Adjust sizing of panels * Update packages/edit-navigation/src/components/menu-editor/index.js Co-authored-by: Robert Anderson <robert@noisysocks.com>
WordPress · Apr 2, 2020 · 963998e · 963998e
1 parent 1059270
commit 963998e
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 37 deletions.
diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -25,6 +25,7 @@ export default function Layout( { blockEditorSettings } ) {
 						{ /* <Notices /> */ }
 						<Popover.Slot name="block-toolbar" />
 						<TabPanel
+							className="edit-navigation-layout__tab-panel"
 							tabs={ [
 								{
 									name: 'menus',

diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
@@ -0,0 +1,8 @@
+.edit-navigation-layout__tab-panel {
+	// Matches the padding-left applied by default to the `#wpcontent` element.
+	margin-right: 20px;
+
+	.components-tab-panel__tabs {
+		margin-bottom: 10px;
+	}
+}
diff --git a/packages/edit-navigation/src/components/menu-editor/index.js b/packages/edit-navigation/src/components/menu-editor/index.js
@@ -10,7 +10,7 @@ import {
 	__experimentalBlockNavigationList,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
-import { Button } from '@wordpress/components';
+import { Panel, PanelBody, Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -23,9 +23,7 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 	return (
 		<div className="edit-navigation-menu-editor">
 			<BlockEditorKeyboardShortcuts.Register />
-			<Button isPrimary onClick={ saveBlocks }>
-				{ __( 'Save' ) }
-			</Button>
+
 			<BlockEditorProvider
 				value={ blocks }
 				onInput={ ( updatedBlocks ) => setBlocks( updatedBlocks ) }
@@ -35,24 +33,35 @@ export default function MenuEditor( { menuId, blockEditorSettings } ) {
 					templateLock: 'all',
 				} }
 			>
-				<div className="edit-navigation-menu-editor__panel">
-					{ !! blocks.length && (
-						<__experimentalBlockNavigationList
-							blocks={ blocks }
-							selectedBlockClientId={ blocks[ 0 ].clientId }
-							selectBlock={ () => {} }
-							showNestedBlocks
-							showAppender
-						/>
-					) }
-				</div>
-				<div className="edit-navigation-menu-editor__panel">
-					<WritingFlow>
-						<ObserveTyping>
-							<BlockList />
-						</ObserveTyping>
-					</WritingFlow>
-				</div>
+				<Panel className="edit-navigation-menu-editor__panel">
+					<PanelBody title={ __( 'Navigation structure' ) }>
+						{ !! blocks.length && (
+							<__experimentalBlockNavigationList
+								blocks={ blocks }
+								selectedBlockClientId={ blocks[ 0 ].clientId }
+								selectBlock={ () => {} }
+								showNestedBlocks
+								showAppender
+							/>
+						) }
+					</PanelBody>
+				</Panel>
+				<Panel
+					header={
+						<Button isPrimary onClick={ saveBlocks }>
+							{ __( 'Save navigation' ) }
+						</Button>
+					}
+					className="edit-navigation-menu-editor__panel"
+				>
+					<PanelBody title={ __( 'Navigation menu' ) }>
+						<WritingFlow>
+							<ObserveTyping>
+								<BlockList />
+							</ObserveTyping>
+						</WritingFlow>
+					</PanelBody>
+				</Panel>
 			</BlockEditorProvider>
 		</div>
 	);

diff --git a/packages/edit-navigation/src/components/menu-editor/style.scss b/packages/edit-navigation/src/components/menu-editor/style.scss
@@ -1,8 +1,5 @@
 .edit-navigation-menu-editor {
-	border: 1px solid #000;
-}
-
-.edit-navigation-menu-editor__panel {
-	border: 1px solid #000;
-	padding: 10px;
+	display: grid;
+	grid-template-columns: 280px 1fr;
+	grid-column-gap: 10px;
 }
diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js
@@ -3,7 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import { Spinner, SelectControl } from '@wordpress/components';
+import { Card, CardBody, Spinner, SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -28,14 +28,21 @@ export default function MenusEditor( { blockEditorSettings } ) {
 
 	return (
 		<>
-			<SelectControl
-				label={ __( 'Select navigation to edit:' ) }
-				options={ menus.map( ( menu ) => ( {
-					value: menu.id,
-					label: menu.name,
-				} ) ) }
-				onChange={ ( selectedMenuId ) => setMenuId( selectedMenuId ) }
-			/>
+			<Card className="edit-navigation-menus-editor__menu-selection-card">
+				<CardBody>
+					<SelectControl
+						className="edit-navigation-menus-editor__menu-select-control"
+						label={ __( 'Select navigation to edit:' ) }
+						options={ menus.map( ( menu ) => ( {
+							value: menu.id,
+							label: menu.name,
+						} ) ) }
+						onChange={ ( selectedMenuId ) =>
+							setMenuId( selectedMenuId )
+						}
+					/>
+				</CardBody>
+			</Card>
 			{ !! menuId && (
 				<MenuEditor
 					menuId={ menuId }

diff --git a/packages/edit-navigation/src/components/menus-editor/style.scss b/packages/edit-navigation/src/components/menus-editor/style.scss
@@ -0,0 +1,16 @@
+.edit-navigation-menus-editor__menu-selection-card {
+	margin-bottom: 10px;
+}
+
+.edit-navigation-menus-editor__menu-select-control {
+	.components-base-control__field {
+		display: flex;
+		flex-direction: row;
+		align-items: baseline;
+		margin-bottom: 0;
+	}
+
+	.components-base-control__label {
+		margin-right: 1ch;
+	}
+}
diff --git a/packages/edit-navigation/src/style.scss b/packages/edit-navigation/src/style.scss
@@ -1 +1,3 @@
+@import "./components/layout/style.scss";
 @import "./components/menu-editor/style.scss";
+@import "./components/menus-editor/style.scss";