Try splitting style book into sections. (WordPress#68071)

* 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]>
carstingaxion · Dec 22, 2024 · b1a4344 · b1a4344
1 parent 52a8062
commit b1a4344
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 63 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 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 = `

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -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,
@@ -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;
 };
@@ -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 }
@@ -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 );
 
@@ -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 }
@@ -462,7 +506,6 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 };
 
 export const StyleBookBody = ( {
-	category,
 	examples,
 	isSelected,
 	onClick,
@@ -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 ] );
@@ -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(
@@ -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"