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 all 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
59 changes: 28 additions & 31 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,18 +1,13 @@
/**
* External dependencies
*/
import clsx from 'clsx';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Button, Composite } from '@wordpress/components';
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 @@ -117,10 +112,11 @@ function RevisionsButtons( {
const { datetimeAbbreviated } = getSettings().formats;

return (
<ol
<Composite
orientation="vertical"
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 @@ -149,28 +145,26 @@ function RevisionsButtons( {
);

return (
<li
className={ clsx(
'edit-site-global-styles-screen-revisions__revision-item',
{
'is-selected': isSelected,
'is-active': areStylesEqual,
'is-reset': isReset,
}
) }
<Composite.Item
key={ id }
className="edit-site-global-styles-screen-revisions__revision-item"
aria-current={ isSelected }
>
<Button
__next40pxDefaultSize
className="edit-site-global-styles-screen-revisions__revision-button"
accessibleWhenDisabled
disabled={ isSelected }
onClick={ () => {
role="option"
onKeyDown={ ( event ) => {
const { keyCode } = event;
if ( keyCode === ENTER || keyCode === SPACE ) {
onChange( revision );
} }
aria-label={ revisionLabel }
>
}
} }
onClick={ ( event ) => {
event.preventDefault();
onChange( revision );
} }
aria-selected={ isSelected }
aria-label={ revisionLabel }
render={ <div /> }
>
<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 +205,7 @@ function RevisionsButtons( {
) }
</span>
) }
</Button>
</span>
{ isSelected &&
( areStylesEqual ? (
<p className="edit-site-global-styles-screen-revisions__applied-text">
Expand All @@ -225,16 +219,19 @@ 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' )
: __( 'Apply' ) }
</Button>
) ) }
</li>
</Composite.Item>
);
} ) }
</ol>
</Composite>
);
}

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
2 changes: 1 addition & 1 deletion test/e2e/specs/site-editor/block-style-variations.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,7 +245,7 @@ test.describe( 'Block Style Variations', () => {

// Click on previous revision.
await page
.getByRole( 'button', {
.getByRole( 'option', {
name: /^Changes saved by /,
} )
.nth( 1 )
Expand Down
18 changes: 10 additions & 8 deletions test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ test.describe( 'Style Revisions', () => {
// Now there should be enough revisions to show the revisions UI.
await page.getByRole( 'button', { name: 'Revisions' } ).click();

const revisionButtons = page.getByRole( 'button', {
const revisionButtons = page.getByRole( 'option', {
name: /^Changes saved by /,
} );

Expand Down Expand Up @@ -83,14 +83,14 @@ test.describe( 'Style Revisions', () => {

await page.getByRole( 'button', { name: 'Revisions' } ).click();

const unSavedButton = page.getByRole( 'button', {
const unSavedButton = page.getByRole( 'option', {
name: /^Unsaved changes/,
} );

await expect( unSavedButton ).toBeVisible();

await page
.getByRole( 'button', { name: /^Changes saved by / } )
.getByRole( 'option', { name: /^Changes saved by / } )
.last()
.click();

Expand Down Expand Up @@ -118,14 +118,16 @@ test.describe( 'Style Revisions', () => {
await editor.canvas.locator( 'body' ).click();
await userGlobalStylesRevisions.openStylesPanel();
await page.getByRole( 'button', { name: 'Revisions' } ).click();
const lastRevisionButton = page
const lastRevisionItem = page
.getByLabel( 'Global styles revisions list' )
.getByRole( 'button' )
.getByRole( 'option' )
.last();
await expect( lastRevisionButton ).toContainText( 'Default styles' );
await lastRevisionButton.click();
await expect( lastRevisionItem ).toContainText( 'Default styles' );
await lastRevisionItem.click();
await expect(
page.getByRole( 'button', { name: 'Reset to defaults' } )
page.getByRole( 'button', {
name: 'Apply the selected revision to your site.',
} )
).toBeVisible();
} );

Expand Down
Loading