diff --git a/changelog/add-pass-footer-header-styles-to-woopay b/changelog/add-pass-footer-header-styles-to-woopay new file mode 100644 index 00000000000..ab6375db250 --- /dev/null +++ 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 index 8ec819ea4c0..7fdd80e9b3a 100644 --- 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 index 5c775caf43e..45c9ea83578 100644 --- 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 index 96a602a4bbd..22fd181df90 100644 --- 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 index b578960317e..72903e459d7 100644 --- 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' ], };