Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try splitting style book into sections. #68071

Merged
merged 6 commits into from
Dec 22, 2024
Merged

Try splitting style book into sections. #68071

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
81f7a75
Try splitting style book into sections.
tellthemachines Dec 18, 2024
719aaf8
Single block view
tellthemachines Dec 20, 2024
6f7541e
Fix classic stylebook logic
tellthemachines Dec 20, 2024
81b2e37
Blocks without examples should show all blocks
tellthemachines Dec 20, 2024
5c101c2
Update scrolling logic to always scroll to top on long pages
tellthemachines Dec 20, 2024
ad39bce
Scroll to top for color
ramonjd Dec 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions packages/edit-site/src/components/style-book/constants.ts
View file
Open in desktop
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
114 changes: 77 additions & 37 deletions packages/edit-site/src/components/style-book/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -311,29 +314,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 @@ -405,6 +422,41 @@ 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 ) {
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
Copy link
Member

Choose a reason for hiding this comment

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

comments-pagination, list-item and maybe some other blocks don't have any examples and will bork the whole page.

/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks%2Fcore%252Fcomments-pagination&preview=stylebook

/wp-admin/site-editor.php?p=%2Fstyles&section=%2Fblocks%2Fcore%252Flist-item&preview=stylebook

Some other blocks are listed on #64707. Also there are links to PRs where we created missing block examples.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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 );

Expand Down Expand Up @@ -435,7 +487,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 @@ -448,7 +500,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
};

export const StyleBookBody = ( {
category,
examples,
isSelected,
onClick,
Expand Down Expand Up @@ -527,8 +578,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 @@ -540,24 +590,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
Loading