Skip to content

Styles Navigation Screen: Add Style Book #50566

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

Merged
andrewserong merged 8 commits into from
May 17, 2023
Merged

Styles Navigation Screen: Add Style Book #50566

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
40afb53
Styles Navigation Screen: Add button to open Style Book
andrewserong May 12, 2023
74ebe61
Remove state and useEffect, use async / await instead
andrewserong May 12, 2023
586c8c6
Try exposing Style Book in browse mode
andrewserong May 15, 2023
48da665
Try hiding Style Book tabs, add keyboard behaviour
andrewserong May 16, 2023
d37241f
Revert background color removal
andrewserong May 16, 2023
4600550
Clear the editor canvas container view when accessing the main naviga…
andrewserong May 16, 2023
5e7783f
Fix enableResizing, move prevent default to the Style Book component …
andrewserong May 17, 2023
1ddbafe
Tidy code a little
andrewserong May 17, 2023
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
Next Next commit
Styles Navigation Screen: Add button to open Style Book
  • Loading branch information
@andrewserong
andrewserong committed May 17, 2023
commit 40afb5370a08173e4f6fedb05b3e5bd4aa253ff2
54 changes: 42 additions & 12 deletions packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
/**
* WordPress dependencies
*/
import { useEffect, useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { edit } from '@wordpress/icons';
import { edit, seen } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalNavigatorButton as NavigatorButton } from '@wordpress/components';
Expand Down Expand Up @@ -51,7 +52,20 @@ export function SidebarNavigationItemGlobalStyles( props ) {

export default function SidebarNavigationScreenGlobalStyles() {
const { openGeneralSidebar } = useDispatch( editSiteStore );
const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
const { setCanvasMode, setEditorCanvasContainerView } = unlock(
useDispatch( editSiteStore )
);
const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( false );

// When the style book is opened, switch to the style book view.
// This is done in a useEffect to ensure that the canvas mode is changed,
// and the global styles sidebar is opened before attempting to open the style book.
useEffect( () => {
if ( isStyleBookOpened ) {
setEditorCanvasContainerView( 'style-book' );
}
}, [ setEditorCanvasContainerView, isStyleBookOpened ] );

return (
<SidebarNavigationScreen
title={ __( 'Styles' ) }
Expand All @@ -60,16 +74,32 @@ export default function SidebarNavigationScreenGlobalStyles() {
) }
content={ <StyleVariationsContainer /> }
actions={
<SidebarButton
icon={ edit }
label={ __( 'Edit styles' ) }
onClick={ () => {
// switch to edit mode.
setCanvasMode( 'edit' );
// open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
} }
/>
<div>
Copy link
Contributor Author

@andrewserong andrewserong May 12, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I've just used a simple div here so that there isn't any space between the buttons. Happy to change this if we need the buttons to have some breathing room.

Copy link
Member

@ramonjd ramonjd May 12, 2023

Choose a reason for hiding this comment

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

Sounds good 👍

I'm not an expert here, but would something like <div role="group" aria-label="Styles commands"> be appropriate too?

Asking for a friend :trollface:

Copy link
Contributor Author

@andrewserong andrewserong May 12, 2023

Choose a reason for hiding this comment

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

Good question — I only added the wrapping div for styling purposes rather than to flag anything semantically. Since there's only two controls at the moment, I wasn't sure how valuable having a group role would be for those two buttons?

Happy to add it in, though, if you think it's better to treat them as a group!

Copy link
Member

@ramonjd ramonjd May 12, 2023

Choose a reason for hiding this comment

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

Honestly I don't know. I think it's fine to leave as is. If we find out a group role is helpful it's easy to add in 👍

Copy link
Contributor Author

@andrewserong andrewserong May 12, 2023

Choose a reason for hiding this comment

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

Cheers, sounds good 👍

<SidebarButton
icon={ seen }
label={ __( 'Style Book' ) }
onClick={ () => {
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
// Open style book, via the useEffect above.
// This is done via a local state change to ensure that the canvas mode is changed,
// and the global styles sidebar is opened before attempting to open the style book.
setIsStyleBookOpened( true );
} }
/>
<SidebarButton
icon={ edit }
label={ __( 'Edit styles' ) }
onClick={ () => {
// Switch to edit mode.
setCanvasMode( 'edit' );
// Open global styles sidebar.
openGeneralSidebar( 'edit-site/global-styles' );
} }
/>
</div>
}
/>
);
Expand Down