Site Editor: update the edit button (#48584)

Author: youknowriad

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 ) => {

packages/edit-site/src/components/add-new-template/new-template-part.js

@@ -86,19 +86,20 @@ export default function NewTemplatePart( {
 			setIsModalOpen( false );
 		}
 	}
+	const { as: Toggle = Button, ...restToggleProps } = toggleProps ?? {};
 
 	return (
 		<>
-			<Button
-				{ ...toggleProps }
+			<Toggle
+				{ ...restToggleProps }
 				onClick={ () => {
 					setIsModalOpen( true );
 				} }
 				icon={ showIcon ? plus : null }
 				label={ postType.labels.add_new }
 			>
 				{ showIcon ? null : postType.labels.add_new }
-			</Button>
+			</Toggle>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => setIsModalOpen( false ) }

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
+			) }
+		/>
+	);
+}

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;
+	}
+}

packages/edit-site/src/components/sidebar-navigation-screen-navigation-item/index.js

@@ -3,19 +3,18 @@
  */
 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';
 
 /**
  * Internal dependencies
  */
 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 ) );
@@ -43,13 +42,11 @@ export default function SidebarNavigationScreenNavigationItem() {
 		<SidebarNavigationScreen
 			title={ post ? decodeEntities( post?.title?.rendered ) : null }
 			actions={
-				<Button
-					variant="primary"
-					className="edit-site-sidebar-navigation-screen__edit"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={
 				post ? decodeEntities( post?.description?.rendered ) : null

packages/edit-site/src/components/sidebar-navigation-screen-template/index.js

@@ -3,7 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { Button } from '@wordpress/components';
+import { pencil } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,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 ) );
@@ -27,13 +28,11 @@ export default function SidebarNavigationScreenTemplate() {
 		<SidebarNavigationScreen
 			title={ getTitle() }
 			actions={
-				<Button
-					variant="primary"
-					className="edit-site-sidebar-navigation-screen__edit"
+				<SidebarButton
 					onClick={ () => setCanvasMode( 'edit' ) }
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					label={ __( 'Edit' ) }
+					icon={ pencil }
+				/>
 			}
 			content={ description ? <p>{ description }</p> : undefined }
 		/>

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,
 						} }
 					/>
 				)

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;
-}

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' }

packages/edit-site/src/components/sidebar-navigation-screen/style.scss

@@ -29,28 +29,3 @@
 	color: $white;
 	margin: 0;
 }
-
-.edit-site-sidebar-navigation-screen__edit {
-	flex-shrink: 0;
-}
-
-.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;
-	}
-}

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";