From 57b30d4f6d7ae523ca1bd76a2821079bee9b7c00 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 24 Sep 2024 16:13:03 +0100 Subject: [PATCH 01/27] Update: Make the styles sections a preview of the style book with a left edit styles sidebar. --- .../index.js | 50 +------------------ 1 file changed, 2 insertions(+), 48 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 6579107a60e55f..2f6654eac06c89 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 @@ -2,12 +2,10 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { edit, seen } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useViewportMatch } from '@wordpress/compose'; import { useCallback } from '@wordpress/element'; -import { store as editorStore } from '@wordpress/editor'; import { store as preferencesStore } from '@wordpress/preferences'; import { privateApis as routerPrivateApis } from '@wordpress/router'; @@ -17,12 +15,10 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import SidebarNavigationScreen from '../sidebar-navigation-screen'; import { unlock } from '../../lock-unlock'; import { store as editSiteStore } from '../../store'; -import SidebarButton from '../sidebar-button'; import SidebarNavigationItem from '../sidebar-navigation-item'; import StyleBook from '../style-book'; import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; -import SidebarNavigationScreenGlobalStylesContent from './content'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -75,15 +71,11 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { const { revisions, isLoading: isLoadingRevisions } = useGlobalStylesRevisions(); const { openGeneralSidebar } = useDispatch( editSiteStore ); - const { setIsListViewOpened } = useDispatch( editorStore ); const isMobileViewport = useViewportMatch( 'medium', '<' ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); - const { isStyleBookOpened, revisionsCount } = useSelect( ( select ) => { - const { getEditorCanvasContainerView } = unlock( - select( editSiteStore ) - ); + const { revisionsCount } = useSelect( ( select ) => { const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select( coreStore ); const globalStylesId = __experimentalGetCurrentGlobalStylesId(); @@ -91,7 +83,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { ? getEntityRecord( 'root', 'globalStyles', globalStylesId ) : undefined; return { - isStyleBookOpened: 'style-book' === getEditorCanvasContainerView(), revisionsCount: globalStyles?._links?.[ 'version-history' ]?.[ 0 ]?.count ?? 0, }; @@ -115,19 +106,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { ] ); }, [ history, params, openGeneralSidebar, setPreference ] ); - const openStyleBook = useCallback( 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' ); - setIsListViewOpened( false ); - }, [ - openGlobalStyles, - setEditorCanvasContainerView, - setIsListViewOpened, - ] ); - const openRevisions = useCallback( async () => { await openGlobalStyles(); // Open the global styles revisions once the canvas mode is set to edit, @@ -151,7 +129,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { 'Choose a different style combination for the theme styles.' ) } backPath={ backPath } - content={ } footer={ shouldShowGlobalStylesFooter && ( ) } - actions={ - <> - { ! isMobileViewport && ( - - setEditorCanvasContainerView( - ! isStyleBookOpened - ? 'style-book' - : undefined - ) - } - isPressed={ isStyleBookOpened } - /> - ) } - await openGlobalStyles() } - /> - - } /> - { isStyleBookOpened && ! isMobileViewport && canvas === 'view' && ( + { ! isMobileViewport && canvas === 'view' && ( false } From e547115a95441224301d8375b8e6a3d79423cd64 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 24 Sep 2024 16:25:27 +0100 Subject: [PATCH 02/27] improve mobile behavior --- .../sidebar-navigation-screen-global-styles/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 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 2f6654eac06c89..14fd8368489616 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 @@ -138,12 +138,10 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { ) } /> - { ! isMobileViewport && canvas === 'view' && ( + { canvas === 'view' && ( false } - onClick={ openStyleBook } - onSelect={ openStyleBook } showCloseButton={ false } showTabs={ false } /> From a10545981c702fe984311e9a53aeacdb51dc295e Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 25 Sep 2024 16:14:15 +0100 Subject: [PATCH 03/27] Show other sidebar items on Styles sidebar --- .../index.js | 4 +- .../sidebar-navigation-screen-main/index.js | 94 ++++++++++--------- 2 files changed, 51 insertions(+), 47 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 14fd8368489616..357a42cbcdd843 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 @@ -4,7 +4,6 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { useViewportMatch } from '@wordpress/compose'; import { useCallback } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { privateApis as routerPrivateApis } from '@wordpress/router'; @@ -19,6 +18,7 @@ import SidebarNavigationItem from '../sidebar-navigation-item'; import StyleBook from '../style-book'; import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; +import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -71,7 +71,6 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { const { revisions, isLoading: isLoadingRevisions } = useGlobalStylesRevisions(); const { openGeneralSidebar } = useDispatch( editSiteStore ); - const isMobileViewport = useViewportMatch( 'medium', '<' ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); @@ -129,6 +128,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { 'Choose a different style combination for the theme styles.' ) } backPath={ backPath } + content={ } footer={ shouldShowGlobalStylesFooter && ( + + { __( 'Navigation' ) } + + + { __( 'Styles' ) } + + + { __( 'Pages' ) } + + + { __( 'Templates' ) } + + + { __( 'Patterns' ) } + + + ); +} + export default function SidebarNavigationScreenMain() { const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) @@ -38,51 +86,7 @@ export default function SidebarNavigationScreenMain() { description={ __( 'Customize the appearance of your website using the block editor.' ) } - content={ - <> - - - { __( 'Navigation' ) } - - - { __( 'Styles' ) } - - - { __( 'Pages' ) } - - - { __( 'Templates' ) } - - - { __( 'Patterns' ) } - - - - } + content={ } /> ); } From fde3fe8bc189a56a54376d9a3754efb433cc3dcd Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Wed, 25 Sep 2024 16:22:26 +0100 Subject: [PATCH 04/27] refeactor sidebar current item --- .../src/components/sidebar-navigation-item/style.scss | 6 ++++-- .../sidebar-navigation-screen-global-styles/index.js | 4 +++- .../components/sidebar-navigation-screen-main/index.js | 8 ++++++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 016027ef715a45..f9f3a01868f80f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -7,7 +7,7 @@ &:hover, &:focus, - &[aria-current] { + &[aria-current="true"] { color: $gray-200; background: $gray-800; @@ -16,7 +16,7 @@ } } - &[aria-current] { + &[aria-current="true"] { background: var(--wp-admin-theme-color); color: $white; } @@ -28,6 +28,8 @@ &.with-suffix { padding-right: $grid-unit-20; } + + } .edit-site-sidebar-navigation-screen__content .block-editor-list-view-block-select-button { 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 357a42cbcdd843..be245ba8e18a11 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 @@ -128,7 +128,9 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { 'Choose a different style combination for the theme styles.' ) } backPath={ backPath } - content={ } + content={ + + } footer={ shouldShowGlobalStylesFooter && ( { __( 'Navigation' ) } @@ -37,7 +38,7 @@ export function MainSidebarNavigationContent( { isStylesSelected } ) { className="is-selected" withChevron icon={ styles } - aria-current={ isStylesSelected } + aria-current={ activeItem === 'styles-navigation-item' } > { __( 'Styles' ) } @@ -46,6 +47,7 @@ export function MainSidebarNavigationContent( { isStylesSelected } ) { params={ { postType: 'page' } } withChevron icon={ page } + aria-current={ activeItem === 'page-navigation-item' } > { __( 'Pages' ) } @@ -54,6 +56,7 @@ export function MainSidebarNavigationContent( { isStylesSelected } ) { params={ { postType: TEMPLATE_POST_TYPE } } withChevron icon={ layout } + aria-current={ activeItem === 'template-navigation-item' } > { __( 'Templates' ) } @@ -62,6 +65,7 @@ export function MainSidebarNavigationContent( { isStylesSelected } ) { params={ { postType: PATTERN_TYPES.user } } withChevron icon={ symbol } + aria-current={ activeItem === 'patterns-navigation-item' } > { __( 'Patterns' ) } From 65df065769f80938d7a7f8239c53b78d34d01b6a Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 27 Sep 2024 12:47:46 +0100 Subject: [PATCH 05/27] button to toggle between stylebook and homepage --- .../block-editor/use-editor-iframe-props.js | 11 ++++--- .../edit-site/src/components/editor/index.js | 7 +++-- .../index.js | 30 +++++++++++++++++-- 3 files changed, 39 insertions(+), 9 deletions(-) diff --git a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js index 46719a00c16aad..7ec1b8fb33b60a 100644 --- a/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js +++ b/packages/edit-site/src/components/block-editor/use-editor-iframe-props.js @@ -20,7 +20,7 @@ import { unlock } from '../../lock-unlock'; const { useLocation, useHistory } = unlock( routerPrivateApis ); -export default function useEditorIframeProps() { +export default function useEditorIframeProps( isPreviewOnly ) { const { params } = useLocation(); const history = useHistory(); const { canvas = 'view' } = params; @@ -51,6 +51,7 @@ export default function useEditorIframeProps() { onKeyDown: ( event ) => { const { keyCode } = event; if ( + ! isPreviewOnly && ( keyCode === ENTER || keyCode === SPACE ) && ! currentPostIsTrashed ) { @@ -61,9 +62,11 @@ export default function useEditorIframeProps() { } }, onClick: () => { - history.push( { ...params, canvas: 'edit' }, undefined, { - transition: 'canvas-mode-edit-transition', - } ); + if ( ! isPreviewOnly ) { + history.push( { ...params, canvas: 'edit' }, undefined, { + transition: 'canvas-mode-edit-transition', + } ); + } }, onClickCapture: ( event ) => { if ( currentPostIsTrashed ) { diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 8f0ca0c5b29718..f522c8ba01b247 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -78,7 +78,10 @@ const siteIconVariants = { }, }; -export default function EditSiteEditor( { isPostsList = false } ) { +export default function EditSiteEditor( { + isPostsList = false, + isPreviewOnly, +} ) { const disableMotion = useReducedMotion(); const { params } = useLocation(); const { canvas = 'view' } = params; @@ -128,7 +131,7 @@ export default function EditSiteEditor( { isPostsList = false } ) { useEditorTitle(); const _isPreviewingTheme = isPreviewingTheme(); const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); - const iframeProps = useEditorIframeProps(); + const iframeProps = useEditorIframeProps( isPreviewOnly ); const isEditMode = canvas === 'edit'; const postWithTemplate = !! contextPostId; const loadingProgressId = useInstanceId( 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 be245ba8e18a11..0e0c0e86dcf44e 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 @@ -4,9 +4,11 @@ import { __ } from '@wordpress/i18n'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -import { useCallback } from '@wordpress/element'; +import { useViewportMatch } from '@wordpress/compose'; +import { useCallback, useState } from '@wordpress/element'; import { store as preferencesStore } from '@wordpress/preferences'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { layout, seen } from '@wordpress/icons'; /** * Internal dependencies @@ -19,6 +21,7 @@ import StyleBook from '../style-book'; import useGlobalStylesRevisions from '../global-styles/screen-revisions/use-global-styles-revisions'; import SidebarNavigationScreenDetailsFooter from '../sidebar-navigation-screen-details-footer'; import { MainSidebarNavigationContent } from '../sidebar-navigation-screen-main'; +import SidebarButton from '../sidebar-button'; const { useLocation, useHistory } = unlock( routerPrivateApis ); @@ -71,6 +74,8 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { const { revisions, isLoading: isLoadingRevisions } = useGlobalStylesRevisions(); const { openGeneralSidebar } = useDispatch( editSiteStore ); + const [ isViewingStyleBook, setIsViewingStyleBook ] = useState( true ); + const isMobileViewport = useViewportMatch( 'medium', '<' ); const { setEditorCanvasContainerView } = unlock( useDispatch( editSiteStore ) ); @@ -125,12 +130,31 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { } + actions={ + <> + { ! isMobileViewport && ( + + setIsViewingStyleBook( + ! isViewingStyleBook + ) + } + /> + ) } + + } footer={ shouldShowGlobalStylesFooter && ( - { canvas === 'view' && ( + { canvas === 'view' && isViewingStyleBook && ( false } From cf17a31ccb92bdf4726b9ae8f6d0255d13d99da4 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 27 Sep 2024 13:48:44 +0100 Subject: [PATCH 06/27] Add path sync mechanism and sylebook block selection --- .../src/components/global-styles/ui.js | 49 +++++++++++++++++-- .../index.js | 7 +++ 2 files changed, 53 insertions(+), 3 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 9ca88f40f1f001..1492e10b743bfa 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -19,7 +19,8 @@ import { __ } from '@wordpress/i18n'; import { store as preferencesStore } from '@wordpress/preferences'; import { moreVertical } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; -import { useEffect } from '@wordpress/element'; +import { useEffect, Fragment } from '@wordpress/element'; +import { usePrevious } from '@wordpress/compose'; /** * Internal dependencies @@ -291,18 +292,53 @@ function GlobalStylesEditorCanvasContainerLink() { }, [ editorCanvasContainerView, isRevisionsOpen, goTo ] ); } -function GlobalStylesUI() { +function NavigationSync( { path: parentPath, onPathChange, children } ) { + const navigator = useNavigator(); + const { path: childPath } = navigator.location; + const previousParentPath = usePrevious( parentPath ); + const previousChildPath = usePrevious( childPath ); + useEffect( () => { + console.log({ + parentPath, + previousChildPath, + previousParentPath, + childPath, + }); + if ( parentPath !== childPath ) { + if ( parentPath !== previousParentPath ) { + navigator.goTo( parentPath ); + } else if ( + childPath !== previousChildPath && + parentPath !== childPath + ) { + onPathChange( childPath ); + } + } + }, [ + onPathChange, + parentPath, + previousChildPath, + previousParentPath, + childPath, + navigator, + ] ); + return children; +} + +function GlobalStylesUI( { path, onPathChange } ) { const blocks = getBlockTypes(); const editorCanvasContainerView = useSelect( ( select ) => unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), [] ); + const WrapperComponent = path && onPathChange ? NavigationSync : Fragment; return ( + @@ -390,7 +426,9 @@ function GlobalStylesUI() { ) ) } @@ -401,7 +439,12 @@ function GlobalStylesUI() { +<<<<<<< HEAD +======= + + +>>>>>>> 08de320868a (Add path sync mechanism and sylebook block selection) ); } export { GlobalStylesMenuSlot }; 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 0e0c0e86dcf44e..b9a8a87c14b4c2 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 @@ -170,6 +170,13 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { isSelected={ () => false } showCloseButton={ false } showTabs={ false } + onSelect={ ( blockName ) => { + history.push( { + path: `/wp_global_styles/blocks/${ encodeURIComponent( + blockName + ) }`, + } ); + } } /> ) } From 1321637786739daa5392f5e95fc0cf945c99f4ad Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 27 Sep 2024 15:26:19 +0100 Subject: [PATCH 07/27] apply code feedback --- .../src/components/global-styles/ui.js | 19 ++++---- .../sidebar-global-styles-wrapper/index.js | 44 +++++++++++++++++++ 2 files changed, 52 insertions(+), 11 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 1492e10b743bfa..995a3a3fd93dbb 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -292,25 +292,16 @@ function GlobalStylesEditorCanvasContainerLink() { }, [ editorCanvasContainerView, isRevisionsOpen, goTo ] ); } -function NavigationSync( { path: parentPath, onPathChange, children } ) { +function useNavigatorSync( parentPath, onPathChange ) { const navigator = useNavigator(); const { path: childPath } = navigator.location; const previousParentPath = usePrevious( parentPath ); const previousChildPath = usePrevious( childPath ); useEffect( () => { - console.log({ - parentPath, - previousChildPath, - previousParentPath, - childPath, - }); if ( parentPath !== childPath ) { if ( parentPath !== previousParentPath ) { navigator.goTo( parentPath ); - } else if ( - childPath !== previousChildPath && - parentPath !== childPath - ) { + } else if ( childPath !== previousChildPath ) { onPathChange( childPath ); } } @@ -322,6 +313,12 @@ function NavigationSync( { path: parentPath, onPathChange, children } ) { childPath, navigator, ] ); +} + +// This component is used to wrap the hook in order to conditionally execute it +// when the parent component is used on controlled mode. +function NavigationSync( { path: parentPath, onPathChange, children } ) { + useNavigatorSync( parentPath, onPathChange ); return children; } 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 new file mode 100644 index 00000000000000..0849d4c6fa5151 --- /dev/null +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/index.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useMemo } from '@wordpress/element'; +import { privateApis as routerPrivateApis } from '@wordpress/router'; + +/** + * Internal dependencies + */ +import GlobalStylesUI from '../global-styles/ui'; +import Page from '../page'; +import { unlock } from '../../lock-unlock'; + +const { useLocation, useHistory } = unlock( routerPrivateApis ); + +const GLOBAL_STYLES_PATH_PREFIX = '/wp_global_styles'; + +export default function GlobalStylesUIWrapper() { + const { params } = useLocation(); + const history = useHistory(); + const pathWithPrefix = params.path; + const [ path, onPathChange ] = useMemo( () => { + const processedPath = pathWithPrefix.substring( + GLOBAL_STYLES_PATH_PREFIX.length + ); + return [ + processedPath ? processedPath : '/', + ( newPath ) => { + history.push( { + path: + ! newPath || newPath === '/' + ? GLOBAL_STYLES_PATH_PREFIX + : `${ GLOBAL_STYLES_PATH_PREFIX }${ newPath }`, + } ); + }, + ]; + }, [ pathWithPrefix, history ] ); + return ( + + + + ); +} From 5ec9ac3f53b0e5c5cbf15e1919655c0ffac9d73d Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 27 Sep 2024 18:57:38 +0100 Subject: [PATCH 08/27] no styles drill down; disable style books click; --- .../edit-site/src/components/layout/index.js | 1 + .../src/components/resizable-frame/index.js | 5 ++- .../index.js | 41 ++++--------------- .../sidebar-navigation-screen-main/index.js | 7 +--- 4 files changed, 14 insertions(+), 40 deletions(-) diff --git a/packages/edit-site/src/components/layout/index.js b/packages/edit-site/src/components/layout/index.js index 551d1448fde5c9..c763b7016c8122 100644 --- a/packages/edit-site/src/components/layout/index.js +++ b/packages/edit-site/src/components/layout/index.js @@ -213,6 +213,7 @@ export default function Layout( { route } ) { gradientValue ?? backgroundColor, } } + hasResize={ widths?.hasResize } > { areas.preview } diff --git a/packages/edit-site/src/components/resizable-frame/index.js b/packages/edit-site/src/components/resizable-frame/index.js index 95ccfe4fdd966f..5944d7a1b370b6 100644 --- a/packages/edit-site/src/components/resizable-frame/index.js +++ b/packages/edit-site/src/components/resizable-frame/index.js @@ -82,6 +82,7 @@ function ResizableFrame( { isOversized, setIsOversized, isReady, + hasResize = true, children, /** The default (unresized) width/height of the frame, based on the space availalbe in the viewport. */ defaultSize, @@ -263,8 +264,8 @@ function ResizableFrame( { bottom: false, // Resizing will be disabled until the editor content is loaded. ...( isRTL() - ? { right: isReady, left: false } - : { left: isReady, right: false } ), + ? { right: isReady && hasResize, left: false } + : { left: isReady && hasResize, right: false } ), topRight: false, bottomRight: false, bottomLeft: false, 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 b9a8a87c14b4c2..7e5aa69dda2beb 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 @@ -42,32 +42,16 @@ export function SidebarNavigationItemGlobalStyles( props ) { { ...props } params={ { path: '/wp_global_styles' } } uid="global-styles-navigation-item" + aria-current={ + params.path && params.path.startsWith( '/wp_global_styles' ) + } /> ); } - return ( - { - // Switch to edit mode. - history.push( - { - ...params, - canvas: 'edit', - }, - undefined, - { - transition: 'canvas-mode-edit-transition', - } - ); - // Open global styles sidebar. - openGeneralSidebar( 'edit-site/global-styles' ); - } } - /> - ); + return ; } -export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { +export default function SidebarNavigationScreenGlobalStyles() { const history = useHistory(); const { params } = useLocation(); const { canvas = 'view' } = params; @@ -124,15 +108,14 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { const modifiedDateTime = revisions?.[ 0 ]?.modified; const shouldShowGlobalStylesFooter = hasRevisions && ! isLoadingRevisions && modifiedDateTime; - return ( <> } @@ -170,13 +153,7 @@ export default function SidebarNavigationScreenGlobalStyles( { backPath } ) { isSelected={ () => false } showCloseButton={ false } showTabs={ false } - onSelect={ ( blockName ) => { - history.push( { - path: `/wp_global_styles/blocks/${ encodeURIComponent( - blockName - ) }`, - } ); - } } + onClick={ () => {} } /> ) } 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 dbc160f8fbb84a..4eee498c6eb0d5 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 @@ -21,7 +21,7 @@ import { PATTERN_TYPES, } from '../../utils/constants'; -export function MainSidebarNavigationContent( { activeItem } ) { +export function MainSidebarNavigationContent() { return ( { __( 'Navigation' ) } @@ -38,7 +37,6 @@ export function MainSidebarNavigationContent( { activeItem } ) { className="is-selected" withChevron icon={ styles } - aria-current={ activeItem === 'styles-navigation-item' } > { __( 'Styles' ) } @@ -47,7 +45,6 @@ export function MainSidebarNavigationContent( { activeItem } ) { params={ { postType: 'page' } } withChevron icon={ page } - aria-current={ activeItem === 'page-navigation-item' } > { __( 'Pages' ) } @@ -56,7 +53,6 @@ export function MainSidebarNavigationContent( { activeItem } ) { params={ { postType: TEMPLATE_POST_TYPE } } withChevron icon={ layout } - aria-current={ activeItem === 'template-navigation-item' } > { __( 'Templates' ) } @@ -65,7 +61,6 @@ export function MainSidebarNavigationContent( { activeItem } ) { params={ { postType: PATTERN_TYPES.user } } withChevron icon={ symbol } - aria-current={ activeItem === 'patterns-navigation-item' } > { __( 'Patterns' ) } From 667644891db484f8bfa15c1ffc53a914ddea4e7f Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 4 Oct 2024 20:10:35 +0100 Subject: [PATCH 09/27] include padding logic --- .../src/components/global-styles/ui.js | 14 +++++------- .../sidebar-global-styles-wrapper/style.scss | 22 +++++++++++++++++++ packages/edit-site/src/style.scss | 1 + 3 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index 995a3a3fd93dbb..b45b837640fd73 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -335,7 +335,10 @@ function GlobalStylesUI( { path, onPathChange } ) { className="edit-site-global-styles-sidebar__navigator-provider" initialPath="/" > - + @@ -423,9 +426,7 @@ function GlobalStylesUI( { path, onPathChange } ) { ) ) } @@ -436,12 +437,7 @@ function GlobalStylesUI( { path, onPathChange } ) { -<<<<<<< HEAD -======= - - ->>>>>>> 08de320868a (Add path sync mechanism and sylebook block selection) ); } export { GlobalStylesMenuSlot }; diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss new file mode 100644 index 00000000000000..a6473e799dbc0c --- /dev/null +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -0,0 +1,22 @@ +.edit-site-page-content .edit-site-global-styles-sidebar__navigator-screen { + overflow-y: auto; +} + +.edit-site-styes .edit-site-page-content { + .edit-site-global-styles-sidebar__navigator-provider { + padding-left: $grid-unit-60; + padding-right: $grid-unit-60; + @container (max-width: 430px) { + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + } + } + .edit-site-page-header { + padding-left: $grid-unit-70; + padding-right: $grid-unit-70; + @container (max-width: 430px) { + padding-left: $grid-unit-30; + padding-right: $grid-unit-30; + } + } +} \ No newline at end of file diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index b2f5c826046b79..03ec43648f120f 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -38,6 +38,7 @@ @import "./components/global-styles/font-library-modal/style.scss"; @import "./components/pagination/style.scss"; @import "./components/global-styles/variations/style.scss"; +@import "./components/sidebar-global-styles-wrapper/style.scss"; /* stylelint-disable -- Disable reason: View Transitions not supported properly by stylelint. */ ::view-transition-image-pair(root) { From 32bd000cb6fdb03f49f65c11844c95b92b61630a Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Fri, 4 Oct 2024 21:30:58 +0100 Subject: [PATCH 10/27] lint fixes --- .../sidebar-global-styles-wrapper/style.scss | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss index a6473e799dbc0c..801b203234fe3c 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -1,22 +1,22 @@ .edit-site-page-content .edit-site-global-styles-sidebar__navigator-screen { - overflow-y: auto; + overflow-y: auto; } .edit-site-styes .edit-site-page-content { - .edit-site-global-styles-sidebar__navigator-provider { - padding-left: $grid-unit-60; - padding-right: $grid-unit-60; - @container (max-width: 430px) { - padding-left: $grid-unit-15; - padding-right: $grid-unit-15; - } - } - .edit-site-page-header { - padding-left: $grid-unit-70; - padding-right: $grid-unit-70; - @container (max-width: 430px) { - padding-left: $grid-unit-30; - padding-right: $grid-unit-30; - } - } -} \ No newline at end of file + .edit-site-global-styles-sidebar__navigator-provider { + padding-left: $grid-unit-60; + padding-right: $grid-unit-60; + @container (max-width: 430px) { + padding-left: $grid-unit-15; + padding-right: $grid-unit-15; + } + } + .edit-site-page-header { + padding-left: $grid-unit-70; + padding-right: $grid-unit-70; + @container (max-width: 430px) { + padding-left: $grid-unit-30; + padding-right: $grid-unit-30; + } + } +} From b2c2155fa800075f1f7d37ee467286587b7e12e1 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 8 Oct 2024 11:53:49 +0100 Subject: [PATCH 11/27] feedback --- .../components/sidebar-global-styles-wrapper/style.scss | 9 +++++---- .../components/sidebar-navigation-screen-main/index.js | 2 -- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss index 801b203234fe3c..9d80525ba6db00 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -4,16 +4,17 @@ .edit-site-styes .edit-site-page-content { .edit-site-global-styles-sidebar__navigator-provider { - padding-left: $grid-unit-60; - padding-right: $grid-unit-60; + padding-top: $grid-unit-15; + padding-left: $grid-unit-40; + padding-right: $grid-unit-40; @container (max-width: 430px) { padding-left: $grid-unit-15; padding-right: $grid-unit-15; } } .edit-site-page-header { - padding-left: $grid-unit-70; - padding-right: $grid-unit-70; + padding-left: $grid-unit-50; + padding-right: $grid-unit-50; @container (max-width: 430px) { padding-left: $grid-unit-30; padding-right: $grid-unit-30; 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 4eee498c6eb0d5..49e60d44047326 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 @@ -34,8 +34,6 @@ export function MainSidebarNavigationContent() { { __( 'Styles' ) } From 0b9e459ac5afa64c0c2286e66a518de62a64f2b7 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 8 Oct 2024 12:18:29 +0100 Subject: [PATCH 12/27] make padding equal to templates --- .../components/sidebar-global-styles-wrapper/style.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss index 9d80525ba6db00..43f26fccfcaf94 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -5,16 +5,16 @@ .edit-site-styes .edit-site-page-content { .edit-site-global-styles-sidebar__navigator-provider { padding-top: $grid-unit-15; - padding-left: $grid-unit-40; - padding-right: $grid-unit-40; + padding-left: $grid-unit-50; + padding-right: $grid-unit-50; @container (max-width: 430px) { padding-left: $grid-unit-15; padding-right: $grid-unit-15; } } .edit-site-page-header { - padding-left: $grid-unit-50; - padding-right: $grid-unit-50; + padding-left: $grid-unit-60; + padding-right: $grid-unit-60; @container (max-width: 430px) { padding-left: $grid-unit-30; padding-right: $grid-unit-30; From 9c8be48e5bb44faa5bd0643aa8da7d42b9c21707 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 8 Oct 2024 16:34:57 +0100 Subject: [PATCH 13/27] remove borders --- .../sidebar-global-styles-wrapper/style.scss | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss index 43f26fccfcaf94..b5abcdced9bd1e 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -1,9 +1,14 @@ -.edit-site-page-content .edit-site-global-styles-sidebar__navigator-screen { - overflow-y: auto; -} - .edit-site-styes .edit-site-page-content { + .edit-site-global-styles-screen-root { + & > div > hr { + display: none; + } + } .edit-site-global-styles-sidebar__navigator-provider { + .components-tools-panel { + border-top: none; + } + overflow-y: auto; padding-top: $grid-unit-15; padding-left: $grid-unit-50; padding-right: $grid-unit-50; From df3d341af05e19a9911189d99e046c867c72185d Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 23 Oct 2024 11:18:32 +1100 Subject: [PATCH 14/27] Manual update of route files after https://github.com/WordPress/gutenberg/pull/66030 --- .../index.js | 2 -- .../components/site-editor-routes/styles-edit.js | 16 +++++++++++++--- .../components/site-editor-routes/styles-view.js | 15 +++++++++++++-- 3 files changed, 26 insertions(+), 7 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 7e5aa69dda2beb..f10d88a1172505 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 @@ -26,8 +26,6 @@ import SidebarButton from '../sidebar-button'; const { useLocation, useHistory } = unlock( routerPrivateApis ); export function SidebarNavigationItemGlobalStyles( props ) { - const { openGeneralSidebar } = useDispatch( editSiteStore ); - const history = useHistory(); const { params } = useLocation(); const hasGlobalStyleVariations = useSelect( ( select ) => diff --git a/packages/edit-site/src/components/site-editor-routes/styles-edit.js b/packages/edit-site/src/components/site-editor-routes/styles-edit.js index ff52b957bc3609..1100f1149b0bae 100644 --- a/packages/edit-site/src/components/site-editor-routes/styles-edit.js +++ b/packages/edit-site/src/components/site-editor-routes/styles-edit.js @@ -3,15 +3,25 @@ */ import Editor from '../editor'; import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; +import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper'; export const stylesEditRoute = { name: 'styles-edit', match: ( params ) => { - return params.path === '/wp_global_styles' && params.canvas === 'edit'; + return ( + params.path && + params.path.startsWith( '/wp_global_styles' ) && + params.canvas !== 'edit' + ); }, areas: { + content: , sidebar: , - preview: , - mobile: , + preview: , + mobile: , + }, + widths: { + content: 380, + hasResize: false, }, }; diff --git a/packages/edit-site/src/components/site-editor-routes/styles-view.js b/packages/edit-site/src/components/site-editor-routes/styles-view.js index 856a610eb23677..703f4eb87f9447 100644 --- a/packages/edit-site/src/components/site-editor-routes/styles-view.js +++ b/packages/edit-site/src/components/site-editor-routes/styles-view.js @@ -3,14 +3,25 @@ */ import Editor from '../editor'; import SidebarNavigationScreenGlobalStyles from '../sidebar-navigation-screen-global-styles'; +import GlobalStylesUIWrapper from '../sidebar-global-styles-wrapper'; export const stylesViewRoute = { name: 'styles-view', match: ( params ) => { - return params.path === '/wp_global_styles' && params.canvas !== 'edit'; + return ( + params.path && + params.path.startsWith( '/wp_global_styles' ) && + params.canvas !== 'edit' + ); }, areas: { + content: , sidebar: , - preview: , + preview: , + mobile: , + }, + widths: { + content: 380, + hasResize: false, }, }; From 70a1769f6191a1e8c43b23a8a8848a7f4a3a471f Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 23 Oct 2024 11:50:19 +1100 Subject: [PATCH 15/27] Rename classname Tweak paddings so that the scrollbar fits snug against the right hand side of the parent container --- .../sidebar-global-styles-wrapper/index.js | 2 +- .../sidebar-global-styles-wrapper/style.scss | 14 +++++++++----- 2 files changed, 10 insertions(+), 6 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 0849d4c6fa5151..bf9233735faf51 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 @@ -37,7 +37,7 @@ export default function GlobalStylesUIWrapper() { ]; }, [ pathWithPrefix, history ] ); return ( - + ); diff --git a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss index b5abcdced9bd1e..f5c1c54e01cb88 100644 --- a/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss +++ b/packages/edit-site/src/components/sidebar-global-styles-wrapper/style.scss @@ -1,5 +1,6 @@ -.edit-site-styes .edit-site-page-content { +.edit-site-styles .edit-site-page-content { .edit-site-global-styles-screen-root { + box-shadow: none; & > div > hr { display: none; } @@ -9,12 +10,15 @@ border-top: none; } overflow-y: auto; - padding-top: $grid-unit-15; - padding-left: $grid-unit-50; - padding-right: $grid-unit-50; - @container (max-width: 430px) { + padding-left: 0; + padding-right: 0; + + .edit-site-global-styles-sidebar__navigator-screen { + padding-top: $grid-unit-15; padding-left: $grid-unit-15; padding-right: $grid-unit-15; + padding-bottom: $grid-unit-15; + outline: none; } } .edit-site-page-header { From 7d6a0ff32ac778d5464dcb12191348f6e9c5a875 Mon Sep 17 00:00:00 2001 From: ramon Date: Wed, 23 Oct 2024 14:36:49 +1100 Subject: [PATCH 16/27] Fragment doesn't accept props Scroll to block where a path is passed to Style book --- .../src/components/global-styles/ui.js | 9 ++- .../index.js | 19 ++++++- .../src/components/style-book/index.js | 57 +++++++++++++++++-- 3 files changed, 71 insertions(+), 14 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js index b45b837640fd73..2edea0fdbc3da3 100644 --- a/packages/edit-site/src/components/global-styles/ui.js +++ b/packages/edit-site/src/components/global-styles/ui.js @@ -329,16 +329,15 @@ function GlobalStylesUI( { path, onPathChange } ) { unlock( select( editSiteStore ) ).getEditorCanvasContainerView(), [] ); - const WrapperComponent = path && onPathChange ? NavigationSync : Fragment; + return ( - + { path && onPathChange && ( + + ) } 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 f10d88a1172505..e95d17b332f1ed 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 @@ -52,7 +52,7 @@ export function SidebarNavigationItemGlobalStyles( props ) { export default function SidebarNavigationScreenGlobalStyles() { const history = useHistory(); const { params } = useLocation(); - const { canvas = 'view' } = params; + const { canvas = 'view', path = '' } = params; const { revisions, isLoading: isLoadingRevisions } = useGlobalStylesRevisions(); const { openGeneralSidebar } = useDispatch( editSiteStore ); @@ -148,10 +148,23 @@ export default function SidebarNavigationScreenGlobalStyles() { { canvas === 'view' && isViewingStyleBook && ( false } showCloseButton={ false } showTabs={ false } - onClick={ () => {} } + isSelected={ ( blockName ) => + // Match '/blocks/core%2Fbutton' and + // '/blocks/core%2Fbutton/typography', but not + // '/blocks/core%2Fbuttons'. + path === + `/wp_global_styles/blocks/${ encodeURIComponent( + blockName + ) }` || + path.startsWith( + `/wp_global_styles/blocks/${ encodeURIComponent( + blockName + ) }/` + ) + } + path={ path } /> ) } diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index e9660323b83734..b5ec9fd5a99a51 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -24,7 +24,14 @@ import { import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { useSelect } from '@wordpress/data'; import { useResizeObserver } from '@wordpress/compose'; -import { useMemo, useState, memo, useContext } from '@wordpress/element'; +import { + useMemo, + useState, + memo, + useContext, + useRef, + useLayoutEffect, +} from '@wordpress/element'; import { ENTER, SPACE } from '@wordpress/keycodes'; /** @@ -48,11 +55,34 @@ const { const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis ); const { Tabs } = unlock( componentsPrivateApis ); - +const noop = () => {}; function isObjectEmpty( object ) { return ! object || Object.keys( object ).length === 0; } +const scrollToSection = ( anchor, iframe ) => { + if ( ! iframe ) { + return; + } + const frameWindow = iframe.contentWindow; + const element = frameWindow.document.getElementById( anchor ); + if ( element ) { + element.scrollIntoView( { + behavior: 'smooth', + } ); + } +}; + +const getStyleBookNavigationFromPath = ( path ) => { + if ( path && typeof path === 'string' && path.includes( '/blocks/' ) ) { + const block = decodeURIComponent( path.split( '/blocks/' )[ 1 ] ); + return { + block, + }; + } + return null; +}; + /** * Retrieves colors, gradients, and duotone filters from Global Styles. * The inclusion of default (Core) palettes is controlled by the relevant @@ -131,12 +161,13 @@ function useMultiOriginPalettes() { function StyleBook( { enableResizing = true, isSelected, - onClick, - onSelect, + onClick = noop, + onSelect = noop, showCloseButton = true, - onClose, + onClose = noop, showTabs = true, userConfig = {}, + path = '', } ) { const [ resizeObserver, sizes ] = useResizeObserver(); const [ textColor ] = useGlobalStyle( 'color.text' ); @@ -154,6 +185,7 @@ function StyleBook( { ); const { base: baseConfig } = useContext( GlobalStylesContext ); + const goTo = getStyleBookNavigationFromPath( path ); const mergedConfig = useMemo( () => { if ( ! isObjectEmpty( userConfig ) && ! isObjectEmpty( baseConfig ) ) { @@ -228,6 +260,7 @@ function StyleBook( { settings={ settings } sizes={ sizes } title={ tab.title } + goTo={ goTo } /> ) ) } @@ -240,6 +273,7 @@ function StyleBook( { onSelect={ onSelect } settings={ settings } sizes={ sizes } + goTo={ goTo } /> ) } @@ -256,9 +290,11 @@ const StyleBookBody = ( { settings, sizes, title, + goTo, } ) => { const [ isFocused, setIsFocused ] = useState( false ); - + const [ hasIframeLoaded, setHasIframeLoaded ] = useState( false ); + const iframeRef = useRef( null ); // 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 = { @@ -287,8 +323,17 @@ const StyleBookBody = ( { readonly: true, }; + const handleLoad = () => setHasIframeLoaded( true ); + useLayoutEffect( () => { + if ( goTo?.block && hasIframeLoaded && iframeRef?.current ) { + scrollToSection( `example-${ goTo?.block }`, iframeRef?.current ); + } + }, [ iframeRef?.current, goTo?.block, scrollToSection, hasIframeLoaded ] ); + return (