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

Jump to bottom

Global styles: simplify the conditions in GlobalStylesEditorCanvasContainerLink #57144

Merged
merged 2 commits into from Dec 18, 2023
Merged

Global styles: simplify the conditions in GlobalStylesEditorCanvasContainerLink #57144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c9f877d
Simplifying the conditions in GlobalStylesEditorCanvasContainerLink
ramonjd Dec 18, 2023
cc8e51a
Updating e2e tests
ramonjd Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/global-styles/screen-revisions/revisions-buttons.js
View file
Open in desktop
Expand Up @@ -138,7 +138,7 @@ function RevisionsButtons( {
return (
<ol
className="edit-site-global-styles-screen-revisions__revisions-list"
aria-label={ __( 'Global styles revisions' ) }
aria-label={ __( 'Global styles revisions list' ) }
Copy link
Member Author

Choose a reason for hiding this comment

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

Changed because there's already a label Global styles revisions on the editor canvas container when revisions is active.

role="group"
>
{ userRevisions.map( ( revision, index ) => {
Expand Down
30 changes: 11 additions & 19 deletions packages/edit-site/src/components/global-styles/ui.js
View file
Open in desktop
Expand Up @@ -230,7 +230,7 @@ function GlobalStylesBlockLink() {
}

function GlobalStylesEditorCanvasContainerLink() {
const { goTo, location } = useNavigator();
const { goTo } = useNavigator();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
Expand All @@ -241,25 +241,17 @@ function GlobalStylesEditorCanvasContainerLink() {
// to the appropriate screen. This effectively allows deep linking to the
// desired screens from outside the global styles navigation provider.
useEffect( () => {
if ( editorCanvasContainerView === 'global-styles-revisions' ) {
// Switching to the revisions container view should
// redirect to the revisions screen.
goTo( '/revisions' );
} else if (
!! editorCanvasContainerView &&
location?.path === '/revisions'
) {
// Switching to any container other than revisions should
// redirect from the revisions screen to the root global styles screen.
goTo( '/' );
} else if ( editorCanvasContainerView === 'global-styles-css' ) {
goTo( '/css' );
switch ( editorCanvasContainerView ) {
case 'global-styles-revisions':
goTo( '/revisions' );
break;
case 'global-styles-css':
goTo( '/css' );
break;
Comment on lines +248 to +250
Copy link
Contributor

Choose a reason for hiding this comment

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

TIL: so it looks like from where this one was introduced (#51637) that there's never been a separate "real" container view for the global styles CSS (i.e. a modal-like thingie that sits on top of the editor canvas), but this value for the editor canvas container view is used to enable this redirect to the css panel. That all sounds reasonable, and is working well for me in testing! (Small caveat, but I'll put it in the main review comment)

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes!

In fact, I spent a bit of yesterday trying to remove this as it's not really related to the editor container view.

I gathered that using setEditorCanvasContainerView() was seen a convenient way to trigger a route change in the global styles sidebar from anywhere.

The goTo() from useNavigator will only work in context, so goTo( '/css' ) doesn't nothing in the command component, so I agree it works for now.

Thanks for looking under the hood!

default:
goTo( '/' );
break;
}

// location?.path is not a dependency because we don't want to track it.
// Doing so will cause an infinite loop. We could abstract logic to avoid
// having to disable the check later.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [ editorCanvasContainerView, goTo ] );
Comment on lines -258 to 255
Copy link
Contributor

Choose a reason for hiding this comment

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

Really nice getting to remove this! 🎉

}

Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/sidebar-navigation-screen-details-footer/index.js
View file
Open in desktop
Expand Up @@ -42,7 +42,7 @@ export default function SidebarNavigationScreenDetailsFooter( {
return (
<ItemGroup className="edit-site-sidebar-navigation-screen-details-footer">
<SidebarNavigationItem
label={ __( 'Revisions' ) }
aria-label={ __( 'Revisions' ) }
{ ...hrefProps }
{ ...otherProps }
>
Expand Down
15 changes: 15 additions & 0 deletions test/e2e/specs/site-editor/command-center.spec.js
View file
Open in desktop
Expand Up @@ -47,4 +47,19 @@ test.describe( 'Site editor command palette', () => {
'Index'
);
} );

test( 'Open the command palette and navigate to Customize CSS', async ( {
page,
} ) => {
await page
.getByRole( 'button', { name: 'Open command palette' } )
.click();
await page.keyboard.type( 'Customize' );
await page.getByRole( 'option', { name: 'customize css' } ).click();
await expect(
page
.getByRole( 'region', { name: 'Editor settings' } )
.getByLabel( 'Additional CSS' )
).toBeVisible();
} );
} );
19 changes: 18 additions & 1 deletion test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
View file
Open in desktop
Expand Up @@ -119,7 +119,7 @@ test.describe( 'Global styles revisions', () => {
await userGlobalStylesRevisions.openStylesPanel();
await userGlobalStylesRevisions.openRevisions();
const lastRevisionButton = page
.getByLabel( 'Global styles revisions' )
.getByLabel( 'Global styles revisions list' )
.getByRole( 'button' )
.last();
await expect( lastRevisionButton ).toContainText( 'Default styles' );
Expand All @@ -128,6 +128,23 @@ test.describe( 'Global styles revisions', () => {
page.getByRole( 'button', { name: 'Reset to defaults' } )
).toBeVisible();
} );

test( 'should access from the site editor sidebar', async ( { page } ) => {
const navigationContainer = page.getByRole( 'region', {
name: 'Navigation',
} );
await navigationContainer
.getByRole( 'button', { name: 'Styles' } )
.click();

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

await expect(
page.getByLabel( 'Global styles revisions list' )
).toBeVisible();
} );
} );

class UserGlobalStylesRevisions {
Expand Down