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.

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

Style Book: should persist when browsing global styles panels #59261

Merged
merged 3 commits into from
Feb 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,11 @@ function ScreenRevisions() {

const onCloseRevisions = () => {
goTo( '/' ); // Return to global styles main panel.
setEditorCanvasContainerView( undefined );
const canvasContainerView =
editorCanvasContainerView === 'global-styles-revisions:style-book'
? 'style-book'
: undefined;
setEditorCanvasContainerView( canvasContainerView );
};

const restoreRevision = ( revision ) => {
Expand All @@ -99,7 +103,6 @@ function ScreenRevisions() {
! editorCanvasContainerView.startsWith( 'global-styles-revisions' )
) {
goTo( '/' ); // Return to global styles main panel.
setEditorCanvasContainerView( editorCanvasContainerView );
}
}, [ editorCanvasContainerView ] );

Expand Down
28 changes: 26 additions & 2 deletions packages/edit-site/src/components/global-styles/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -230,12 +230,14 @@ function GlobalStylesBlockLink() {
}

function GlobalStylesEditorCanvasContainerLink() {
const { goTo } = useNavigator();
const { goTo, location } = useNavigator();
const editorCanvasContainerView = useSelect(
( select ) =>
unlock( select( editSiteStore ) ).getEditorCanvasContainerView(),
[]
);
const path = location?.path;
const isRevisionsOpen = path === '/revisions';

// If the user switches the editor canvas container view, redirect
// to the appropriate screen. This effectively allows deep linking to the
Expand All @@ -249,11 +251,33 @@ function GlobalStylesEditorCanvasContainerLink() {
case 'global-styles-css':
goTo( '/css' );
break;
case 'style-book':
/*
* The stand-alone style book is open
* and the revisions panel is open,
* close the revisions panel.
* Otherwise keep the style book open while
* browsing global styles panel.
*/
if ( isRevisionsOpen ) {
goTo( '/' );
}
break;
default:
/*
* Example: the user has navigated to "Browse styles" or elsewhere
* and changes the editorCanvasContainerView, e.g., closes the style book.
* The panel should not be affected.
* Exclude revisions panel from this behavior,
* as it should close when the editorCanvasContainerView doesn't correspond.
*/
if ( path !== '/' && ! isRevisionsOpen ) {
return;
}
goTo( '/' );
break;
}
}, [ editorCanvasContainerView, goTo ] );
}, [ editorCanvasContainerView, isRevisionsOpen, goTo ] );
}

function GlobalStylesUI() {
Expand Down
29 changes: 29 additions & 0 deletions test/e2e/specs/site-editor/style-book.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -155,6 +155,35 @@ test.describe( 'Style Book', () => {
'should close when Escape key is pressed'
).toBeHidden();
} );

test( 'should persist when navigating the global styles sidebar', async ( {
page,
} ) => {
await page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'button', { name: 'Browse styles' } )
.click();

const styleBookRegion = page.getByRole( 'region', {
name: 'Style Book',
} );
await expect(
styleBookRegion,
'style book should be visible'
).toBeVisible();

await page.click( 'role=button[name="Navigate to the previous view"]' );

await page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'button', { name: 'Typography' } )
.click();

await expect(
styleBookRegion,
'style book should be visible'
).toBeVisible();
} );
} );

class StyleBook {
Expand Down
32 changes: 32 additions & 0 deletions test/e2e/specs/site-editor/user-global-styles-revisions.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,38 @@ test.describe( 'Style Revisions', () => {
).toBeHidden();
} );

test( 'should close revisions panel and leave style book open if activated', async ( {
page,
editor,
userGlobalStylesRevisions,
} ) => {
await editor.canvas.locator( 'body' ).click();
await userGlobalStylesRevisions.openStylesPanel();
const revisionsButton = page.getByRole( 'button', {
name: 'Revisions',
} );
const styleBookButton = page.getByRole( 'button', {
name: 'Style Book',
} );
await revisionsButton.click();
await styleBookButton.click();

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

await page.click( 'role=button[name="Navigate to the previous view"]' );

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

// The site editor canvas has been restored.
await expect(
page.locator( 'iframe[name="style-book-canvas"]' )
).toBeVisible();
} );

test( 'should paginate', async ( {
page,
editor,
Expand Down
Loading