Style book: remove styles from examples (#67098)

* Remove group block example styles because they prevent global styles from being previewed * In the stylebook, remove styles from the block examples. This is so global styles will take effect. * Add explanatory comments * Hoist cover block example styles typography/color Co-authored-by: ramonjd <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: ntsekouras <[email protected]> Co-authored-by: westnz <[email protected]>
WordPress · Nov 20, 2024 · 0db7ff6 · 0db7ff6 · github-actions · Nov 20, 2024
1 parent 9f0e2d3
commit 0db7ff6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 10 deletions.
diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
@@ -26,21 +26,21 @@ export const settings = {
 			customOverlayColor: '#065174',
 			dimRatio: 40,
 			url: 'https://s.w.org/images/core/5.3/Windbuchencom.jpg',
+			style: {
+				typography: {
+					fontSize: 48,
+				},
+				color: {
+					text: 'white',
+				},
+			},
 		},
 		innerBlocks: [
 			{
 				name: 'core/paragraph',
 				attributes: {
 					content: __( '<strong>Snow Patrol</strong>' ),
 					align: 'center',
-					style: {
-						typography: {
-							fontSize: 48,
-						},
-						color: {
-							text: 'white',
-						},
-					},
 				},
 			},
 		],

diff --git a/packages/edit-site/src/components/style-book/examples.tsx b/packages/edit-site/src/components/style-book/examples.tsx
@@ -150,7 +150,18 @@ function getOverviewBlockExamples(
 				name: blockName,
 				title: blockType.title,
 				category: 'overview',
-				blocks: getBlockFromExample( blockName, blockType.example ),
+				/*
+				 * CSS generated from style attributes will take precedence over global styles CSS,
+				 * so remove the style attribute from the example to ensure the example
+				 * demonstrates changes to global styles.
+				 */
+				blocks: getBlockFromExample( blockName, {
+					...blockType.example,
+					attributes: {
+						...blockType.example.attributes,
+						style: undefined,
+					},
+				} ),
 			};
 			examples.push( blockExample );
 		}
@@ -179,7 +190,18 @@ export function getExamples( colors: MultiOriginPalettes ): BlockExample[] {
 			name: blockType.name,
 			title: blockType.title,
 			category: blockType.category,
-			blocks: getBlockFromExample( blockType.name, blockType.example ),
+			/*
+			 * CSS generated from style attributes will take precedence over global styles CSS,
+			 * so remove the style attribute from the example to ensure the example
+			 * demonstrates changes to global styles.
+			 */
+			blocks: getBlockFromExample( blockType.name, {
+				...blockType.example,
+				attributes: {
+					...blockType.example.attributes,
+					style: undefined,
+				},
+			} ),
 		} ) );
 	const isHeadingBlockRegistered = !! getBlockType( 'core/heading' );