Skip to content

Commit

Permalink
Try splitting style book into sections. (#68071)
Browse files Browse the repository at this point in the history 
* Try splitting style book into sections.

* Single block view

* Fix classic stylebook logic

* Blocks without examples should show all blocks

* Update scrolling logic to always scroll to top on long pages

* Scroll to top for color

---------

Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: ramonjd <[email protected]>
  • Loading branch information
@tellthemachines @ramonjd
3 people authored Dec 22, 2024
1 parent 52a8062 commit b1a4344
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 63 deletions.
49 changes: 49 additions & 0 deletions packages/edit-site/src/components/style-book/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,6 +148,55 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
},
];

// Style book preview subcategories for all blocks section.
export const STYLE_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: STYLE_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 = `
Expand Down
151 changes: 88 additions & 63 deletions packages/edit-site/src/components/style-book/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,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,
Expand Down Expand Up @@ -91,35 +94,24 @@ 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( '/colors' ) ||
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;
};
Expand Down Expand Up @@ -313,29 +305,43 @@ function StyleBook( {
) ) }
</Tabs.TabList>
</div>
{ tabs.map( ( tab ) => (
<Tabs.TabPanel
key={ tab.slug }
tabId={ tab.slug }
focusable={ false }
className="edit-site-style-book__tabpanel"
>
<StyleBookBody
category={ tab.slug }
examples={ examples }
isSelected={ isSelected }
onSelect={ onSelect }
settings={ settings }
sizes={ sizes }
title={ tab.title }
goTo={ goTo }
/>
</Tabs.TabPanel>
) ) }
{ 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={ examplesForSinglePageUse }
examples={ { examples: examplesForSinglePageUse } }
isSelected={ isSelected }
onClick={ onClick }
onSelect={ onSelect }
Expand Down Expand Up @@ -419,6 +425,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
),
],
};

// If there's no preview category, show all examples.
const displayedExamples = previewCategory
? filteredExamples
: { examples: examplesForSinglePageUse };

const { base: baseConfig } = useContext( GlobalStylesContext );
const goTo = getStyleBookNavigationFromPath( section );

Expand Down Expand Up @@ -449,7 +493,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
<BlockEditorProvider settings={ settings }>
<GlobalStylesRenderer disableRootPadding />
<StyleBookBody
examples={ examplesForSinglePageUse }
examples={ displayedExamples }
settings={ settings }
goTo={ goTo }
sizes={ sizes }
Expand All @@ -462,7 +506,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
};

export const StyleBookBody = ( {
category,
examples,
isSelected,
onClick,
Expand Down Expand Up @@ -508,13 +551,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 ] );
Expand All @@ -541,8 +577,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(
Expand All @@ -554,24 +589,14 @@ export const StyleBookBody = ( {
}
isSelected={ isSelected }
onSelect={ onSelect }
key={ category }
key={ title }
/>
</Iframe>
);
};

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 (
<Composite
orientation="vertical"
Expand Down

1 comment on commit b1a4344

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in b1a4344.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12458256649
📝 Reported issues:

Please sign in to comment.