Fixed regression for styles sidebar: if no category is passed to the …

…Examples component it should render all available examples. Renamed getCategoryExamples function to getExamplesByCategory
WordPress · Sep 30, 2024 · 032182e · 032182e
1 parent 10bf3f1
commit 032182e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/packages/edit-site/src/components/style-book/categories.ts b/packages/edit-site/src/components/style-book/categories.ts
@@ -13,7 +13,7 @@ import type {
  * @param {BlockExample[]}    examples           An array of block examples.
  * @return {CategoryExamples|undefined} An object containing the category examples.
  */
-export function getCategoryExamples(
+export function getExamplesByCategory(
 	categoryDefinition: StyleBookCategory,
 	examples: BlockExample[]
 ): CategoryExamples | undefined {
@@ -24,7 +24,7 @@ export function getCategoryExamples(
 	if ( categoryDefinition?.subcategories?.length ) {
 		return categoryDefinition.subcategories.reduce(
 			( acc, subcategoryDefinition ) => {
-				const subcategoryExamples = getCategoryExamples(
+				const subcategoryExamples = getExamplesByCategory(
 					subcategoryDefinition,
 					examples
 				);

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -31,7 +31,7 @@ import { ENTER, SPACE } from '@wordpress/keycodes';
 import { unlock } from '../../lock-unlock';
 import EditorCanvasContainer from '../editor-canvas-container';
 import { STYLE_BOOK_CATEGORIES, STYLE_BOOK_IFRAME_STYLES } from './constants';
-import { getCategoryExamples } from './categories';
+import { getExamplesByCategory } from './categories';
 import { getExamples } from './examples';
 
 const {
@@ -150,7 +150,6 @@ function StyleBook( {
 					</div>
 				) : (
 					<StyleBookBody
-						category={ tabs[ 0 ].slug }
 						examples={ examples }
 						isSelected={ isSelected }
 						onClick={ onClick }
@@ -245,13 +244,15 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const categoryDefinition = STYLE_BOOK_CATEGORIES.find(
-			( _category ) => _category.slug === category
-		);
-		const filteredExamples = getCategoryExamples(
-			categoryDefinition,
-			examples
-		);
+		const categoryDefinition = category
+			? STYLE_BOOK_CATEGORIES.find(
+					( _category ) => _category.slug === category
+			  )
+			: null;
+
+		const filteredExamples = categoryDefinition
+			? getExamplesByCategory( categoryDefinition, examples )
+			: { examples };
 
 		return (
 			<Composite

diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { getCategoryExamples } from '../categories';
+import { getExamplesByCategory } from '../categories';
 import { STYLE_BOOK_CATEGORIES } from '../constants';
 
 // Fixtures
@@ -59,12 +59,12 @@ const exampleThemeBlocks = [
 ];
 
 describe( 'utils', () => {
-	describe( 'getCategoryExamples', () => {
+	describe( 'getExamplesByCategory', () => {
 		it( 'returns theme subcategories examples', () => {
 			const themeCategory = STYLE_BOOK_CATEGORIES.find(
 				( category ) => category.slug === 'theme'
 			);
-			const themeCategoryExamples = getCategoryExamples(
+			const themeCategoryExamples = getExamplesByCategory(
 				themeCategory,
 				exampleThemeBlocks
 			);