Try splitting style book into sections. #68071
+137
−63
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -49,8 +49,11 @@ import { | |
| import { getExamples } from './examples'; | ||
| import { store as siteEditorStore } from '../../store'; | ||
| import { useSection } from '../sidebar-global-styles-wrapper'; | ||
| import { GlobalStylesRenderer } from '../global-styles-renderer'; | ||
| import { | ||
| STYLE_BOOK_COLOR_GROUPS, | ||
| STYLE_BOOK_PREVIEW_CATEGORIES, | ||
| } from '../style-book/constants'; | ||
|
|
||
| const { | ||
| ExperimentalBlockEditorProvider, | ||
|
|
@@ -89,35 +92,24 @@ const scrollToSection = ( anchorId, iframe ) => { | |
| }; | ||
|
|
||
| /** | ||
| * 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 === '/' || | ||
| path.startsWith( '/typography' ) || | ||
| path.startsWith( '/colors' ) || | ||
| path.startsWith( '/blocks' ) | ||
| ) { | ||
| return { | ||
| top: true, | ||
| }; | ||
| } | ||
| } | ||
| return null; | ||
| }; | ||
|
|
@@ -311,29 +303,43 @@ function StyleBook( { | |
| ) ) } | ||
| </Tabs.TabList> | ||
| </div> | ||
| { tabs.map( ( tab ) => { | ||
| const categoryDefinition = tab.slug | ||
| ? getTopLevelStyleBookCategories().find( | ||
| ( _category ) => | ||
| _category.slug === tab.slug | ||
| ) | ||
| : null; | ||
| const filteredExamples = categoryDefinition | ||
| ? getExamplesByCategory( | ||
| categoryDefinition, | ||
| examples | ||
| ) | ||
| : { examples }; | ||
| return ( | ||
| <Tabs.TabPanel | ||
| key={ tab.slug } | ||
| tabId={ tab.slug } | ||
| focusable={ false } | ||
| className="edit-site-style-book__tabpanel" | ||
| > | ||
| <StyleBookBody | ||
| category={ tab.slug } | ||
| examples={ filteredExamples } | ||
| isSelected={ isSelected } | ||
| onSelect={ onSelect } | ||
| settings={ settings } | ||
| sizes={ sizes } | ||
| title={ tab.title } | ||
| goTo={ goTo } | ||
| /> | ||
| </Tabs.TabPanel> | ||
| ); | ||
| } ) } | ||
| </Tabs> | ||
| ) : ( | ||
| <StyleBookBody | ||
| examples={ { examples: examplesForSinglePageUse } } | ||
| isSelected={ isSelected } | ||
| onClick={ onClick } | ||
| onSelect={ onSelect } | ||
|
|
@@ -405,6 +411,44 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { | |
| 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'; | ||
| const blockName = | ||
| decodeURIComponent( section ).split( '/blocks/' )[ 1 ]; | ||
| if ( | ||
| blockName && | ||
| examples.find( ( example ) => example.name === 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: [ | ||
| examples.find( | ||
| ( example ) => example.name === previewCategory | ||
|
There was a problem hiding this comment.
Some other blocks are listed on #64707. Also there are links to PRs where we created missing block examples. There was a problem hiding this comment. Oh I just fixed that! Blocks without examples should now just show the all blocks page, I think that's the best we can do until we get all the examples added. |
||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| // If there's no preview category, show all examples. | ||
| const displayedExamples = previewCategory | ||
| ? filteredExamples | ||
| : { examples: examplesForSinglePageUse }; | ||
|
|
||
| const { base: baseConfig } = useContext( GlobalStylesContext ); | ||
| const goTo = getStyleBookNavigationFromPath( section ); | ||
|
|
||
|
|
@@ -435,7 +479,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { | |
| <BlockEditorProvider settings={ settings }> | ||
| <GlobalStylesRenderer disableRootPadding /> | ||
| <StyleBookBody | ||
| examples={ displayedExamples } | ||
| settings={ settings } | ||
| goTo={ goTo } | ||
| sizes={ sizes } | ||
|
|
@@ -448,7 +492,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => { | |
| }; | ||
|
|
||
| export const StyleBookBody = ( { | ||
| examples, | ||
| isSelected, | ||
| onClick, | ||
|
|
@@ -494,13 +537,6 @@ export const StyleBookBody = ( { | |
| if ( hasIframeLoaded && iframeRef?.current ) { | ||
| if ( goTo?.top ) { | ||
| scrollToSection( 'top', iframeRef?.current ); | ||
| } | ||
| } | ||
| }, [ iframeRef?.current, goTo, scrollToSection, hasIframeLoaded ] ); | ||
|
|
@@ -527,8 +563,7 @@ export const StyleBookBody = ( { | |
| className={ clsx( 'edit-site-style-book__examples', { | ||
| 'is-wide': sizes.width > 600, | ||
| } ) } | ||
| filteredExamples={ examples } | ||
| label={ | ||
| title | ||
| ? sprintf( | ||
|
|
@@ -540,24 +575,14 @@ export const StyleBookBody = ( { | |
| } | ||
| isSelected={ isSelected } | ||
| onSelect={ onSelect } | ||
| key={ title } | ||
| /> | ||
| </Iframe> | ||
| ); | ||
| }; | ||
|
|
||
| const Examples = memo( | ||
| ( { className, filteredExamples, label, isSelected, onSelect } ) => { | ||
| return ( | ||
| <Composite | ||
| orientation="vertical" | ||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should
/colorsalso be here? Without, there's no scroll to topKapture.2024-12-23.at.08.59.48.mp4
I'll tentatively add it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done in ad39bce