Add default category

Using fixtures for tests.

Using fixtures for tests.

packages/edit-site/src/components/style-book/index.js

@@ -149,6 +149,7 @@ function StyleBook( {
 					</div>
 				) : (
 					<StyleBookBody
+						category={ tabs[ 0 ].name }
 						examples={ examples }
 						isSelected={ isSelected }
 						onClick={ onClick }

packages/edit-site/src/components/style-book/test/utils.js

@@ -1,41 +1,131 @@
 /**
  * Internal dependencies
  */
-import { getCategoryExamples, getExamples } from '../utils';
+import { getCategoryExamples } from '../utils';
 import { STYLE_BOOK_CATEGORIES } from '../constants';
 
-/**
- * WordPress dependencies
- */
-import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
-import { registerCoreBlocks } from '@wordpress/block-library';
+// Fixtures
+const exampleThemeBlocks = [
+	{
+		name: 'core/post-content',
+		title: 'Post Content',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-terms',
+		title: 'Post Terms',
+		category: 'theme',
+	},
+	{
+		name: 'core/home-link',
+		title: 'Home Link',
+		category: 'design',
+	},
+	{
+		name: 'custom/colors',
+		title: 'Colors',
+		category: 'colors',
+	},
+	{
+		name: 'core/site-logo',
+		title: 'Site Logo',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-title',
+		title: 'Site Title',
+		category: 'theme',
+	},
+	{
+		name: 'core/site-tagline',
+		title: 'Site Tagline',
+		category: 'theme',
+	},
+	{
+		name: 'core/group',
+		title: 'Group',
+		category: 'design',
+	},
+	{
+		name: 'core/comments-pagination-numbers',
+		title: 'Comments Page Numbers',
+		category: 'theme',
+	},
+	{
+		name: 'core/post-featured-image',
+		title: 'Featured Image',
+		category: 'theme',
+	},
+];
 
 describe( 'utils', () => {
-	beforeAll( () => {
-		// Register all core blocks
-		registerCoreBlocks();
-	} );
-
-	afterAll( () => {
-		// Clean up registered blocks
-		getBlockTypes().forEach( ( block ) => {
-			unregisterBlockType( block.name );
-		} );
-	} );
-
 	describe( 'getCategoryExamples', () => {
-		it( 'returns category key value pairs', () => {
+		it( 'returns theme subcategories examples', () => {
 			const themeCategory = STYLE_BOOK_CATEGORIES.find(
 				( category ) => category.name === 'theme'
 			);
 			const themeCategoryExamples = getCategoryExamples(
 				themeCategory,
-				getExamples()
+				exampleThemeBlocks
 			);
+
 			expect( themeCategoryExamples.name ).toEqual( 'theme' );
-			expect( themeCategoryExamples.subcategories ).toHaveLength(
-				themeCategory.subcategories.length
+
+			const siteIdentity = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.name === 'site-identity'
+			);
+			expect( siteIdentity ).toEqual( {
+				title: 'Site Identity',
+				name: 'site-identity',
+				examples: [
+					{
+						name: 'core/site-logo',
+						title: 'Site Logo',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-title',
+						title: 'Site Title',
+						category: 'theme',
+					},
+					{
+						name: 'core/site-tagline',
+						title: 'Site Tagline',
+						category: 'theme',
+					},
+				],
+			} );
+
+			const design = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.name === 'design'
 			);
+			expect( design ).toEqual( {
+				title: 'Design',
+				name: 'design',
+				examples: [
+					{
+						name: 'core/group',
+						title: 'Group',
+						category: 'design',
+					},
+				],
+			} );
+
+			const posts = themeCategoryExamples.subcategories.find(
+				( subcategory ) => subcategory.name === 'posts'
+			);
+
+			expect( posts ).toEqual( {
+				title: 'Posts',
+				name: 'posts',
+				examples: [
+					{
+						name: 'core/post-terms',
+						title: 'Post Terms',
+						category: 'theme',
+					},
+				],
+			} );
 		} );
 	} );
 } );

packages/edit-site/src/components/style-book/utils.js

@@ -100,19 +100,6 @@ export function getCategoryExamples( categoryDefinition, examples ) {
 	return {
 		title: categoryDefinition.title,
 		name: categoryDefinition.name,
-		examples: examples.filter( ( example ) => {
-			return (
-				! blocksToExclude.includes( example.name ) &&
-				( example.category === categoryDefinition.name ||
-					blocksToInclude.includes( example.name ) )
-			);
-		} ),
+		examples: categoryExamples,
 	};
 }
-
-/*
-
-
-
-
- */