Pass footer header styles to WooPay (#9880)

Automattic · Dec 12, 2024 · 52dbe03 · 52dbe03
1 parent 02da62a
commit 52dbe03
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 0 deletions.
diff --git a/changelog/add-pass-footer-header-styles-to-woopay b/changelog/add-pass-footer-header-styles-to-woopay
@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Impovements to WooPay themeing, which is not yet released to the public.
+
+
diff --git a/client/checkout/api/test/index.test.js b/client/checkout/api/test/index.test.js
@@ -43,6 +43,9 @@ const mockAppearance = {
 		'.Button': {},
 		'.Link': {},
 		'.Container': {},
+		'.Footer': {},
+		'.Footer-link': {},
+		'.Header': {},
 	},
 	theme: 'stripe',
 	variables: {

diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
@@ -156,6 +156,9 @@ export const appearanceSelectors = {
 		buttonSelectors: [ '#place_order' ],
 		linkSelectors: [ 'a' ],
 		containerSelectors: [ '.woocommerce-checkout-review-order-table' ],
+		headerSelectors: [ '.site-header' ],
+		footerSelectors: [ '.site-footer' ],
+		footerLink: [ '.site-footer a' ],
 	},
 
 	/**
@@ -514,6 +517,12 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 		selectors.containerSelectors,
 		'.Container'
 	);
+	const headerRules = getFieldStyles( selectors.headerSelectors, '.Header' );
+	const footerRules = getFieldStyles( selectors.footerSelectors, '.Footer' );
+	const footerLinkRules = getFieldStyles(
+		selectors.footerLink,
+		'.Footer--link'
+	);
 	const globalRules = {
 		colorBackground: backgroundColor,
 		colorText: paragraphRules.color,
@@ -559,6 +568,9 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 		appearance.rules = {
 			...appearance.rules,
 			'.Heading': headingRules,
+			'.Header': headerRules,
+			'.Footer': footerRules,
+			'.Footer-link': footerLinkRules,
 			'.Button': buttonRules,
 			'.Link': linkRules,
 			'.Container': containerRules,

diff --git a/client/checkout/upe-styles/test/index.js b/client/checkout/upe-styles/test/index.js
@@ -225,6 +225,29 @@ describe( 'Getting styles for automated theming', () => {
 				'.Container': {
 					backgroundColor: 'rgba(0, 0, 0, 0)',
 				},
+				'.Footer': {
+					color: 'rgb(109, 109, 109)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
+					fontFamily:
+						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
+					fontSize: '12px',
+					padding: '10px',
+				},
+				'.Footer-link': {
+					color: 'rgb(109, 109, 109)',
+					fontFamily:
+						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
+					fontSize: '12px',
+					padding: '10px',
+				},
+				'.Header': {
+					color: 'rgb(109, 109, 109)',
+					backgroundColor: 'rgba(0, 0, 0, 0)',
+					fontFamily:
+						'"Source Sans Pro", HelveticaNeue-Light, "Helvetica Neue Light"',
+					fontSize: '12px',
+					padding: '10px',
+				},
 			},
 			labels: 'above',
 		} );

diff --git a/client/checkout/upe-styles/upe-styles.js b/client/checkout/upe-styles/upe-styles.js
@@ -78,6 +78,16 @@ const upeSupportedProperties = {
 		...borderOutlineBackgroundProps.slice( 1 ), // Remove backgroundColor
 	],
 	'.Container': [ ...borderOutlineBackgroundProps ],
+	'.Header': [
+		...paddingColorProps,
+		...borderOutlineBackgroundProps,
+		...textFontTransitionProps,
+	],
+	'.Footer': [
+		...paddingColorProps,
+		...borderOutlineBackgroundProps,
+		...textFontTransitionProps,
+	],
 };
 
 // Restricted properties allowed to generate the automated theming of UPE.
@@ -113,6 +123,9 @@ export const upeRestrictedProperties = {
 	'.TabLabel': upeSupportedProperties[ '.TabLabel' ],
 	'.Block': upeSupportedProperties[ '.Block' ],
 	'.Container': upeSupportedProperties[ '.Container' ],
+	'.Header': upeSupportedProperties[ '.Header' ],
+	'.Footer': upeSupportedProperties[ '.Footer' ],
+	'.Footer--link': upeSupportedProperties[ '.Text' ],
 	'.Text': upeSupportedProperties[ '.Text' ],
 	'.Text--redirect': upeSupportedProperties[ '.Text' ],
 };