Skip to content

Commit

Permalink
Site Editor: update the edit button (#48584)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad authored Feb 28, 2023
1 parent 257a2e8 commit f5f73e4
Show file tree
Hide file tree
Showing 11 changed files with 73 additions and 59 deletions.
9 changes: 6 additions & 3 deletions packages/components/src/dropdown-menu/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,9 @@ function DropdownMenu( dropdownMenuProps ) {
onToggle();
}
};
const { as: Toggle = Button, ...restToggleProps } =
toggleProps ?? {};

const mergedToggleProps = mergeProps(
{
className: classnames(
Expand All @@ -100,11 +103,11 @@ function DropdownMenu( dropdownMenuProps ) {
}
),
},
toggleProps
restToggleProps
);

return (
<Button
<Toggle
{ ...mergedToggleProps }
icon={ icon }
onClick={ ( event ) => {
Expand All @@ -126,7 +129,7 @@ function DropdownMenu( dropdownMenuProps ) {
showTooltip={ toggleProps?.showTooltip ?? true }
>
{ mergedToggleProps.children }
</Button>
</Toggle>
);
} }
renderContent={ ( props ) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) }
Expand Down
21 changes: 21 additions & 0 deletions packages/edit-site/src/components/sidebar-button/index.js
Original file line number Diff line number Diff line change
@@ -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
) }
/>
);
}
23 changes: 23 additions & 0 deletions packages/edit-site/src/components/sidebar-button/style.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) );
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 ) );
Expand All @@ -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 }
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -84,8 +85,7 @@ export default function SidebarNavigationScreenTemplates() {
<AddNewTemplate
templateType={ postType }
toggleProps={ {
className:
'edit-site-sidebar-navigation-screen-templates__add-button',
as: SidebarButton,
} }
/>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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,
Expand All @@ -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' }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
1 change: 1 addition & 0 deletions packages/edit-site/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down

0 comments on commit f5f73e4

Please sign in to comment.