From c424499a8d88955e3c08d132c5bb9894f43016b6 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 28 Feb 2023 09:42:04 +0100
Subject: [PATCH 1/2] Site Editor: update the edit button

---
 .../sidebar-navigation-screen-navigation-item/index.js    | 8 ++++----
 .../sidebar-navigation-screen-template/index.js           | 8 ++++----
 .../src/components/sidebar-navigation-screen/style.scss   | 1 +
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
index a65e540a8ad75..c340f5c7c8616 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -9,6 +9,7 @@ import {
 } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
+import { pencil } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -44,12 +45,11 @@ export default function SidebarNavigationScreenNavigationItem() {
 			title={ post ? decodeEntities( post?.title?.rendered ) : null }
 			actions={
 				<Button
-					variant="primary"
 					className="edit-site-sidebar-navigation-screen__edit"
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={
 				post ? decodeEntities( post?.description?.rendered ) : null
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 2282c03a78151..40aebeedc67ad 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
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
 import { Button } from '@wordpress/components';
+import { pencil } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,12 +29,11 @@ export default function SidebarNavigationScreenTemplate() {
 			title={ getTitle() }
 			actions={
 				<Button
-					variant="primary"
 					className="edit-site-sidebar-navigation-screen__edit"
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={ description ? <p>{ description }</p> : undefined }
 		/>
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 3fbc7491ea027..6aa03f3492fea 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -32,6 +32,7 @@
 
 .edit-site-sidebar-navigation-screen__edit {
 	flex-shrink: 0;
+	color: inherit;
 }
 
 .edit-site-sidebar-navigation-screen__back {

From c28933d078e7f862dbc17ce58ea7da3bafcb3d9c Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 28 Feb 2023 12:47:02 +0100
Subject: [PATCH 2/2] Unify all sidebar buttons

---
 .../components/src/dropdown-menu/index.js     |  9 ++++---
 .../add-new-template/new-template-part.js     |  7 ++---
 .../src/components/sidebar-button/index.js    | 21 +++++++++++++++
 .../src/components/sidebar-button/style.scss  | 23 ++++++++++++++++
 .../index.js                                  |  9 +++----
 .../index.js                                  |  5 ++--
 .../index.js                                  |  4 +--
 .../style.scss                                |  5 ----
 .../sidebar-navigation-screen/index.js        |  7 +++--
 .../sidebar-navigation-screen/style.scss      | 26 -------------------
 packages/edit-site/src/style.scss             |  1 +
 11 files changed, 65 insertions(+), 52 deletions(-)
 create mode 100644 packages/edit-site/src/components/sidebar-button/index.js
 create mode 100644 packages/edit-site/src/components/sidebar-button/style.scss

diff --git a/packages/components/src/dropdown-menu/index.js b/packages/components/src/dropdown-menu/index.js
index 481d84a6589f4..481e87cd102b7 100644
--- a/packages/components/src/dropdown-menu/index.js
+++ b/packages/components/src/dropdown-menu/index.js
@@ -91,6 +91,9 @@ function DropdownMenu( dropdownMenuProps ) {
 						onToggle();
 					}
 				};
+				const { as: Toggle = Button, ...restToggleProps } =
+					toggleProps ?? {};
+
 				const mergedToggleProps = mergeProps(
 					{
 						className: classnames(
@@ -100,11 +103,11 @@ function DropdownMenu( dropdownMenuProps ) {
 							}
 						),
 					},
-					toggleProps
+					restToggleProps
 				);
 
 				return (
-					<Button
+					<Toggle
 						{ ...mergedToggleProps }
 						icon={ icon }
 						onClick={ ( event ) => {
@@ -126,7 +129,7 @@ function DropdownMenu( dropdownMenuProps ) {
 						showTooltip={ toggleProps?.showTooltip ?? true }
 					>
 						{ mergedToggleProps.children }
-					</Button>
+					</Toggle>
 				);
 			} }
 			renderContent={ ( props ) => {
diff --git a/packages/edit-site/src/components/add-new-template/new-template-part.js b/packages/edit-site/src/components/add-new-template/new-template-part.js
index 8c3aa84b11974..82e90f248b4f9 100644
--- a/packages/edit-site/src/components/add-new-template/new-template-part.js
+++ b/packages/edit-site/src/components/add-new-template/new-template-part.js
@@ -86,11 +86,12 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
@@ -98,7 +99,7 @@ export default function NewTemplatePart( {
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
-			</Button>
+			</Toggle>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => setIsModalOpen( false ) }
diff --git a/packages/edit-site/src/components/sidebar-button/index.js b/packages/edit-site/src/components/sidebar-button/index.js
new file mode 100644
index 0000000000000..9da8492c37c79
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-button/index.js
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button } from '@wordpress/components';
+
+export default function SidebarButton( props ) {
+	return (
+		<Button
+			{ ...props }
+			className={ classnames(
+				'edit-site-sidebar-button',
+				props.className
+			) }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/sidebar-button/style.scss b/packages/edit-site/src/components/sidebar-button/style.scss
new file mode 100644
index 0000000000000..a13677ffed8de
--- /dev/null
+++ b/packages/edit-site/src/components/sidebar-button/style.scss
@@ -0,0 +1,23 @@
+.edit-site-sidebar-button {
+	color: $gray-200;
+	flex-shrink: 0;
+
+	// Focus (resets default button focus and use focus-visible).
+	&:focus:not(:disabled) {
+		box-shadow: none;
+		outline: none;
+	}
+	&:focus-visible:not(:disabled) {
+		box-shadow:
+			0 0 0 var(--wp-admin-border-width-focus)
+			var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	&:hover,
+	&:focus-visible,
+	&:focus,
+	&:not([aria-disabled="true"]):active {
+		color: $white;
+	}
+}
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
index c340f5c7c8616..f8ce406a45015 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js
@@ -3,10 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	Button,
-	__experimentalUseNavigator as useNavigator,
-} from '@wordpress/components';
+import { __experimentalUseNavigator as useNavigator } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { pencil } from '@wordpress/icons';
@@ -17,6 +14,7 @@ import { pencil } from '@wordpress/icons';
 import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreenNavigationItem() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
@@ -44,8 +42,7 @@ export default function SidebarNavigationScreenNavigationItem() {
 		<SidebarNavigationScreen
 			title={ post ? decodeEntities( post?.title?.rendered ) : null }
 			actions={
-				<Button
-					className="edit-site-sidebar-navigation-screen__edit"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
 					label={ __( 'Edit' ) }
 					icon={ pencil }
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 40aebeedc67ad..86ffc29a9d8ac 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 { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
 import { pencil } from '@wordpress/icons';
 
 /**
@@ -13,6 +12,7 @@ import SidebarNavigationScreen from '../sidebar-navigation-screen';
 import useEditedEntityRecord from '../use-edited-entity-record';
 import { unlock } from '../../private-apis';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreenTemplate() {
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
@@ -28,8 +28,7 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ getTitle() }
 			actions={
-				<Button
-					className="edit-site-sidebar-navigation-screen__edit"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
 					label={ __( 'Edit' ) }
 					icon={ pencil }
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
index 28e31727d9b53..30bfd6aad532f 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/index.js
@@ -20,6 +20,7 @@ import { useLink } from '../routes/link';
 import SidebarNavigationItem from '../sidebar-navigation-item';
 import AddNewTemplate from '../add-new-template';
 import { store as editSiteStore } from '../../store';
+import SidebarButton from '../sidebar-button';
 
 const config = {
 	wp_template: {
@@ -84,8 +85,7 @@ export default function SidebarNavigationScreenTemplates() {
 					<AddNewTemplate
 						templateType={ postType }
 						toggleProps={ {
-							className:
-								'edit-site-sidebar-navigation-screen-templates__add-button',
+							as: SidebarButton,
 						} }
 					/>
 				)
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
index 174c7210e8403..432774f903e46 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-templates/style.scss
@@ -2,8 +2,3 @@
 	/* Overrides the margin that comes from the Item component */
 	margin-top: $grid-unit-20 !important;
 }
-
-.edit-site-sidebar-navigation-screen-templates__add-button {
-	/* Overrides the color for all states of the button */
-	color: inherit !important;
-}
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 261fd6b91cf56..3632d3d17eb42 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js
@@ -5,7 +5,6 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalVStack as VStack,
 	__experimentalNavigatorToParentButton as NavigatorToParentButton,
-	Button,
 } from '@wordpress/components';
 import { isRTL, __ } from '@wordpress/i18n';
 import { chevronRight, chevronLeft } from '@wordpress/icons';
@@ -16,6 +15,7 @@ import { useSelect } from '@wordpress/data';
  */
 import { store as editSiteStore } from '../../store';
 import { unlock } from '../../private-apis';
+import SidebarButton from '../sidebar-button';
 
 export default function SidebarNavigationScreen( {
 	isRoot,
@@ -39,13 +39,12 @@ export default function SidebarNavigationScreen( {
 			>
 				{ ! isRoot ? (
 					<NavigatorToParentButton
-						className="edit-site-sidebar-navigation-screen__back"
+						as={ SidebarButton }
 						icon={ isRTL() ? chevronRight : chevronLeft }
 						aria-label={ __( 'Back' ) }
 					/>
 				) : (
-					<Button
-						className="edit-site-sidebar-navigation-screen__back"
+					<SidebarButton
 						icon={ isRTL() ? chevronRight : chevronLeft }
 						aria-label={ __( 'Navigate to the Dashboard' ) }
 						href={ dashboardLink || 'index.php' }
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 6aa03f3492fea..0adc13fe1ac8a 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
+++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss
@@ -29,29 +29,3 @@
 	color: $white;
 	margin: 0;
 }
-
-.edit-site-sidebar-navigation-screen__edit {
-	flex-shrink: 0;
-	color: inherit;
-}
-
-.edit-site-sidebar-navigation-screen__back {
-	color: $gray-200;
-
-	// Focus (resets default button focus and use focus-visible).
-	&:focus:not(:disabled) {
-		box-shadow: none;
-		outline: none;
-	}
-	&:focus-visible:not(:disabled) {
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
-		outline: 3px solid transparent;
-	}
-
-	&:hover,
-	&:focus-visible,
-	&:focus,
-	&:not([aria-disabled="true"]):active {
-		color: $white;
-	}
-}
diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss
index 950d1c286274d..ffae2ec5acb80 100644
--- a/packages/edit-site/src/style.scss
+++ b/packages/edit-site/src/style.scss
@@ -22,6 +22,7 @@
 @import "./components/layout/style.scss";
 @import "./components/save-panel/style.scss";
 @import "./components/sidebar/style.scss";
+@import "./components/sidebar-button/style.scss";
 @import "./components/sidebar-navigation-item/style.scss";
 @import "./components/sidebar-navigation-screen/style.scss";
 @import "./components/sidebar-navigation-screen-templates/style.scss";