Single block view

WordPress · Dec 20, 2024 · 719aaf8 · 719aaf8
1 parent 81f7a75
commit 719aaf8
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/style-book/constants.ts b/packages/edit-site/src/components/style-book/constants.ts
@@ -149,7 +149,7 @@ export const STYLE_BOOK_CATEGORIES: StyleBookCategory[] = [
 ];
 
 // Style book preview subcategories for all blocks section.
-export const STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [
+export const STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES: StyleBookCategory[] = [
 	...STYLE_BOOK_THEME_SUBCATEGORIES,
 	{
 		slug: 'media',
@@ -193,7 +193,7 @@ export const STYLE_BOOK_PREVIEW_CATEGORIES: StyleBookCategory[] = [
 		slug: 'blocks',
 		title: __( 'All Blocks' ),
 		blocks: [],
-		subcategories: STYPE_BOOK_ALL_BLOCKS_SUBCATEGORIES,
+		subcategories: STYLE_BOOK_ALL_BLOCKS_SUBCATEGORIES,
 	},
 ];
 

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -429,15 +429,35 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 		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: examplesForSinglePageUse };
+		: {
+				examples: [
+					examples.find(
+						( example ) => example.name === previewCategory
+					),
+				],
+		  };
+
+	// If the filtered examples are empty, show all examples.
+	const displayedExamples =
+		filteredExamples.examples || filteredExamples.subcategories
+			? filteredExamples
+			: { examples: examplesForSinglePageUse };
+
 	const { base: baseConfig } = useContext( GlobalStylesContext );
 	const goTo = getStyleBookNavigationFromPath( section );
 
@@ -468,7 +488,7 @@ export const StyleBookPreview = ( { userConfig = {}, isStatic = false } ) => {
 			<BlockEditorProvider settings={ settings }>
 				<GlobalStylesRenderer disableRootPadding />
 				<StyleBookBody
-					examples={ filteredExamples }
+					examples={ displayedExamples }
 					settings={ settings }
 					goTo={ goTo }
 					sizes={ sizes }