Add heading rules to appearance (#9158)

Automattic · Jul 29, 2024 · e993960 · e993960
1 parent 076b23e
commit e993960
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 0 deletions.
diff --git a/changelog/add-get-heading-color-by-selectors b/changelog/add-get-heading-color-by-selectors
@@ -0,0 +1,4 @@
+Significance: patch
+Type: add
+
+Add heading rules to appearance
diff --git a/client/checkout/api/test/index.test.js b/client/checkout/api/test/index.test.js
@@ -39,6 +39,7 @@ const mockAppearance = {
 		},
 		'.Text': {},
 		'.Text--redirect': {},
+		'.Heading': {},
 	},
 	theme: 'stripe',
 	variables: {

diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
@@ -36,6 +36,7 @@ export const appearanceSelectors = {
 			'form.checkout',
 			'body',
 		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 	},
 	blocksCheckout: {
 		appendTarget: '#billing.wc-block-components-address-form',
@@ -58,6 +59,7 @@ export const appearanceSelectors = {
 			'.wc-block-checkout',
 			'body',
 		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 	},
 	bnplProductPage: {
 		appendTarget: '.product .cart .quantity',
@@ -73,6 +75,7 @@ export const appearanceSelectors = {
 			'#main',
 			'body',
 		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 	},
 	bnplClassicCart: {
 		appendTarget: '.cart .quantity',
@@ -88,6 +91,7 @@ export const appearanceSelectors = {
 			'#main',
 			'body',
 		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 	},
 	bnplCartBlock: {
 		appendTarget: '.wc-block-cart .wc-block-components-quantity-selector',
@@ -107,6 +111,7 @@ export const appearanceSelectors = {
 			'.wp-block-woocommerce-cart',
 			'body',
 		],
+		headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
 	},
 
 	/**
@@ -436,6 +441,7 @@ export const getAppearance = ( elementsLocation ) => {
 	};
 
 	const backgroundColor = getBackgroundColor( selectors.backgroundSelectors );
+	const headingRules = getFieldStyles( selectors.headingSelectors, '.Label' );
 	const blockRules = getFieldStyles(
 		selectors.upeThemeLabelSelector,
 		'.Block',
@@ -464,6 +470,7 @@ export const getAppearance = ( elementsLocation ) => {
 			'.TabIcon--selected': selectedTabIconRules,
 			'.Text': labelRules,
 			'.Text--redirect': labelRules,
+			'.Heading': headingRules,
 		},
 	};
 	// Remove hidden fields from DOM.

diff --git a/client/checkout/upe-styles/test/index.js b/client/checkout/upe-styles/test/index.js
@@ -196,6 +196,13 @@ describe( 'Getting styles for automated theming', () => {
 					padding: '10px',
 					backgroundColor: '#ffffff',
 				},
+				'.Heading': {
+					color: 'rgb(109, 109, 109)',
+					fontFamily:
+						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
+					fontSize: '12px',
+					padding: '10px',
+				},
 			},
 		} );
 	} );

diff --git a/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js b/client/checkout/woopay/express-button/test/woopay-express-checkout-button.test.js
@@ -87,6 +87,7 @@ describe( 'WoopayExpressCheckoutButton', () => {
 			},
 			'.Text': {},
 			'.Text--redirect': {},
+			'.Heading': {},
 		},
 		theme: 'stripe',
 		variables: {