diff --git a/packages/edit-site/src/components/style-book/constants.js b/packages/edit-site/src/components/style-book/constants.js index 96a7276d27492e..57a2e9fe5d28b0 100644 --- a/packages/edit-site/src/components/style-book/constants.js +++ b/packages/edit-site/src/components/style-book/constants.js @@ -115,18 +115,18 @@ export const STYLE_BOOK_IFRAME_STYLES = ` } .edit-site-style-book__example { - max-width: 900px + max-width: 900px; border-radius: 2px; cursor: pointer; display: flex; flex-direction: column; gap: 40px; - margin-bottom: 40px; padding: 16px; width: 100%; box-sizing: border-box; scroll-margin-top: 32px; scroll-margin-bottom: 32px; + margin: 0 auto 40px auto; } .edit-site-style-book__example.is-selected { @@ -141,7 +141,8 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .edit-site-style-book__examples.is-wide .edit-site-style-book__example { flex-direction: row; } - + + .edit-site-style-book__subcategory-title, .edit-site-style-book__example-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 11px; @@ -151,6 +152,13 @@ export const STYLE_BOOK_IFRAME_STYLES = ` text-align: left; text-transform: uppercase; } + + .edit-site-style-book__subcategory-title { + font-size: 16px; + margin-bottom: 40px; + border-bottom: 1px solid #ddd; + padding-bottom: 8px; + } .edit-site-style-book__examples.is-wide .edit-site-style-book__example-title { text-align: right; @@ -172,9 +180,4 @@ export const STYLE_BOOK_IFRAME_STYLES = ` .edit-site-style-book__example-preview .is-root-container > .wp-block:last-child { margin-bottom: 0; } - .edit-site-style-book__subcategory-label { - margin-bottom: 40px; - border-bottom: 1px solid #ddd; - padding-bottom: 8px; - } `; diff --git a/packages/edit-site/src/components/style-book/index.js b/packages/edit-site/src/components/style-book/index.js index 05d0565e3bfce4..43f5cacc8d8eb2 100644 --- a/packages/edit-site/src/components/style-book/index.js +++ b/packages/edit-site/src/components/style-book/index.js @@ -277,8 +277,10 @@ const Examples = memo( className="edit-site-style-book__subcategory" key={ `subcategory-${ subcategory.name }` } > - - { subcategory.title } + +

+ { subcategory.title } +

{ + ( acc, subcategoryDefinition ) => { const subcategoryExamples = getCategoryExamples( - subcategory, + subcategoryDefinition, examples ); if ( subcategoryExamples ) { @@ -85,6 +85,17 @@ export function getCategoryExamples( categoryDefinition, examples ) { const blocksToInclude = categoryDefinition?.blocks || []; const blocksToExclude = categoryDefinition?.exclude || []; + const categoryExamples = examples.filter( ( example ) => { + return ( + ! blocksToExclude.includes( example.name ) && + ( example.category === categoryDefinition.name || + blocksToInclude.includes( example.name ) ) + ); + } ); + + if ( ! categoryExamples.length ) { + return; + } return { title: categoryDefinition.title,