Use paragraph selector instead of label for pmme appearance (#9840)

Automattic · Nov 28, 2024 · 24f3972 · 24f3972
1 parent 0827530
commit 24f3972
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/changelog/fix-pmme-appearance-blocks b/changelog/fix-pmme-appearance-blocks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Use paragraph selector instead of label for pmme appearance
diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js
@@ -23,6 +23,7 @@ export const appearanceSelectors = {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
 		upeThemeInputSelector: '#billing_first_name',
 		upeThemeLabelSelector: '.woocommerce-checkout .form-row label',
+		upeThemeTextSelector: '.woocommerce-checkout .form-row',
 		rowElement: 'p',
 		validClasses: [ 'form-row' ],
 		invalidClasses: [
@@ -46,6 +47,7 @@ export const appearanceSelectors = {
 		appendTarget: '#contact-fields',
 		upeThemeInputSelector: '.wc-block-components-text-input #email',
 		upeThemeLabelSelector: '.wc-block-components-text-input label',
+		upeThemeTextSelector: '.wc-block-components-text-input',
 		rowElement: 'div',
 		validClasses: [ 'wc-block-components-text-input', 'is-active' ],
 		invalidClasses: [ 'wc-block-components-text-input', 'has-error' ],
@@ -73,6 +75,7 @@ export const appearanceSelectors = {
 		appendTarget: '.product .cart .quantity',
 		upeThemeInputSelector: '.product .cart .quantity .qty',
 		upeThemeLabelSelector: '.product .cart .quantity label',
+		upeThemeTextSelector: '.product .cart .quantity',
 		rowElement: 'div',
 		validClasses: [ 'input-text' ],
 		invalidClasses: [ 'input-text', 'has-error' ],
@@ -91,6 +94,7 @@ export const appearanceSelectors = {
 		appendTarget: '.cart .quantity',
 		upeThemeInputSelector: '.cart .quantity .qty',
 		upeThemeLabelSelector: '.cart .quantity label',
+		upeThemeTextSelector: '.cart .quantity',
 		rowElement: 'div',
 		validClasses: [ 'input-text' ],
 		invalidClasses: [ 'input-text', 'has-error' ],
@@ -111,6 +115,7 @@ export const appearanceSelectors = {
 		upeThemeInputSelector:
 			'.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input',
 		upeThemeLabelSelector: '.wc-block-components-text-input',
+		upeThemeTextSelector: '.wc-block-components-text-input',
 		rowElement: 'div',
 		validClasses: [ 'wc-block-components-text-input' ],
 		invalidClasses: [ 'wc-block-components-text-input', 'has-error' ],
@@ -133,6 +138,7 @@ export const appearanceSelectors = {
 		appendTarget: '.woocommerce-billing-fields__field-wrapper',
 		upeThemeInputSelector: '#billing_first_name',
 		upeThemeLabelSelector: '.woocommerce-checkout .form-row label',
+		upeThemeTextSelector: '.woocommerce-checkout .form-row',
 		rowElement: 'p',
 		validClasses: [ 'form-row' ],
 		invalidClasses: [
@@ -476,6 +482,11 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 		'.Label'
 	);
 
+	const paragraphRules = getFieldStyles(
+		selectors.upeThemeTextSelector,
+		'.Text'
+	);
+
 	const tabRules = getFieldStyles( selectors.upeThemeInputSelector, '.Tab' );
 	const selectedTabRules = getFieldStyles(
 		selectors.hiddenInput,
@@ -505,9 +516,9 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 	);
 	const globalRules = {
 		colorBackground: backgroundColor,
-		colorText: labelRules.color,
-		fontFamily: labelRules.fontFamily,
-		fontSizeBase: labelRules.fontSize,
+		colorText: paragraphRules.color,
+		fontFamily: paragraphRules.fontFamily,
+		fontSizeBase: paragraphRules.fontSize,
 	};
 
 	const isFloatingLabel = elementsLocation === 'blocks_checkout';
@@ -528,8 +539,8 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => {
 				'.Tab--selected': selectedTabRules,
 				'.TabIcon:hover': tabIconHoverRules,
 				'.TabIcon--selected': selectedTabIconRules,
-				'.Text': labelRules,
-				'.Text--redirect': labelRules,
+				'.Text': paragraphRules,
+				'.Text--redirect': paragraphRules,
 			} )
 		),
 	};

diff --git a/client/checkout/upe-styles/upe-styles.js b/client/checkout/upe-styles/upe-styles.js
@@ -55,6 +55,7 @@ const borderOutlineBackgroundProps = [
 ];
 const upeSupportedProperties = {
 	'.Label': [ ...paddingColorProps, ...textFontTransitionProps ],
+	'.Text': [ ...paddingColorProps, ...textFontTransitionProps ],
 	'.Input': [
 		...paddingColorProps,
 		...textFontTransitionProps,
@@ -112,4 +113,6 @@ export const upeRestrictedProperties = {
 	'.TabLabel': upeSupportedProperties[ '.TabLabel' ],
 	'.Block': upeSupportedProperties[ '.Block' ],
 	'.Container': upeSupportedProperties[ '.Container' ],
+	'.Text': upeSupportedProperties[ '.Text' ],
+	'.Text--redirect': upeSupportedProperties[ '.Text' ],
 };