Skip to content

Commit

Permalink
Rename cat.name to cat.slug to match categories store object in the b…
Browse files Browse the repository at this point in the history 
…lock store

update comments

Use `slug` instead of `name`
  • Loading branch information
@ramonjd
ramonjd committed Sep 27, 2024
1 parent 72835b7 commit 648394e
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 47 deletions.
24 changes: 12 additions & 12 deletions packages/edit-site/src/components/style-book/categories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
*
* @typedef {Object} StyleBookCategory
*
* @property {string} name 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.
* @property {string} slug Category identifier.
* @property {string} title Category title/label.
* @property {Array?} blocks Array of block names to include in the category. Used when blocks are not included in the category by default.
* @property {Array?} excludes Array of blocks to exclude from the category. Used when blocks are included in the category by default.
*/

/**
Expand All @@ -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 Category identifier.
* @property {string} title Category title/label.
* @property {Array<blockExamples>?} examples Array of block examples.
* @property {Array<CategoryExamples>?} subcategories Array of subcategory examples.
*/

/**
Expand All @@ -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;
}

Expand All @@ -59,7 +59,7 @@ export function getCategoryExamples( categoryDefinition, examples ) {
},
{
title: categoryDefinition.title,
name: categoryDefinition.name,
slug: categoryDefinition.slug,
subcategories: [],
}
);
Expand All @@ -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 ) )
);
} );
Expand All @@ -81,7 +81,7 @@ export function getCategoryExamples( categoryDefinition, examples ) {

return {
title: categoryDefinition.title,
name: categoryDefinition.name,
slug: categoryDefinition.slug,
examples: categoryExamples,
};
}
26 changes: 10 additions & 16 deletions packages/edit-site/src/components/style-book/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -40,7 +34,7 @@ export const STYLE_BOOK_THEME_SUBCATEGORIES = [
],
},
{
name: 'comments',
slug: 'comments',
title: __( 'Comments' ),
blocks: [
'core/comments-title',
Expand All @@ -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',
Expand All @@ -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: [],
},
Expand Down
22 changes: 11 additions & 11 deletions packages/edit-site/src/components/style-book/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function StyleBook( {
() =>
STYLE_BOOK_CATEGORIES.filter( ( category ) =>
examples.some(
( example ) => example.category === category.name
( example ) => example.category === category.slug
)
),
[ examples ]
Expand Down Expand Up @@ -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 }
Expand All @@ -150,7 +150,7 @@ function StyleBook( {
</div>
) : (
<StyleBookBody
category={ tabs[ 0 ].name }
category={ tabs[ 0 ].slug }
examples={ examples }
isSelected={ isSelected }
onClick={ onClick }
Expand Down Expand Up @@ -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,
Expand All @@ -260,7 +260,7 @@ const Examples = memo(
aria-label={ label }
role="grid"
>
{ !! filteredExamples.examples?.length &&
{ !! filteredExamples?.examples?.length &&
filteredExamples.examples.map( ( example ) => (
<Example
key={ example.name }
Expand All @@ -273,11 +273,11 @@ const Examples = memo(
} }
/>
) ) }
{ !! filteredExamples.subcategories?.length &&
{ !! filteredExamples?.subcategories?.length &&
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">
Expand Down
16 changes: 8 additions & 8 deletions packages/edit-site/src/components/style-book/test/categories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down

0 comments on commit 648394e

Please sign in to comment.