Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Global styles revisions: move focus and active state to list item #66780

Merged
merged 4 commits into from
Nov 7, 2024
Merged

Global styles revisions: move focus and active state to list item #66780

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0c39e3b
This PR removes the button that loads the global revision and moves i…
ramonjd Nov 6, 2024
9b0d362
Use button border
ramonjd Nov 6, 2024
d292900
Fix e2e tests and use composite component
ramonjd Nov 6, 2024
4be50f9
Update block style variations test
ramonjd Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 21 additions & 26 deletions packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
Expand All @@ -12,7 +7,7 @@ import { dateI18n, getDate, humanTimeDiff, getSettings } from '@wordpress/date';
import { store as coreStore } from '@wordpress/core-data';
import { useSelect } from '@wordpress/data';
import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';

import { ENTER, SPACE } from '@wordpress/keycodes';
/**
* Internal dependencies
*/
Expand Down Expand Up @@ -120,7 +115,7 @@ function RevisionsButtons( {
<ol
className="edit-site-global-styles-screen-revisions__revisions-list"
aria-label={ __( 'Global styles revisions list' ) }
role="group"
role="listbox"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use Composite component here and also improve the revisions list keyboard navigation?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the tip, I'll try out the Composite component.

Should we use Composite component here and also improve the revisions list keyboard navigation?

Are those two points mutually exclusive or is the latter a consequence of the former?

I'd like to keep this PR within the scope of #66642.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can be iterated later, but it would probably change this added code too. It's fine to land this one first.

>
{ userRevisions.map( ( revision, index ) => {
const { id, author, modified } = revision;
Expand Down Expand Up @@ -150,27 +145,24 @@ function RevisionsButtons( {

return (
<li
className={ clsx(
'edit-site-global-styles-screen-revisions__revision-item',
{
'is-selected': isSelected,
'is-active': areStylesEqual,
'is-reset': isReset,
}
) }
className="edit-site-global-styles-screen-revisions__revision-item"
key={ id }
aria-current={ isSelected }
>
<Button
__next40pxDefaultSize
className="edit-site-global-styles-screen-revisions__revision-button"
accessibleWhenDisabled
disabled={ isSelected }
onClick={ () => {
tabIndex={ 0 }
role="option"
onKeyDown={ ( event ) => {
const { keyCode } = event;
if ( keyCode === ENTER || keyCode === SPACE ) {
onChange( revision );
} }
aria-label={ revisionLabel }
>
}
} }
onClick={ () => {
onChange( revision );
} }
aria-selected={ isSelected }
aria-label={ revisionLabel }
>
<span className="edit-site-global-styles-screen-revisions__revision-item-wrapper">
{ isReset ? (
<span className="edit-site-global-styles-screen-revisions__description">
{ __( 'Default styles' ) }
Expand Down Expand Up @@ -211,7 +203,7 @@ function RevisionsButtons( {
) }
</span>
) }
</Button>
</span>
{ isSelected &&
( areStylesEqual ? (
<p className="edit-site-global-styles-screen-revisions__applied-text">
Expand All @@ -225,6 +217,9 @@ function RevisionsButtons( {
variant="primary"
className="edit-site-global-styles-screen-revisions__apply-button"
onClick={ onApplyRevision }
aria-label={ __(
'Apply the selected revision to your site.'
) }
>
{ isReset
? __( 'Reset to defaults' )
Expand Down
28 changes: 11 additions & 17 deletions packages/edit-site/src/components/global-styles/screen-revisions/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
display: flex;
flex-direction: column;

&[role="option"]:active,
&[role="option"]:focus {
@include button-style__focus();
}

&:hover {
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);
.edit-site-global-styles-screen-revisions__date {
Expand Down Expand Up @@ -42,7 +47,7 @@
border: 4px solid transparent;
}

&.is-selected {
&[aria-selected="true"] {
border-radius: $radius-small;

// Only visible in Windows High Contrast mode.
Expand All @@ -52,10 +57,6 @@
color: var(--wp-admin-theme-color);
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

.edit-site-global-styles-screen-revisions__revision-button {
opacity: 1;
}

.edit-site-global-styles-screen-revisions__date {
color: var(--wp-admin-theme-color);
}
Expand Down Expand Up @@ -86,23 +87,16 @@
&:last-child::after {
height: $grid-unit-20 + 2;
}

// Nested to override specificity of .components-button.
.edit-site-global-styles-screen-revisions__revision-button {
width: 100%;
height: auto;
display: block;
padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
z-index: 1;
position: relative;
outline-offset: -2px;
}
}
.edit-site-global-styles-screen-revisions__revision-item-wrapper {
display: block;
padding: $grid-unit-15 $grid-unit-15 $grid-unit-05 $grid-unit-50;
}

.edit-site-global-styles-screen-revisions__apply-button.is-primary,
.edit-site-global-styles-screen-revisions__applied-text {
align-self: flex-start;
// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-button.
// Left margin = left padding of .edit-site-global-styles-screen-revisions__revision-item-wrapper.
margin: $grid-unit-05 $grid-unit-15 $grid-unit-15 $grid-unit-50;
}

Expand Down
Loading