Browse mode: Add an H2 inside the sidebar navigation screen title (#4…

…7241) * Add an H2 inside the screen title * remove the heading prop and use title instead. * add TagName constant * Move the "add new button" to a new action prop. * Rename action to actions
WordPress · Jan 25, 2023 · 98ce5c5 · 98ce5c5
1 parent 4bdaa72
commit 98ce5c5
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 22 deletions.
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalHStack as HStack,
-} from '@wordpress/components';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { useEntityRecords } from '@wordpress/core-data';
@@ -119,21 +116,17 @@ export default function SidebarNavigationScreenTemplates( {
 		<SidebarNavigationScreen
 			path={ config[ postType ].path }
 			parentTitle={ __( 'Design' ) }
-			title={
-				<HStack justify="space-between">
-					<div style={ { flexShrink: 0 } }>
-						{ config[ postType ].labels.title }
-					</div>
-					{ ! isMobileViewport && (
-						<AddNewTemplate
-							templateType={ postType }
-							toggleProps={ {
-								className:
-									'edit-site-sidebar-navigation-screen-templates__add-button',
-							} }
-						/>
-					) }
-				</HStack>
+			title={ config[ postType ].labels.title }
+			actions={
+				! isMobileViewport && (
+					<AddNewTemplate
+						templateType={ postType }
+						toggleProps={ {
+							className:
+								'edit-site-sidebar-navigation-screen-templates__add-button',
+						} }
+					/>
+				)
 			}
 			content={
 				<>

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -14,6 +14,7 @@ export default function SidebarNavigationScreen( {
 	path,
 	parentTitle,
 	title,
+	actions,
 	content,
 } ) {
 	return (
@@ -40,10 +41,10 @@ export default function SidebarNavigationScreen( {
 					) : (
 						<div className="edit-site-sidebar-navigation-screen__icon-placeholder" />
 					) }
-
-					<div className="edit-site-sidebar-navigation-screen__title">
+					<h2 className="edit-site-sidebar-navigation-screen__title">
 						{ title }
-					</div>
+					</h2>
+					{ actions }
 				</HStack>
 
 				<nav className="edit-site-sidebar-navigation-screen__content">

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -24,6 +24,8 @@
 	font-size: calc(1.56 * 13px);
 	font-weight: 500;
 	flex-grow: 1;
+	color: $white;
+	margin: 0;
 }
 
 .edit-site-sidebar-navigation-screen__back {