From 40afb5370a08173e4f6fedb05b3e5bd4aa253ff2 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 12 May 2023 13:45:09 +1000 Subject: [PATCH 1/8] Styles Navigation Screen: Add button to open Style Book --- .../index.js | 54 ++++++++++++++----- 1 file changed, 42 insertions(+), 12 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 06e486739ed74..2b30f04dd5163 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -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'; @@ -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 ( } actions={ - { - // switch to edit mode. - setCanvasMode( 'edit' ); - // open global styles sidebar. - openGeneralSidebar( 'edit-site/global-styles' ); - } } - /> +
+ { + // 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 ); + } } + /> + { + // Switch to edit mode. + setCanvasMode( 'edit' ); + // Open global styles sidebar. + openGeneralSidebar( 'edit-site/global-styles' ); + } } + /> +
} /> ); From 74ebe61df2a4edd8fe654bada841a75358358f7f Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Fri, 12 May 2023 16:29:43 +1000 Subject: [PATCH 2/8] Remove state and useEffect, use async / await instead --- .../index.js | 37 ++++++------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 2b30f04dd5163..7e6bb2359d222 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -1,7 +1,6 @@ /** * WordPress dependencies */ -import { useEffect, useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { edit, seen } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -55,16 +54,12 @@ export default function SidebarNavigationScreenGlobalStyles() { 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 ] ); + const openGlobalStyles = async () => + Promise.all( [ + setCanvasMode( 'edit' ), + openGeneralSidebar( 'edit-site/global-styles' ), + ] ); return ( { - // 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 ); + onClick={ async () => { + await openGlobalStyles(); + // Open the Style Book once the canvas mode is set to edit, + // and the global styles sidebar is open. This ensures that + // the Style Book is not prematurely closed. + setEditorCanvasContainerView( 'style-book' ); } } /> { - // Switch to edit mode. - setCanvasMode( 'edit' ); - // Open global styles sidebar. - openGeneralSidebar( 'edit-site/global-styles' ); - } } + onClick={ async () => await openGlobalStyles() } /> } From 586c8c6d6eec644ad14d93b4b939adadf0127231 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Mon, 15 May 2023 15:55:46 +1000 Subject: [PATCH 3/8] Try exposing Style Book in browse mode --- .../index.js | 89 +++++++++++++------ 1 file changed, 63 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 7e6bb2359d222..b2009a6e41d2b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -16,6 +16,7 @@ import { unlock } from '../../private-apis'; import { store as editSiteStore } from '../../store'; import SidebarButton from '../sidebar-button'; import SidebarNavigationItem from '../sidebar-navigation-item'; +import StyleBook from '../style-book'; export function SidebarNavigationItemGlobalStyles( props ) { const { openGeneralSidebar } = useDispatch( editSiteStore ); @@ -49,12 +50,32 @@ export function SidebarNavigationItemGlobalStyles( props ) { ); } +function GlobalStylesStyleBook( { onSelect } ) { + return ( + false } + onSelect={ async ( blockName ) => { + await onSelect( blockName ); + } } + /> + ); +} + export default function SidebarNavigationScreenGlobalStyles() { const { openGeneralSidebar } = useDispatch( editSiteStore ); const { setCanvasMode, setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); + const { isStyleBookOpened } = useSelect( ( select ) => { + const { getEditorCanvasContainerView } = unlock( + select( editSiteStore ) + ); + return { + isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(), + }; + }, [] ); + const openGlobalStyles = async () => Promise.all( [ setCanvasMode( 'edit' ), @@ -62,32 +83,48 @@ export default function SidebarNavigationScreenGlobalStyles() { ] ); return ( - + } + actions={ +
+ { + if ( ! isStyleBookOpened ) { + setEditorCanvasContainerView( + 'style-book' + ); + } else { + setEditorCanvasContainerView( undefined ); + } + } } + isPressed={ isStyleBookOpened } + /> + await openGlobalStyles() } + /> +
+ } + /> + { isStyleBookOpened && ( + { + await openGlobalStyles(); + // Open the Style Book once the canvas mode is set to edit, + // and the global styles sidebar is open. This ensures that + // the Style Book is not prematurely closed. + setEditorCanvasContainerView( 'style-book' ); + } } + /> ) } - content={ } - actions={ -
- { - await openGlobalStyles(); - // Open the Style Book once the canvas mode is set to edit, - // and the global styles sidebar is open. This ensures that - // the Style Book is not prematurely closed. - setEditorCanvasContainerView( 'style-book' ); - } } - /> - await openGlobalStyles() } - /> -
- } - /> + ); } From 48da6656c2327a648191fc3d8bfefd5bb03dfcba Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 16 May 2023 14:54:28 +1000 Subject: [PATCH 4/8] Try hiding Style Book tabs, add keyboard behaviour --- .../editor-canvas-container/style.scss | 1 - .../index.js | 62 ++++--- .../src/components/style-book/index.js | 164 +++++++++++++----- .../src/components/style-book/style.scss | 19 ++ 4 files changed, 179 insertions(+), 67 deletions(-) diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index acc0e0872f0b4..452b778f40682 100644 --- a/packages/edit-site/src/components/editor-canvas-container/style.scss +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -1,5 +1,4 @@ .edit-site-editor-canvas-container { - background: $white; // Fallback color, overridden by JavaScript. border-radius: $radius-block-ui; bottom: 0; left: 0; diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index b2009a6e41d2b..87a78952303a9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -6,6 +6,7 @@ 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'; +import { useViewportMatch } from '@wordpress/compose'; /** * Internal dependencies @@ -50,19 +51,23 @@ export function SidebarNavigationItemGlobalStyles( props ) { ); } -function GlobalStylesStyleBook( { onSelect } ) { +function GlobalStylesStyleBook( { onClick, onSelect } ) { return ( false } + onClick={ onClick } onSelect={ async ( blockName ) => { await onSelect( blockName ); } } + showCloseButton={ false } + showTabs={ false } /> ); } export default function SidebarNavigationScreenGlobalStyles() { const { openGeneralSidebar } = useDispatch( editSiteStore ); + const isMobileViewport = useViewportMatch( 'medium', '<' ); const { setCanvasMode, setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); @@ -82,6 +87,18 @@ export default function SidebarNavigationScreenGlobalStyles() { openGeneralSidebar( 'edit-site/global-styles' ), ] ); + const openStyleBook = async ( event ) => { + if ( event.defaultPrevented ) { + return; + } + event.preventDefault(); + await openGlobalStyles(); + // Open the Style Book once the canvas mode is set to edit, + // and the global styles sidebar is open. This ensures that + // the Style Book is not prematurely closed. + setEditorCanvasContainerView( 'style-book' ); + }; + return ( <> } actions={
- { - if ( ! isStyleBookOpened ) { - setEditorCanvasContainerView( - 'style-book' - ); - } else { - setEditorCanvasContainerView( undefined ); - } - } } - isPressed={ isStyleBookOpened } - /> + { ! isMobileViewport && ( + { + if ( ! isStyleBookOpened ) { + setEditorCanvasContainerView( + 'style-book' + ); + } else { + setEditorCanvasContainerView( + undefined + ); + } + } } + isPressed={ isStyleBookOpened } + /> + ) } } /> - { isStyleBookOpened && ( + { isStyleBookOpened && ! isMobileViewport && ( { - await openGlobalStyles(); - // Open the Style Book once the canvas mode is set to edit, - // and the global styles sidebar is open. This ensures that - // the Style Book is not prematurely closed. - setEditorCanvasContainerView( 'style-book' ); - } } + onClick={ openStyleBook } + onSelect={ openStyleBook } /> ) } diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 72e8abad629eb..379f1eb112cfa 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -13,6 +13,7 @@ import { Disabled, TabPanel, } from '@wordpress/components'; + import { __, sprintf } from '@wordpress/i18n'; import { getCategories, @@ -29,7 +30,8 @@ import { } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { useResizeObserver } from '@wordpress/compose'; -import { useMemo, memo } from '@wordpress/element'; +import { useMemo, useState, memo } from '@wordpress/element'; +import { ENTER, SPACE } from '@wordpress/keycodes'; /** * Internal dependencies @@ -161,7 +163,13 @@ function getExamples() { return [ headingsExample, ...otherExamples ]; } -function StyleBook( { isSelected, onSelect } ) { +function StyleBook( { + isSelected, + onClick, + onSelect, + showCloseButton = true, + showTabs = true, +} ) { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); const [ backgroundColor ] = useGlobalStyle( 'color.background' ); @@ -194,11 +202,14 @@ function StyleBook( { isSelected, onSelect } ) { return (
600, + 'is-button': !! onClick, } ) } style={ { color: textColor, @@ -206,53 +217,118 @@ function StyleBook( { isSelected, onSelect } ) { } } > { resizeObserver } - - { ( tab ) => ( - - ) } - + ) } + + ) : ( + + ) }
); } +const StyleBookBody = ( { + category, + examples, + isSelected, + onClick, + onSelect, + settings, + sizes, + title, +} ) => { + const [ isFocused, setIsFocused ] = useState( false ); + + // The presence of an `onClick` prop indicates that the Style Book is being used + // as a button. In this case, we need to add additional props to the iframe to + // make it behave like a button. + const buttonModeProps = { + role: 'button', + onFocus: () => setIsFocused( true ), + onBlur: () => setIsFocused( false ), + onKeyDown: ( event ) => { + const { keyCode } = event; + if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) { + onClick( event ); + } + }, + onClick: ( event ) => { + if ( onClick ) { + onClick( event ); + } + }, + readonly: true, + }; + + const buttonModeStyles = onClick + ? 'body { cursor: pointer; } body * { pointer-events: none; }' + : ''; + + return ( + + ); +}; + const Examples = memo( ( { className, examples, category, label, isSelected, onSelect } ) => { const composite = useCompositeState( { orientation: 'vertical' } ); @@ -263,7 +339,9 @@ const Examples = memo( aria-label={ label } > { examples - .filter( ( example ) => example.category === category ) + .filter( ( example ) => + category ? example.category === category : true + ) .map( ( example ) => ( { - onSelect( example.name ); + onSelect?.( example.name ); } } /> ) ) } diff --git a/packages/edit-site/src/components/style-book/style.scss b/packages/edit-site/src/components/style-book/style.scss index 6dcc1fec328ab..0ddefb055a8d8 100644 --- a/packages/edit-site/src/components/style-book/style.scss +++ b/packages/edit-site/src/components/style-book/style.scss @@ -1,3 +1,22 @@ +.edit-site-style-book { + // Ensure the style book fills the available vertical space. + // This is useful when the style book is used to fill a frame. + height: 100%; + &.is-button { + border-radius: $radius-block-ui * 4; + } +} + +.edit-site-style-book__iframe { + &.is-button { + border-radius: $radius-block-ui * 4; + } + &.is-focused { + outline: calc(2 * var(--wp-admin-border-width-focus)) solid var(--wp-admin-theme-color); + outline-offset: calc(-2 * var(--wp-admin-border-width-focus)); + } +} + .edit-site-style-book__tab-panel { .components-tab-panel__tabs { background: $white; From d37241ff621bd5b63dde1e4986caeb76bbc453b9 Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 16 May 2023 14:59:56 +1000 Subject: [PATCH 5/8] Revert background color removal --- .../edit-site/src/components/editor-canvas-container/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/editor-canvas-container/style.scss b/packages/edit-site/src/components/editor-canvas-container/style.scss index 452b778f40682..acc0e0872f0b4 100644 --- a/packages/edit-site/src/components/editor-canvas-container/style.scss +++ b/packages/edit-site/src/components/editor-canvas-container/style.scss @@ -1,4 +1,5 @@ .edit-site-editor-canvas-container { + background: $white; // Fallback color, overridden by JavaScript. border-radius: $radius-block-ui; bottom: 0; left: 0; From 460055014b7dc77cfc1d8af869497dcf086c5ebb Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Tue, 16 May 2023 15:37:30 +1000 Subject: [PATCH 6/8] Clear the editor canvas container view when accessing the main navigation screen --- .../sidebar-navigation-screen-main/index.js | 21 ++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js index 7c9e4b3bf9196..7ad0dc07ae0f0 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-main/index.js @@ -7,8 +7,9 @@ import { } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { layout, symbol, navigation, styles, page } from '@wordpress/icons'; -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import { useEffect } from '@wordpress/element'; /** * Internal dependencies @@ -16,6 +17,8 @@ import { store as coreStore } from '@wordpress/core-data'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import SidebarNavigationItem from '../sidebar-navigation-item'; import { SidebarNavigationItemGlobalStyles } from '../sidebar-navigation-screen-global-styles'; +import { unlock } from '../../private-apis'; +import { store as editSiteStore } from '../../store'; export default function SidebarNavigationScreenMain() { const hasNavigationMenus = useSelect( ( select ) => { @@ -36,6 +39,22 @@ export default function SidebarNavigationScreenMain() { const showNavigationScreen = process.env.IS_GUTENBERG_PLUGIN ? hasNavigationMenus : false; + + const editorCanvasContainerView = useSelect( ( select ) => { + return unlock( select( editSiteStore ) ).getEditorCanvasContainerView(); + }, [] ); + + const { setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + + // Clear the editor canvas container view when accessing the main navigation screen. + useEffect( () => { + if ( editorCanvasContainerView ) { + setEditorCanvasContainerView( undefined ); + } + }, [ editorCanvasContainerView, setEditorCanvasContainerView ] ); + return ( Date: Wed, 17 May 2023 10:57:41 +1000 Subject: [PATCH 7/8] Fix enableResizing, move prevent default to the Style Book component for simplicity --- .../index.js | 26 +++++-------------- .../src/components/style-book/index.js | 16 +++++++++--- 2 files changed, 18 insertions(+), 24 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 87a78952303a9..6baf073cd988e 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -51,20 +51,6 @@ export function SidebarNavigationItemGlobalStyles( props ) { ); } -function GlobalStylesStyleBook( { onClick, onSelect } ) { - return ( - false } - onClick={ onClick } - onSelect={ async ( blockName ) => { - await onSelect( blockName ); - } } - showCloseButton={ false } - showTabs={ false } - /> - ); -} - export default function SidebarNavigationScreenGlobalStyles() { const { openGeneralSidebar } = useDispatch( editSiteStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); @@ -87,11 +73,7 @@ export default function SidebarNavigationScreenGlobalStyles() { openGeneralSidebar( 'edit-site/global-styles' ), ] ); - const openStyleBook = async ( event ) => { - if ( event.defaultPrevented ) { - return; - } - event.preventDefault(); + const openStyleBook = async () => { await openGlobalStyles(); // Open the Style Book once the canvas mode is set to edit, // and the global styles sidebar is open. This ensures that @@ -136,9 +118,13 @@ export default function SidebarNavigationScreenGlobalStyles() { } /> { isStyleBookOpened && ! isMobileViewport && ( - false } onClick={ openStyleBook } onSelect={ openStyleBook } + showCloseButton={ false } + showTabs={ false } /> ) } diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 379f1eb112cfa..c86d6df65045a 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -164,6 +164,7 @@ function getExamples() { } function StyleBook( { + enableResizing = true, isSelected, onClick, onSelect, @@ -201,7 +202,7 @@ function StyleBook( { return ( { const [ isFocused, setIsFocused ] = useState( false ); - // The presence of an `onClick` prop indicates that the Style Book is being used - // as a button. In this case, we need to add additional props to the iframe to - // make it behave like a button. + // The presence of an `onClick` prop indicates that the Style Book is being used as a button. + // In this case, add additional props to the iframe to make it behave like a button. const buttonModeProps = { role: 'button', onFocus: () => setIsFocused( true ), onBlur: () => setIsFocused( false ), onKeyDown: ( event ) => { + if ( event.defaultPrevented ) { + return; + } const { keyCode } = event; if ( onClick && ( keyCode === ENTER || keyCode === SPACE ) ) { + event.preventDefault(); onClick( event ); } }, onClick: ( event ) => { + if ( event.defaultPrevented ) { + return; + } if ( onClick ) { + event.preventDefault(); onClick( event ); } }, From 1ddbafe12797efd80c2eb1278e849c357c8da76d Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 17 May 2023 14:30:12 +1000 Subject: [PATCH 8/8] Tidy code a little Co-authored-by: ramon --- .../index.js | 32 ++++++++----------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js index 6baf073cd988e..a7b8add9dd54f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-global-styles/index.js @@ -58,14 +58,12 @@ export default function SidebarNavigationScreenGlobalStyles() { useDispatch( editSiteStore ) ); - const { isStyleBookOpened } = useSelect( ( select ) => { - const { getEditorCanvasContainerView } = unlock( - select( editSiteStore ) - ); - return { - isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(), - }; - }, [] ); + const isStyleBookOpened = useSelect( + ( select ) => + 'style-book' === + unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + [] + ); const openGlobalStyles = async () => Promise.all( [ @@ -95,17 +93,13 @@ export default function SidebarNavigationScreenGlobalStyles() { { - if ( ! isStyleBookOpened ) { - setEditorCanvasContainerView( - 'style-book' - ); - } else { - setEditorCanvasContainerView( - undefined - ); - } - } } + onClick={ () => + setEditorCanvasContainerView( + ! isStyleBookOpened + ? 'style-book' + : undefined + ) + } isPressed={ isStyleBookOpened } /> ) }