From 81f7a755be29f40460c5524c88a48571048dd330 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Wed, 18 Dec 2024 15:53:33 +1100 Subject: [PATCH 1/6] Try splitting style book into sections. --- .../src/components/style-book/constants.ts | 49 ++++++++++ .../src/components/style-book/index.js | 95 +++++++++++-------- 2 files changed, 107 insertions(+), 37 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index ea99279fd9e655..7b420e12f4a9de 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -148,6 +148,55 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ }, ]; +// Style book preview subcategories for all blocks section. +export const STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [ + ...STYLE_BOOK_THEME_SUBCATEGORIES, + { + slug: 'media', + title: __( 'Media' ), + blocks: [ 'core/post-featured-image' ], + }, + { + slug: 'widgets', + title: __( 'Widgets' ), + blocks: [], + }, + { + slug: 'embed', + title: __( 'Embeds' ), + include: [], + }, +]; + +// Style book preview categories are organised slightly differently to the editor ones. +export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [ + { + slug: 'overview', + title: __( 'Overview' ), + blocks: [], + }, + { + slug: 'text', + title: __( 'Text' ), + blocks: [ + 'core/post-content', + 'core/home-link', + 'core/navigation-link', + ], + }, + { + slug: 'colors', + title: __( 'Colors' ), + blocks: [], + }, + { + slug: 'blocks', + title: __( 'All Blocks' ), + blocks: [], + subcategories: STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES, + }, +]; + // Forming a "block formatting context" to prevent margin collapsing. // @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context const ROOT_CONTAINER = ` diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 4c93d2ed8db895..d650d62c192995 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -49,8 +49,11 @@ import { 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'; import { GlobalStylesRenderer } from '../global-styles-renderer'; +import { + STYLE_BOOK_COLOR_GROUPS, + STYLE_BOOK_PREVIEW_CATEGORIES, +} from '../style-book/constants'; const { ExperimentalBlockEditorProvider, @@ -311,29 +314,43 @@ function StyleBook( { ) ) } - { tabs.map( ( tab ) => ( - - - - ) ) } + { tabs.map( ( tab ) => { + const categoryDefinition = tab.slug + ? getTopLevelStyleBookCategories().find( + ( _category ) => + _category.slug === tab.slug + ) + : null; + const filteredExamples = categoryDefinition + ? getExamplesByCategory( + categoryDefinition, + examples + ) + : { examples }; + return ( + + + + ); + } ) } ) : ( { const examples = getExamples( colors ); const examplesForSinglePageUse = getExamplesForSinglePageUse( examples ); + let previewCategory = null; + if ( section.includes( '/colors' ) ) { + previewCategory = 'colors'; + } else if ( section.includes( '/typography' ) ) { + previewCategory = 'text'; + } else if ( section.includes( '/blocks' ) ) { + previewCategory = 'blocks'; + } else if ( ! isStatic ) { + previewCategory = 'overview'; + } + const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find( + ( category ) => category.slug === previewCategory + ); + const filteredExamples = categoryDefinition + ? getExamplesByCategory( categoryDefinition, examples ) + : { examples: examplesForSinglePageUse }; const { base: baseConfig } = useContext( GlobalStylesContext ); const goTo = getStyleBookNavigationFromPath( section ); @@ -435,7 +468,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { { }; export const StyleBookBody = ( { - category, examples, isSelected, onClick, @@ -527,8 +559,7 @@ export const StyleBookBody = ( { className={ clsx( 'edit-site-style-book__examples', { 'is-wide': sizes.width > 600, } ) } - examples={ examples } - category={ category } + filteredExamples={ examples } label={ title ? sprintf( @@ -540,24 +571,14 @@ export const StyleBookBody = ( { } isSelected={ isSelected } onSelect={ onSelect } - key={ category } + key={ title } /> ); }; const Examples = memo( - ( { className, examples, category, label, isSelected, onSelect } ) => { - const categoryDefinition = category - ? getTopLevelStyleBookCategories().find( - ( _category ) => _category.slug === category - ) - : null; - - const filteredExamples = categoryDefinition - ? getExamplesByCategory( categoryDefinition, examples ) - : { examples }; - + ( { className, filteredExamples, label, isSelected, onSelect } ) => { return ( Date: Fri, 20 Dec 2024 14:15:44 +1100 Subject: [PATCH 2/6] Single block view --- .../src/components/style-book/constants.ts | 4 ++-- .../src/components/style-book/index.js | 24 +++++++++++++++++-- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts index 7b420e12f4a9de..dcd41287fa239d 100644 --- a/packages/edit-site/src/components/style-book/constants.ts +++ b/packages/edit-site/src/components/style-book/constants.ts @@ -149,7 +149,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [ ]; // Style book preview subcategories for all blocks section. -export const STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [ +export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [ ...STYLE_BOOK_THEME_SUBCATEGORIES, { slug: 'media', @@ -193,7 +193,7 @@ export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [ slug: 'blocks', title: __( 'All Blocks' ), blocks: [], - subcategories: STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES, + subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES, }, ]; diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index d650d62c192995..c51c37141ce01e 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -429,15 +429,35 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { previewCategory = 'text'; } else if ( section.includes( '/blocks' ) ) { previewCategory = 'blocks'; + const blockName = + decodeURIComponent( section ).split( '/blocks/' )[ 1 ]; + if ( blockName ) { + previewCategory = blockName; + } } else if ( ! isStatic ) { previewCategory = 'overview'; } const categoryDefinition = STYLE_BOOK_PREVIEW_CATEGORIES.find( ( category ) => category.slug === previewCategory ); + + // If there's no category definition there may be a single block. const filteredExamples = categoryDefinition ? getExamplesByCategory( categoryDefinition, examples ) - : { examples: examplesForSinglePageUse }; + : { + examples: [ + examples.find( + ( example ) => example.name === previewCategory + ), + ], + }; + + // If the filtered examples are empty, show all examples. + const displayedExamples = + filteredExamples.examples || filteredExamples.subcategories + ? filteredExamples + : { examples: examplesForSinglePageUse }; + const { base: baseConfig } = useContext( GlobalStylesContext ); const goTo = getStyleBookNavigationFromPath( section ); @@ -468,7 +488,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { Date: Fri, 20 Dec 2024 15:17:30 +1100 Subject: [PATCH 3/6] Fix classic stylebook logic --- packages/edit-site/src/components/style-book/index.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index c51c37141ce01e..921550d6eeb3b5 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -452,11 +452,10 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { ], }; - // If the filtered examples are empty, show all examples. - const displayedExamples = - filteredExamples.examples || filteredExamples.subcategories - ? filteredExamples - : { examples: examplesForSinglePageUse }; + // If there's no preview category, show all examples. + const displayedExamples = previewCategory + ? filteredExamples + : { examples: examplesForSinglePageUse }; const { base: baseConfig } = useContext( GlobalStylesContext ); const goTo = getStyleBookNavigationFromPath( section ); From 81b2e37a1f4581099c850e0f5d137a061cbef569 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 20 Dec 2024 15:59:25 +1100 Subject: [PATCH 4/6] Blocks without examples should show all blocks --- packages/edit-site/src/components/style-book/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 921550d6eeb3b5..81c0a06507ee56 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -431,7 +431,10 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { previewCategory = 'blocks'; const blockName = decodeURIComponent( section ).split( '/blocks/' )[ 1 ]; - if ( blockName ) { + if ( + blockName && + examples.find( ( example ) => example.name === blockName ) + ) { previewCategory = blockName; } } else if ( ! isStatic ) { From 5c101c2926c766df7f2406a0b441da9a4fc5f5f0 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 20 Dec 2024 16:33:49 +1100 Subject: [PATCH 5/6] Update scrolling logic to always scroll to top on long pages --- .../src/components/style-book/index.js | 33 ++++--------------- 1 file changed, 7 insertions(+), 26 deletions(-) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 81c0a06507ee56..6b68cb420ee9cf 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -92,35 +92,23 @@ const scrollToSection = ( anchorId, iframe ) => { }; /** - * Parses a Block Editor navigation path to extract the block name and - * build a style book navigation path. The object can be extended to include a category, - * representing a style book tab/section. + * Parses a Block Editor navigation path to build a style book navigation path. + * The object can be extended to include a category, representing a style book tab/section. * * @param {string} path An internal Block Editor navigation path. * @return {null|{block: string}} An object containing the example to navigate to. */ const getStyleBookNavigationFromPath = ( path ) => { if ( path && typeof path === 'string' ) { - if ( path === '/' ) { + if ( + path === '/' || + path.startsWith( '/typography' ) || + path.startsWith( '/blocks' ) + ) { return { top: true, }; } - - if ( path.startsWith( '/typography' ) ) { - return { - block: 'typography', - }; - } - let block = path.includes( '/blocks/' ) - ? decodeURIComponent( path.split( '/blocks/' )[ 1 ] ) - : null; - // Default to theme-colors if the path ends with /colors. - block = path.endsWith( '/colors' ) ? 'theme-colors' : block; - - return { - block, - }; } return null; }; @@ -548,13 +536,6 @@ export const StyleBookBody = ( { if ( hasIframeLoaded && iframeRef?.current ) { if ( goTo?.top ) { scrollToSection( 'top', iframeRef?.current ); - return; - } - if ( goTo?.block ) { - scrollToSection( - `example-${ goTo?.block }`, - iframeRef?.current - ); } } }, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] ); From ad39bce976f0648e2b0fd047f2fe6b2d0c7cdec6 Mon Sep 17 00:00:00 2001 From: ramon Date: Mon, 23 Dec 2024 09:00:56 +1100 Subject: [PATCH 6/6] Scroll to top for color --- packages/edit-site/src/components/style-book/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 6b68cb420ee9cf..d1f20eb825345a 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -103,6 +103,7 @@ const getStyleBookNavigationFromPath = ( path ) => { if ( path === '/' || path.startsWith( '/typography' ) || + path.startsWith( '/colors' ) || path.startsWith( '/blocks' ) ) { return {