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 a50b8f13d55cc2..723a4f8e6180c4 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( @@ -31,7 +31,7 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock( const PAGE_SIZE = 10; -function ScreenRevisions() { +function ScreenRevisions( { query } ) { const { user: currentEditorGlobalStyles, setUserConfig } = useContext( GlobalStylesContext ); const { blocks, editorCanvasContainerView } = useSelect( @@ -70,7 +70,7 @@ function ScreenRevisions() { ); // The actual code that triggers the revisions screen to navigate back - // to the home screen in in `packages/edit-site/src/components/global-styles/ui.js`. + // to the home screen in `packages/edit-site/src/components/global-styles/ui.js`. const onCloseRevisions = () => { const canvasContainerView = editorCanvasContainerView === 'global-styles-revisions:style-book' @@ -138,19 +138,21 @@ function ScreenRevisions() { { hasRevisions && ( editorCanvasContainerView === 'global-styles-revisions:style-book' ? ( - {} } - onClose={ () => { + onClose={ () => setEditorCanvasContainerView( 'global-styles-revisions' - ); - } } + ) + } /> ) : ( ) ) } 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 00000000000000..c52f179000cf8a --- /dev/null +++ b/packages/edit-site/src/components/global-styles/style-book.js @@ -0,0 +1,99 @@ +/** + * 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, + onClose: undefined, + }, + ]; + }, [ + 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 22ebad383884e9..3d7b8326ffa34d 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -21,6 +21,7 @@ import { moreVertical } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; import { useEffect } from '@wordpress/element'; import { usePrevious } from '@wordpress/compose'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; /** * Internal dependencies @@ -41,17 +42,17 @@ 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 ); const { Slot: GlobalStylesMenuSlot, Fill: GlobalStylesMenuFill } = createSlotFill( SLOT_FILL_NAME ); +const { useLocation } = unlock( routerPrivateApis ); function GlobalStylesActionMenu() { const [ canReset, onReset ] = useGlobalStylesReset(); @@ -178,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(); @@ -329,6 +352,8 @@ function NavigationSync( { path: parentPath, onPathChange, children } ) { function GlobalStylesUI( { path, onPathChange } ) { const blocks = getBlockTypes(); + const { query } = useLocation(); + const { canvas } = query; const editorCanvasContainerView = useSelect( ( select ) => unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), @@ -408,7 +433,7 @@ function GlobalStylesUI( { path, onPathChange } ) { - + @@ -440,7 +465,7 @@ function GlobalStylesUI( { path, onPathChange } ) { - + { 'edit' === canvas && } ); } diff --git a/packages/edit-site/src/components/revisions/index.js b/packages/edit-site/src/components/revisions/index.js index 5ce95872e0c9ae..10079642ab5d34 100644 --- a/packages/edit-site/src/components/revisions/index.js +++ b/packages/edit-site/src/components/revisions/index.js @@ -33,7 +33,12 @@ function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; } -function Revisions( { userConfig, blocks } ) { +function Revisions( { + userConfig, + blocks, + showCloseButton = true, + enableResizing = true, +} ) { const { base: baseConfig } = useContext( GlobalStylesContext ); const mergedConfig = useMemo( () => { @@ -70,8 +75,10 @@ function Revisions( { userConfig, blocks } ) { return (