From 4381c2a9c822a611e4df29ce79821bfef8b819c4 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 11 Sep 2023 17:06:43 -0400
Subject: [PATCH 1/3] Add Edit children, remove pencil

---
 packages/edit-site/src/components/sidebar-button/index.js  | 4 +++-
 .../components/sidebar-navigation-screen-template/index.js | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
index 9da8492c37c799..d83e56b843256f 100644
--- a/packages/edit-site/src/components/sidebar-button/index.js
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -16,6 +16,8 @@ export default function SidebarButton( props ) {
 				'edit-site-sidebar-button',
 				props.className
 			) }
-		/>
+		>
+			{ props.children }
+		</Button>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
index fd60d0a509ace2..be281a25c8b386 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-template/index.js
@@ -3,7 +3,6 @@
  */
 import { __, _x } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { pencil } from '@wordpress/icons';
 import {
 	__experimentalUseNavigator as useNavigator,
 	Icon,
@@ -114,8 +113,10 @@ export default function SidebarNavigationScreenTemplate() {
 					<SidebarButton
 						onClick={ () => setCanvasMode( 'edit' ) }
 						label={ __( 'Edit' ) }
-						icon={ pencil }
-					/>
+						className="edit-site-sidebar-button--primary"
+					>
+						{ __( 'Edit' ) }
+					</SidebarButton>
 				</>
 			}
 			description={ description }

From d7c9874e1b9014c2c2dc3329b7c136d28ab5170d Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 11 Sep 2023 17:07:03 -0400
Subject: [PATCH 2/3] Add styling for edit button

---
 .../src/components/sidebar-button/style.scss    | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
index 5135f97869bb8b..e9e1c3f0d2f26c 100644
--- a/packages/edit-site/src/components/sidebar-button/style.scss
+++ b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -1,4 +1,5 @@
-.edit-site-sidebar-button {
+.edit-site-sidebar-button,
+.edit-site-sidebar-button--primary {
 	color: $gray-200;
 	flex-shrink: 0;
 
@@ -22,3 +23,17 @@
 		color: $gray-100;
 	}
 }
+
+.edit-site-sidebar-button--primary {
+	background: $gray-800;
+	color: $gray-100;
+
+	&:hover,
+	&:focus-visible,
+	&:focus,
+	&:not([aria-disabled="true"]):active,
+	&[aria-expanded="true"] {
+		background: $gray-700;
+		color: $white;
+	}
+}

From 6ac33bff8d79a93afd63b3ba6aa072757551c3e9 Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Mon, 11 Sep 2023 17:07:27 -0400
Subject: [PATCH 3/3] Clean title and actions with HStack

---
 .../components/sidebar-navigation-screen/index.js   | 13 +++++++++----
 .../components/sidebar-navigation-screen/style.scss |  6 +-----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
index f8824332f51528..8766511f75a66a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -66,8 +66,8 @@ export default function SidebarNavigationScreen( {
 				justify="flex-start"
 			>
 				<HStack
-					spacing={ 4 }
-					alignment="flex-start"
+					spacing={ 2 }
+					alignment="center"
 					className="edit-site-sidebar-navigation-screen__title-icon"
 				>
 					{ ! isRoot && (
@@ -118,9 +118,14 @@ export default function SidebarNavigationScreen( {
 							  ) }
 					</Heading>
 					{ actions && (
-						<div className="edit-site-sidebar-navigation-screen__actions">
+						<HStack
+							spacing={ 2 }
+							alignment="center"
+							justify="end"
+							className="edit-site-sidebar-navigation-screen__actions"
+						>
 							{ actions }
-						</div>
+						</HStack>
 					) }
 				</HStack>
 				{ meta && (
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
index 974a0e70c4cf6a..30b11bbf965905 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -67,15 +67,11 @@
 
 .edit-site-sidebar-navigation-screen__title {
 	flex-grow: 1;
-	padding: $grid-unit-15 * 0.5 0 0 0;
+	flex-shrink: 0;
 	overflow: hidden;
 	overflow-wrap: break-word;
 }
 
-.edit-site-sidebar-navigation-screen__actions {
-	flex-shrink: 0;
-}
-
 .edit-site-sidebar-navigation-screen__content .edit-site-global-styles-style-variations-container {
 	.edit-site-global-styles-variations_item-preview {
 		border: $gray-900 $border-width solid;