diff --git a/packages/block-library/src/cover/index.js b/packages/block-library/src/cover/index.js
index e6797a3b51dbe..b5de174f70808 100644
--- a/packages/block-library/src/cover/index.js
+++ b/packages/block-library/src/cover/index.js
@@ -26,6 +26,14 @@ 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: [
 			{
@@ -33,14 +41,6 @@ export const settings = {
 				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
index 2fefe227ca52b..c944b87b09d7e 100644
--- 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' );