Rename cat.name to cat.slug to match categories store object in the b…

…lock store
WordPress · Sep 23, 2024 · c9d092d · c9d092d
1 parent 6a56fa2
commit c9d092d
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 41 deletions.
diff --git a/packages/edit-site/src/components/style-book/categories.js b/packages/edit-site/src/components/style-book/categories.js
@@ -3,7 +3,7 @@
  *
  * @typedef {Object} StyleBookCategory
  *
- * @property {string} name     Object with named attributes.
+ * @property {string} slug     Object with named attributes.
  * @property {string} title    Object with named attributes.
  * @property {Array?} blocks   Object with named attributes.
  * @property {Array?} excludes Array with numeric attributes.
@@ -25,10 +25,10 @@
  *
  * @typedef {Object} CategoryExamples
  *
- * @property {string}                   name       Name of the category.
- * @property {string}                   title      Title of the category for the UI.
- * @property {Array<blockExamples>?}    examples   Object with named attributes.
- * @property {Array<CategoryExamples>?} categories Array with numeric attributes.
+ * @property {string}                   slug          Slug of the category.
+ * @property {string}                   title         Title of the category for the UI.
+ * @property {Array<blockExamples>?}    examples      Object with named attributes.
+ * @property {Array<CategoryExamples>?} subcategories Array with numeric attributes.
  */
 
 /**
@@ -38,7 +38,7 @@
  * @return {CategoryExamples|undefined} An object containing the category examples.
  */
 export function getCategoryExamples( categoryDefinition, examples ) {
-	if ( ! categoryDefinition?.name || ! examples?.length ) {
+	if ( ! categoryDefinition?.slug || ! examples?.length ) {
 		return;
 	}
 
@@ -59,7 +59,7 @@ export function getCategoryExamples( categoryDefinition, examples ) {
 			},
 			{
 				title: categoryDefinition.title,
-				name: categoryDefinition.name,
+				slug: categoryDefinition.slug,
 				subcategories: [],
 			}
 		);
@@ -70,7 +70,7 @@ export function getCategoryExamples( categoryDefinition, examples ) {
 	const categoryExamples = examples.filter( ( example ) => {
 		return (
 			! blocksToExclude.includes( example.name ) &&
-			( example.category === categoryDefinition.name ||
+			( example.category === categoryDefinition.slug ||
 				blocksToInclude.includes( example.name ) )
 		);
 	} );
@@ -81,7 +81,7 @@ export function getCategoryExamples( categoryDefinition, examples ) {
 
 	return {
 		title: categoryDefinition.title,
-		name: categoryDefinition.name,
+		slug: categoryDefinition.slug,
 		examples: categoryExamples,
 	};
 }
diff --git a/packages/edit-site/src/components/style-book/constants.js b/packages/edit-site/src/components/style-book/constants.js
@@ -3,26 +3,20 @@
  */
 import { __ } from '@wordpress/i18n';
 
-/**
- * @typedef {Object} StyleBookCategory
- *
- * @property {string} slug  Unique category slug.
- * @property {string} title Category label, for display in user interface.
- */
 export const STYLE_BOOK_THEME_SUBCATEGORIES = [
 	{
-		name: 'site-identity',
+		slug: 'site-identity',
 		title: __( 'Site Identity' ),
 		blocks: [ 'core/site-logo', 'core/site-title', 'core/site-tagline' ],
 	},
 	{
-		name: 'design',
+		slug: 'design',
 		title: __( 'Design' ),
 		blocks: [ 'core/navigation', 'core/avatar', 'core/post-time-to-read' ],
 		exclude: [ 'core/home-link', 'core/navigation-link' ],
 	},
 	{
-		name: 'posts',
+		slug: 'posts',
 		title: __( 'Posts' ),
 		blocks: [
 			'core/post-title',
@@ -40,7 +34,7 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES = [
 		],
 	},
 	{
-		name: 'comments',
+		slug: 'comments',
 		title: __( 'Comments' ),
 		blocks: [
 			'core/comments-title',
@@ -61,7 +55,7 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES = [
 
 export const STYLE_BOOK_CATEGORIES = [
 	{
-		name: 'text',
+		slug: 'text',
 		title: __( 'Text' ),
 		blocks: [
 			'core/post-content',
@@ -70,27 +64,27 @@ export const STYLE_BOOK_CATEGORIES = [
 		],
 	},
 	{
-		name: 'colors',
+		slug: 'colors',
 		title: __( 'Colors' ),
 		blocks: [ 'custom/colors' ],
 	},
 	{
-		name: 'theme',
+		slug: 'theme',
 		title: __( 'Theme' ),
 		subcategories: STYLE_BOOK_THEME_SUBCATEGORIES,
 	},
 	{
-		name: 'media',
+		slug: 'media',
 		title: __( 'Media' ),
 		blocks: [ 'core/post-featured-image' ],
 	},
 	{
-		name: 'widgets',
+		slug: 'widgets',
 		title: __( 'Widgets' ),
 		blocks: [],
 	},
 	{
-		name: 'embed',
+		slug: 'embed',
 		title: __( 'Embeds' ),
 		include: [],
 	},

diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js
@@ -66,7 +66,7 @@ function StyleBook( {
 		() =>
 			STYLE_BOOK_CATEGORIES.filter( ( category ) =>
 				examples.some(
-					( example ) => example.category === category.name
+					( example ) => example.category === category.slug
 				)
 			),
 		[ examples ]
@@ -122,21 +122,21 @@ function StyleBook( {
 							<Tabs.TabList>
 								{ tabs.map( ( tab ) => (
 									<Tabs.Tab
-										tabId={ tab.name }
-										key={ tab.name }
+										tabId={ tab.slug }
+										key={ tab.slug }
 									>
 										{ tab.title }
 									</Tabs.Tab>
 								) ) }
 							</Tabs.TabList>
 							{ tabs.map( ( tab ) => (
 								<Tabs.TabPanel
-									key={ tab.name }
-									tabId={ tab.name }
+									key={ tab.slug }
+									tabId={ tab.slug }
 									focusable={ false }
 								>
 									<StyleBookBody
-										category={ tab.name }
+										category={ tab.slug }
 										examples={ examples }
 										isSelected={ isSelected }
 										onSelect={ onSelect }
@@ -246,7 +246,7 @@ const StyleBookBody = ( {
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
 		const categoryDefinition = STYLE_BOOK_CATEGORIES.find(
-			( c ) => c.name === category
+			( _category ) => _category.slug === category
 		);
 		const filteredExamples = getCategoryExamples(
 			categoryDefinition,
@@ -277,7 +277,7 @@ const Examples = memo(
 					filteredExamples.subcategories.map( ( subcategory ) => (
 						<Composite.Group
 							className="edit-site-style-book__subcategory"
-							key={ `subcategory-${ subcategory.name }` }
+							key={ `subcategory-${ subcategory.slug }` }
 						>
 							<Composite.GroupLabel>
 								<h2 className="edit-site-style-book__subcategory-title">

diff --git a/packages/edit-site/src/components/style-book/test/categories.js b/packages/edit-site/src/components/style-book/test/categories.js
@@ -62,21 +62,21 @@ describe( 'utils', () => {
 	describe( 'getCategoryExamples', () => {
 		it( 'returns theme subcategories examples', () => {
 			const themeCategory = STYLE_BOOK_CATEGORIES.find(
-				( category ) => category.name === 'theme'
+				( category ) => category.slug === 'theme'
 			);
 			const themeCategoryExamples = getCategoryExamples(
 				themeCategory,
 				exampleThemeBlocks
 			);
 
-			expect( themeCategoryExamples.name ).toEqual( 'theme' );
+			expect( themeCategoryExamples.slug ).toEqual( 'theme' );
 
 			const siteIdentity = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.name === 'site-identity'
+				( subcategory ) => subcategory.slug === 'site-identity'
 			);
 			expect( siteIdentity ).toEqual( {
 				title: 'Site Identity',
-				name: 'site-identity',
+				slug: 'site-identity',
 				examples: [
 					{
 						name: 'core/site-logo',
@@ -97,11 +97,11 @@ describe( 'utils', () => {
 			} );
 
 			const design = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.name === 'design'
+				( subcategory ) => subcategory.slug === 'design'
 			);
 			expect( design ).toEqual( {
 				title: 'Design',
-				name: 'design',
+				slug: 'design',
 				examples: [
 					{
 						name: 'core/group',
@@ -112,12 +112,12 @@ describe( 'utils', () => {
 			} );
 
 			const posts = themeCategoryExamples.subcategories.find(
-				( subcategory ) => subcategory.name === 'posts'
+				( subcategory ) => subcategory.slug === 'posts'
 			);
 
 			expect( posts ).toEqual( {
 				title: 'Posts',
-				name: 'posts',
+				slug: 'posts',
 				examples: [
 					{
 						name: 'core/post-terms',