From 3a01d40f7a63911af24eacebce8dc7eac4d9702f Mon Sep 17 00:00:00 2001 From: ramon Date: Sun, 8 Dec 2024 22:13:17 +1100 Subject: [PATCH] Abstracting style book and adding context props --- .../global-styles/screen-revisions/index.js | 4 +- .../components/global-styles/style-book.js | 98 +++++++++++++++++++ .../src/components/global-styles/ui.js | 95 +++++++++++------- .../sidebar-global-styles-wrapper/index.js | 18 ++-- .../index.js | 29 ++++-- 5 files changed, 188 insertions(+), 56 deletions(-) create mode 100644 packages/edit-site/src/components/global-styles/style-book.js diff --git a/packages/edit-site/src/components/global-styles/screen-revisions/index.js b/packages/edit-site/src/components/global-styles/screen-revisions/index.js index a50b8f13d55cc..345b1f4d991b1 100644 --- a/packages/edit-site/src/components/global-styles/screen-revisions/index.js +++ b/packages/edit-site/src/components/global-styles/screen-revisions/index.js @@ -22,7 +22,7 @@ import Revisions from '../../revisions'; import { store as editSiteStore } from '../../../store'; import useGlobalStylesRevisions from './use-global-styles-revisions'; import RevisionsButtons from './revisions-buttons'; -import StyleBook from '../../style-book'; +import GlobalStylesStyleBook from '../style-book'; import Pagination from '../../pagination'; const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( @@ -138,7 +138,7 @@ function ScreenRevisions() { { hasRevisions && ( editorCanvasContainerView === 'global-styles-revisions:style-book' ? ( - {} } onClose={ () => { diff --git a/packages/edit-site/src/components/global-styles/style-book.js b/packages/edit-site/src/components/global-styles/style-book.js new file mode 100644 index 0000000000000..b4f144ffdf2cc --- /dev/null +++ b/packages/edit-site/src/components/global-styles/style-book.js @@ -0,0 +1,98 @@ +/** + * WordPress dependencies + */ +import { useMemo } from '@wordpress/element'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { useNavigator } from '@wordpress/components'; +import { addQueryArgs } from '@wordpress/url'; + +/** + * Internal dependencies + */ +import { unlock } from '../../lock-unlock'; +import StyleBook from '../style-book'; +import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; + +const { useLocation, useHistory } = unlock( routerPrivateApis ); + +function useGetCanvasContext() { + // View mode browser query params and location. + const { path: locationPath, query } = useLocation(); + const history = useHistory(); + + // Edit mode (editor) Global styles menu router. + const { location, goTo } = useNavigator(); + + return useMemo( () => { + if ( 'edit' === query?.canvas && location?.path ) { + return [ + location.path ?? '/', + ( updatedSection ) => goTo( updatedSection ), + {}, + ]; + } + + return [ + query?.section ?? '/', + ( updatedSection ) => + history.navigate( + addQueryArgs( locationPath, { + section: updatedSection, + } ) + ), + { + enableResizing: false, + showCloseButton: false, + showTabs: false, + }, + ]; + }, [ + locationPath, + location?.path, + query?.section, + query?.canvas, + history, + goTo, + ] ); +} + +export default function GlobalStylesStyleBook( props ) { + const [ path, onChangeSection, contextProps ] = useGetCanvasContext(); + + return ( + + // Match '/blocks/core%2Fbutton' and + // '/blocks/core%2Fbutton/typography', but not + // '/blocks/core%2Fbuttons'. + path === `/blocks/${ encodeURIComponent( blockName ) }` || + path.startsWith( + `/blocks/${ encodeURIComponent( blockName ) }/` + ) + } + 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/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index edf820a2f9264..062d5803af519 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -42,12 +42,11 @@ import ScreenBackground from './screen-background'; import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows'; import ScreenLayout from './screen-layout'; import ScreenStyleVariations from './screen-style-variations'; -import StyleBook from '../style-book'; import ScreenCSS from './screen-css'; import ScreenRevisions from './screen-revisions'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import { STYLE_BOOK_COLOR_GROUPS } from '../style-book/constants'; +import GlobalStylesStyleBook from './style-book'; const SLOT_FILL_NAME = 'GlobalStylesMenu'; const { useGlobalStylesReset } = unlock( blockEditorPrivateApis ); @@ -180,42 +179,64 @@ function ContextScreens( { name, parentMenu = '' } ) { ); } -function GlobalStylesStyleBook() { - const navigator = useNavigator(); - const { path } = navigator.location; - return ( - - // Match '/blocks/core%2Fbutton' and - // '/blocks/core%2Fbutton/typography', but not - // '/blocks/core%2Fbuttons'. - path === `/blocks/${ encodeURIComponent( blockName ) }` || - path.startsWith( - `/blocks/${ encodeURIComponent( blockName ) }/` - ) - } - onSelect={ ( blockName ) => { - if ( - STYLE_BOOK_COLOR_GROUPS.find( - ( group ) => group.slug === blockName - ) - ) { - // Go to color palettes Global Styles. - navigator.goTo( '/colors/palette' ); - return; - } - if ( blockName === 'typography' ) { - // Go to typography Global Styles. - navigator.goTo( '/typography' ); - return; - } +/* + * @TODO we can get revisions etc to work but view and edit modes +have to send different props. E.g., + enableResizing={ false } + showCloseButton={ false } + showTabs={ false } + path={ section } - // Now go to the selected block. - navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); - } } - /> - ); -} + The second thing would be to use this in REvisions + so it can send the selected global config to the style book. + + Also the way routes work: in view mode, we change the browser history + using history.navigate. Here, in the editor, we use internal global styles router. + + So what we need probably is a component that handles that for us. + That knows the context. It should be in the style book. + * + */ + +// function GlobalStylesStyleBook() { +// const navigator = useNavigator(); +// const { path } = navigator.location; +// return ( +// +// // Match '/blocks/core%2Fbutton' and +// // '/blocks/core%2Fbutton/typography', but not +// // '/blocks/core%2Fbuttons'. +// path === `/blocks/${ encodeURIComponent( blockName ) }` || +// path.startsWith( +// `/blocks/${ encodeURIComponent( blockName ) }/` +// ) +// } +// onSelect={ ( blockName ) => { +// if ( +// STYLE_BOOK_COLOR_GROUPS.find( +// ( group ) => group.slug === blockName +// ) +// ) { +// // Go to color palettes Global Styles. +// navigator.goTo( '/colors/palette' ); +// return; +// } +// if ( blockName === 'typography' ) { +// // Go to typography Global Styles. +// navigator.goTo( '/typography' ); +// return; +// } + +// // Now go to the selected block. +// navigator.goTo( '/blocks/' + encodeURIComponent( blockName ) ); +// } } +// /> +// ); +// } function GlobalStylesBlockLink() { const navigator = useNavigator(); 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 d1b356ab7193e..6d0b5062e7f26 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 @@ -54,7 +54,7 @@ const GlobalStylesPageActions = ( { value={ false } checked={ ! isStyleBookOpened } name="styles-preview-actions" - onChange={ () => setIsStyleBookOpened( false ) } + onChange={ () => setIsStyleBookClosed( false ) } > { __( 'Site' ) } @@ -86,14 +86,13 @@ export default function GlobalStylesUIWrapper() { }, ]; }, [ path, query.section, history ] ); -console.log( { isStyleBookOpened, section, canvas } ); /* @TODO This needs refactoring. Or at least ScreenRevision needs to be refactored/abstracted so that it doesn't know about the editorCanvasContainerView. */ -/* const turnOn = () => { + const turnOn = () => { setEditorCanvasContainerView( section === '/revisions' ? 'global-styles-revisions:style-book' @@ -103,9 +102,9 @@ console.log( { isStyleBookOpened, section, canvas } ); }; const turnOff = () => { - setEditorCanvasContainerView( 'style-book' ); + setEditorCanvasContainerView( undefined ); setIsStyleBookOpened( false ); - };*/ + }; return ( <> @@ -114,7 +113,8 @@ console.log( { isStyleBookOpened, section, canvas } ); ! isMobileViewport ? ( ) : null } @@ -126,11 +126,12 @@ console.log( { isStyleBookOpened, section, canvas } ); onPathChange={ onChangeSection } /> - { canvas === 'view' && isStyleBookOpened && ( + {/* { canvas === 'view' && isStyleBookOpened && ( // Match '/blocks/core%2Fbutton' and // '/blocks/core%2Fbutton/typography', but not @@ -141,7 +142,6 @@ console.log( { isStyleBookOpened, section, canvas } ); `/blocks/${ encodeURIComponent( blockName ) }/` ) } - path={ section } onSelect={ ( blockName ) => { if ( STYLE_BOOK_COLOR_GROUPS.find( @@ -164,7 +164,7 @@ console.log( { isStyleBookOpened, section, canvas } ); ); } } /> - ) } + ) } */} ); } 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 737d612292297..3cf7679ad562b 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 @@ -5,12 +5,14 @@ import { __ } from '@wordpress/i18n'; import { useCallback } from '@wordpress/element'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { addQueryArgs } from '@wordpress/url'; +import { useDispatch, useSelect } from '@wordpress/data'; /** * Internal dependencies */ import SidebarNavigationScreen from '../sidebar-navigation-screen'; import { unlock } from '../../lock-unlock'; +import { store as editSiteStore } from '../../store'; import SidebarNavigationItem from '../sidebar-navigation-item'; import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; @@ -36,15 +38,26 @@ export default function SidebarNavigationScreenGlobalStyles() { isLoading: isLoadingRevisions, revisionsCount, } = useGlobalStylesRevisions(); - const openRevisions = useCallback( - () => - history.navigate( - addQueryArgs( path, { - section: '/revisions', - } ) - ), - [ path, history ] + const editorCanvasContainerView = useSelect( + ( select ) => + unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), + [] ); + const { setEditorCanvasContainerView } = unlock( + useDispatch( editSiteStore ) + ); + const openRevisions = useCallback( () => { + // if ( 'style-book' === editorCanvasContainerView ) { + // setEditorCanvasContainerView( + // 'global-styles-revisions:style-book' + // ); + // } + history.navigate( + addQueryArgs( path, { + section: '/revisions', + } ) + ); + }, [ path, history ] ); // If there are no revisions, do not render a footer. const shouldShowGlobalStylesFooter =