From 02a3b12307f0c274e98ff3744b2cfc6f421846e7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Thu, 12 Dec 2024 13:56:21 +1100 Subject: [PATCH] Fix paths to and from global styles. --- .../sidebar-global-styles-wrapper/index.js | 65 +++++-------------- .../site-editor-routes/stylebook.js | 4 +- .../src/components/style-book/index.js | 57 ++++++++++++---- 3 files changed, 62 insertions(+), 64 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js index 0e16638c37405d..a4a008df3b96ed 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js @@ -14,8 +14,6 @@ import { addQueryArgs } from '@wordpress/url'; import GlobalStylesUI from '../global-styles/ui'; import Page from '../page'; import { unlock } from '../../lock-unlock'; -// import StyleBook from '../style-book'; -// import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -44,15 +42,15 @@ const GlobalStylesPageActions = ( { ); }; -export default function GlobalStylesUIWrapper() { +/** + * Hook to deal with navigation and location state. + * + * @return {Array} The current section and a function to update it. + */ +export const useSection = () => { const { path, query } = useLocation(); - const history = useHistory(); - const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( - path.includes( 'styles-stylebook' ) - ); - const isMobileViewport = useViewportMatch( 'medium', '<' ); - const [ section, onChangeSection ] = useMemo( () => { + return useMemo( () => { return [ query.section ?? '/', ( updatedSection ) => { @@ -64,6 +62,16 @@ export default function GlobalStylesUIWrapper() { }, ]; }, [ path, query.section, history ] ); +}; + +export default function GlobalStylesUIWrapper() { + const { path } = useLocation(); + + const [ isStyleBookOpened, setIsStyleBookOpened ] = useState( + path.includes( 'styles-stylebook' ) + ); + const isMobileViewport = useViewportMatch( 'medium', '<' ); + const [ section, onChangeSection ] = useSection(); return ( <> @@ -85,45 +93,6 @@ export default function GlobalStylesUIWrapper() { onPathChange={ onChangeSection } /> - { /* { canvas === 'view' && isStyleBookOpened && ( - - // Match '/blocks/core%2Fbutton' and - // '/blocks/core%2Fbutton/typography', but not - // '/blocks/core%2Fbuttons'. - section === - `/blocks/${ encodeURIComponent( blockName ) }` || - section.startsWith( - `/blocks/${ encodeURIComponent( blockName ) }/` - ) - } - path={ section } - onSelect={ ( blockName ) => { - if ( - STYLE_BOOK_COLOR_GROUPS.find( - ( group ) => group.slug === blockName - ) - ) { - // Go to color palettes Global Styles. - onChangeSection( '/colors/palette' ); - return; - } - if ( blockName === 'typography' ) { - // Go to typography Global Styles. - onChangeSection( '/typography' ); - return; - } - - // Now go to the selected block. - onChangeSection( - `/blocks/${ encodeURIComponent( blockName ) }` - ); - } } - /> - ) } */ } ); } diff --git a/packages/edit-site/src/components/site-editor-routes/stylebook.js b/packages/edit-site/src/components/site-editor-routes/stylebook.js index a30c4a7c04945e..cb1e414098ab3f 100644 --- a/packages/edit-site/src/components/site-editor-routes/stylebook.js +++ b/packages/edit-site/src/components/site-editor-routes/stylebook.js @@ -22,7 +22,7 @@ export const stylebookRoute = { ) } /> ), - preview: , - mobile: , + preview: , + mobile: , }, }; diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index da69ed734166ed..d52456ad4a34fa 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -47,6 +47,8 @@ import { } from './categories'; import { getExamples } from './examples'; import { store as siteEditorStore } from '../../store'; +import { useSection } from '../sidebar-global-styles-wrapper'; +import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; const { ExperimentalBlockEditorProvider, @@ -346,19 +348,12 @@ function StyleBook( { /** * Style Book Preview component renders the stylebook without the Editor dependency. * - * @param {Object} props Component props. - * @param {string} props.path Path to the selected block. - * @param {Object} props.userConfig User configuration. - * @param {Function} props.isSelected Function to check if a block is selected. - * @param {Function} props.onSelect Function to select a block. + * @param {Object} props Component props. + * @param {Object} props.userConfig User configuration. + * @param {boolean} props.isStatic Whether the stylebook is static or clickable. * @return {Object} Style Book Preview component. */ -export const StyleBookPreview = ( { - path = '', - userConfig = {}, - isSelected, - onSelect, -} ) => { +export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { const siteEditorSettings = useSelect( ( select ) => select( siteEditorStore ).getSettings(), [] @@ -366,13 +361,47 @@ export const StyleBookPreview = ( { // Update block editor settings because useMultipleOriginColorsAndGradients fetch colours from there. dispatch( blockEditorStore ).updateSettings( siteEditorSettings ); + const [ section, onChangeSection ] = useSection(); + + const isSelected = ( blockName ) => { + // Match '/blocks/core%2Fbutton' and + // '/blocks/core%2Fbutton/typography', but not + // '/blocks/core%2Fbuttons'. + return ( + section === `/blocks/${ encodeURIComponent( blockName ) }` || + section.startsWith( + `/blocks/${ encodeURIComponent( blockName ) }/` + ) + ); + }; + + const onSelect = ( blockName ) => { + if ( + STYLE_BOOK_COLOR_GROUPS.find( + ( group ) => group.slug === blockName + ) + ) { + // Go to color palettes Global Styles. + onChangeSection( '/colors/palette' ); + return; + } + if ( blockName === 'typography' ) { + // Go to typography Global Styles. + onChangeSection( '/typography' ); + return; + } + + // Now go to the selected block. + onChangeSection( `/blocks/${ encodeURIComponent( blockName ) }` ); + }; + const [ resizeObserver, sizes ] = useResizeObserver(); const colors = useMultiOriginPalettes(); const examples = getExamples( colors ); const examplesForSinglePageUse = getExamplesForSinglePageUse( examples ); const { base: baseConfig } = useContext( GlobalStylesContext ); - const goTo = getStyleBookNavigationFromPath( path ); + const goTo = getStyleBookNavigationFromPath( section ); const mergedConfig = useMemo( () => { if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) { @@ -404,8 +433,8 @@ export const StyleBookPreview = ( { settings={ settings } goTo={ goTo } sizes={ sizes } - isSelected={ isSelected } - onSelect={ onSelect } + isSelected={ ! isStatic ? isSelected : null } + onSelect={ ! isStatic ? onSelect : null } />