Try splitting style book into sections.

WordPress · Dec 18, 2024 · 34531f6 · 34531f6
1 parent 2af83af
commit 34531f6
Show file tree

Hide file tree

Showing 2 changed files with 107 additions and 37 deletions.
diff --git 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
@@ -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,
@@ -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 }
@@ -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 );
 
@@ -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 }
@@ -446,7 +479,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 };
 
 export const StyleBookBody = ( {
-	category,
 	examples,
 	isSelected,
 	onClick,
@@ -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(
@@ -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"