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

Draft
wants to merge 1 commit into
base: trunk
Choose a base branch
from
+107 −37
Draft

Try splitting style book into sections. #68071

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 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 = `
Expand Down
95 changes: 58 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,7 +49,10 @@ 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 {
STYLE_BOOK_COLOR_GROUPS,
STYLE_BOOK_PREVIEW_CATEGORIES,
} from '../style-book/constants';

const {
ExperimentalBlockEditorProvider,
Expand Down Expand Up @@ -310,29 +313,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 @@ -404,6 +421,22 @@ 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';
} 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 );

Expand Down Expand Up @@ -433,7 +466,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
{ resizeObserver }
<BlockEditorProvider settings={ settings }>
<StyleBookBody
examples={ examplesForSinglePageUse }
examples={ filteredExamples }
settings={ settings }
goTo={ goTo }
sizes={ sizes }
Expand All @@ -446,7 +479,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
};

export const StyleBookBody = ( {
category,
examples,
isSelected,
onClick,
Expand Down Expand Up @@ -525,8 +557,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 @@ -538,24 +569,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