Tweaking subcategory headings. Guard against empty category examples.

WordPress · Sep 20, 2024 · 5709016 · 5709016
1 parent 63d455f
commit 5709016
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git 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
@@ -277,8 +277,10 @@ const Examples = memo(
 							className="edit-site-style-book__subcategory"
 							key={ `subcategory-${ subcategory.name }` }
 						>
-							<Composite.GroupLabel className="edit-site-style-book__subcategory-label">
-								{ subcategory.title }
+							<Composite.GroupLabel>
+								<h2 className="edit-site-style-book__subcategory-title">
+									{ subcategory.title }
+								</h2>
 							</Composite.GroupLabel>
 							<Subcategory
 								examples={ subcategory.examples }

diff --git a/packages/edit-site/src/components/style-book/utils.js b/packages/edit-site/src/components/style-book/utils.js
@@ -62,9 +62,9 @@ export function getCategoryExamples( categoryDefinition, examples ) {
 
 	if ( categoryDefinition?.subcategories?.length ) {
 		return categoryDefinition.subcategories.reduce(
-			( acc, subcategory ) => {
+			( 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,