Update navigation screen topbar (#34166)

* Restore normal interface layout to the nav editor * Update header layout and styles * Make the heading match the widgets editor * Hide subtitle on mobile * Adjust spacing between topbar and editor area * Use boolean prop Co-authored-by: Kai Hao <kevin830726@gmail.com> Co-authored-by: Kai Hao <kevin830726@gmail.com>
WordPress · Aug 23, 2021 · cfc5d8b · cfc5d8b
1 parent c322dff
commit cfc5d8b
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 66 deletions.
diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
@@ -3,7 +3,12 @@
 	border: $border-width solid $gray-900;
 	border-radius: $radius-block-ui;
 	max-width: $navigation-editor-width;
-	margin: auto;
+	margin: $grid-unit-40 auto 0 auto;
+
+	@include break-medium() {
+		// Provide space for the floating block toolbar.
+		margin-top: $grid-unit-50 * 2;
+	}
 
 	.editor-styles-wrapper {
 		padding: 0;

diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
@@ -38,14 +38,12 @@ export default function Header( {
 
 	return (
 		<div className="edit-navigation-header">
-			<div className="edit-navigation-header__title-subtitle">
-				<h1 className="edit-navigation-header__title">
-					{ __( 'Navigation' ) }
-				</h1>
-				<h2 className="edit-navigation-header__subtitle">
-					{ isMenuSelected && actionHeaderText }
-				</h2>
-			</div>
+			<h1 className="edit-navigation-header__title">
+				{ __( 'Navigation' ) }
+			</h1>
+			<h2 className="edit-navigation-header__subtitle">
+				{ isMenuSelected && actionHeaderText }
+			</h2>
 			{ isMenuSelected && (
 				<div className="edit-navigation-header__actions">
 					<DropdownMenu

diff --git a/packages/edit-navigation/src/components/header/style.scss b/packages/edit-navigation/src/components/header/style.scss
@@ -1,25 +1,26 @@
 .edit-navigation-header {
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
 	padding: $grid-unit-15 $grid-unit-30 $grid-unit-15 20px;
 }
 
-.edit-navigation-header__title-subtitle {
-	flex-grow: 1;
-}
-
 .edit-navigation-header__title {
-	font-size: 23px;
-	font-weight: 400;
-	margin: 0;
-	padding: 7px 0 4px 0;
-	line-height: 1.3;
+	font-size: 20px;
+	padding: 0;
+	margin: 0 20px 0 0;
 }
 
 .edit-navigation-header__subtitle {
+	display: none;
 	margin: 0;
 	font-size: 15px;
 	font-weight: normal;
+
+	// Only display on larger screens.
+	@include break-small() {
+		display: block;
+	}
 }
 
 .edit-navigation-header__actions {

diff --git a/packages/edit-navigation/src/components/layout/index.js b/packages/edit-navigation/src/components/layout/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -13,7 +8,6 @@ import {
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 } from '@wordpress/block-editor';
 import { Popover, SlotFillProvider, Spinner } from '@wordpress/components';
-import { useViewportMatch } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useMemo, useState } from '@wordpress/element';
 import {
@@ -53,7 +47,6 @@ const interfaceLabels = {
 
 export default function Layout( { blockEditorSettings } ) {
 	const contentAreaRef = useBlockSelectionClearer();
-	const isLargeViewport = useViewportMatch( 'medium' );
 	const [ isMenuNameControlFocused, setIsMenuNameControlFocused ] = useState(
 		false
 	);
@@ -94,7 +87,6 @@ export default function Layout( { blockEditorSettings } ) {
 	useMenuNotifications( selectedMenuId );
 
 	const hasMenus = !! menus?.length;
-	const hasPermanentSidebar = isLargeViewport && isMenuSelected;
 
 	const isBlockEditorReady = !! (
 		hasMenus &&
@@ -133,9 +125,7 @@ export default function Layout( { blockEditorSettings } ) {
 						) }
 					>
 						<InterfaceSkeleton
-							className={ classnames( 'edit-navigation-layout', {
-								'has-permanent-sidebar': hasPermanentSidebar,
-							} ) }
+							className="edit-navigation-layout"
 							labels={ interfaceLabels }
 							header={
 								<Header
@@ -177,8 +167,7 @@ export default function Layout( { blockEditorSettings } ) {
 								</>
 							}
 							sidebar={
-								( hasPermanentSidebar ||
-									hasSidebarEnabled ) && (
+								hasSidebarEnabled && (
 									<ComplementaryArea.Slot scope="core/edit-navigation" />
 								)
 							}
@@ -190,7 +179,6 @@ export default function Layout( { blockEditorSettings } ) {
 								onSelectMenu={ selectMenu }
 								onDeleteMenu={ deleteMenu }
 								isMenuBeingDeleted={ isMenuBeingDeleted }
-								hasPermanentSidebar={ hasPermanentSidebar }
 							/>
 						) }
 					</IsMenuNameControlFocusedContext.Provider>

diff --git a/packages/edit-navigation/src/components/layout/style.scss b/packages/edit-navigation/src/components/layout/style.scss
@@ -34,45 +34,14 @@
 		// Reference element for the block popover position.
 		position: relative;
 
-		// The 10px match that of similar settings pages.
-		padding: $grid-unit-15 10px 10px 10px;
-
-		@include break-medium() {
-			// Provide space for the floating block toolbar.
-			padding-top: $navigation-editor-spacing-top;
-		}
-
 		// Ensure the entire layout is full-height, the background
 		// of the editing canvas needs to be full-height for block
 		// deselection to work.
 		flex-grow: 1;
 	}
 
-	.interface-interface-skeleton__header {
-		border-bottom-color: transparent;
-	}
-
-	// Force the sidebar to the right side of the screen on larger
-	// breakpoints.
-	&.has-permanent-sidebar .interface-interface-skeleton__sidebar {
-		position: fixed !important;
-		top: $grid-unit-40;
-		right: 0;
-		bottom: 0;
-		left: auto;
-
-		// Hide the toggle as the sidebar should be permanently open.
-		.edit-navigation-sidebar__panel-tabs > button {
-			display: none;
-		}
-	}
-
 	.edit-navigation-header {
 		background: $white;
-
-		@include break-medium() {
-			background: transparent;
-		}
 	}
 }
 

diff --git a/packages/edit-navigation/src/components/sidebar/index.js b/packages/edit-navigation/src/components/sidebar/index.js
@@ -13,6 +13,7 @@ import {
 	ComplementaryArea,
 	store as interfaceStore,
 } from '@wordpress/interface';
+import { useViewportMatch } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,8 +30,8 @@ export default function Sidebar( {
 	isMenuBeingDeleted,
 	onDeleteMenu,
 	onSelectMenu,
-	hasPermanentSidebar,
 } ) {
+	const isLargeViewport = useViewportMatch( 'medium' );
 	const { sidebar, hasBlockSelection, hasSidebarEnabled } = useSelect(
 		( select ) => {
 			const _sidebar = select(
@@ -79,10 +80,10 @@ export default function Sidebar( {
 			scope={ SIDEBAR_SCOPE }
 			identifier={ sidebarName }
 			icon={ cog }
-			isActiveByDefault={ hasPermanentSidebar }
+			isActiveByDefault={ isLargeViewport }
 			header={ <SidebarHeader sidebarName={ sidebarName } /> }
 			headerClassName="edit-navigation-sidebar__panel-tabs"
-			isPinnable={ ! hasPermanentSidebar }
+			isPinnable
 		>
 			{ sidebarName === SIDEBAR_MENU && (
 				<>