Fix UPE styles extraction in the Site Editor (#10433)

Co-authored-by: Francesco <[email protected]>
Automattic · Feb 27, 2025 · 0bf5df6 · 0bf5df6
1 parent 2f84fc8
commit 0bf5df6
Show file tree

Hide file tree

Showing 7 changed files with 283 additions and 146 deletions.
diff --git a/changelog/fix-style-extraction-in-editor b/changelog/fix-style-extraction-in-editor
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Properly extract styles when using the site editor.
diff --git a/client/checkout/blocks/payment-elements.js b/client/checkout/blocks/payment-elements.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useEffect, useState, RawHTML } from '@wordpress/element';
+import { useEffect, useState, RawHTML, useRef } from '@wordpress/element';
 import { Elements } from '@stripe/react-stripe-js';
 // eslint-disable-next-line import/no-unresolved
 import { StoreNotice } from '@woocommerce/blocks-checkout';
@@ -20,6 +20,7 @@ import { getPaymentMethodTypes } from 'wcpay/checkout/utils/upe';
 
 const PaymentElements = ( { api, ...props } ) => {
 	const stripeForUPE = useStripeForUPE( api, props.paymentMethodId );
+	const containerRef = useRef( null );
 
 	const [ errorMessage, setErrorMessage ] = useState( null );
 	const [
@@ -29,16 +30,27 @@ const PaymentElements = ( { api, ...props } ) => {
 	const [ appearance, setAppearance ] = useState(
 		getUPEConfig( 'wcBlocksUPEAppearance' )
 	);
-	const [ fontRules ] = useState( getFontRulesFromPage() );
+	const [ fontRules, setFontRules ] = useState( [] );
+
 	const [ fingerprint, fingerprintErrorMessage ] = useFingerprint();
 	const amount = Number( getUPEConfig( 'cartTotal' ) );
 	const currency = getUPEConfig( 'currency' ).toLowerCase();
 	const paymentMethodTypes = getPaymentMethodTypes( props.paymentMethodId );
 
 	useEffect( () => {
 		async function generateUPEAppearance() {
+			if ( ! containerRef.current ) {
+				return;
+			}
+			setFontRules(
+				getFontRulesFromPage( containerRef.current.ownerDocument )
+			);
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout', false );
+			let upeAppearance = getAppearance(
+				'blocks_checkout',
+				false,
+				containerRef.current.ownerDocument
+			);
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'
@@ -61,46 +73,48 @@ const PaymentElements = ( { api, ...props } ) => {
 		props.paymentMethodId,
 	] );
 
-	if ( ! stripeForUPE ) {
-		return <LoadableBlock isLoading numLines={ 3 }></LoadableBlock>;
-	}
-
 	return (
-		<LoadableBlock isLoading={ ! appearance } numLines={ 3 }>
-			<Elements
-				stripe={ stripeForUPE }
-				options={ {
-					mode: amount < 1 ? 'setup' : 'payment',
-					amount: amount,
-					currency: currency,
-					paymentMethodCreation: 'manual',
-					paymentMethodTypes: paymentMethodTypes,
-					appearance: appearance,
-					fonts: fontRules,
-				} }
+		<>
+			<LoadableBlock
+				isLoading={ ! appearance || ! stripeForUPE }
+				numLines={ 3 }
 			>
-				{ paymentProcessorLoadErrorMessage?.error?.message && (
-					<div className="wc-block-components-notices">
-						<StoreNotice status="error" isDismissible={ false }>
-							<RawHTML>
-								{
-									paymentProcessorLoadErrorMessage.error
-										.message
-								}
-							</RawHTML>
-						</StoreNotice>
-					</div>
-				) }
-				<PaymentProcessor
-					api={ api }
-					errorMessage={ errorMessage }
-					fingerprint={ fingerprint }
-					onLoadError={ setPaymentProcessorLoadErrorMessage }
-					theme={ appearance?.theme }
-					{ ...props }
-				/>
-			</Elements>
-		</LoadableBlock>
+				<Elements
+					stripe={ stripeForUPE }
+					options={ {
+						mode: amount < 1 ? 'setup' : 'payment',
+						amount: amount,
+						currency: currency,
+						paymentMethodCreation: 'manual',
+						paymentMethodTypes: paymentMethodTypes,
+						appearance: appearance,
+						fonts: fontRules,
+					} }
+				>
+					{ paymentProcessorLoadErrorMessage?.error?.message && (
+						<div className="wc-block-components-notices">
+							<StoreNotice status="error" isDismissible={ false }>
+								<RawHTML>
+									{
+										paymentProcessorLoadErrorMessage.error
+											.message
+									}
+								</RawHTML>
+							</StoreNotice>
+						</div>
+					) }
+					<PaymentProcessor
+						api={ api }
+						errorMessage={ errorMessage }
+						fingerprint={ fingerprint }
+						onLoadError={ setPaymentProcessorLoadErrorMessage }
+						theme={ appearance?.theme }
+						{ ...props }
+					/>
+				</Elements>
+			</LoadableBlock>
+			<div ref={ containerRef } />
+		</>
 	);
 };
 

diff --git a/client/checkout/blocks/payment-method-label.js b/client/checkout/blocks/payment-method-label.js
@@ -15,7 +15,7 @@ import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async';
 import { getUPEConfig } from 'wcpay/utils/checkout';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
-import { useEffect, useMemo, useState } from '@wordpress/element';
+import { useEffect, useState, useRef } from '@wordpress/element';
 import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles';
 
 const paymentMethods = [
@@ -78,6 +78,7 @@ const PaymentMethodMessageWrapper = ( {
 };
 
 export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
+	const containerRef = useRef( null );
 	const cartData = wp.data.select( 'wc/store/cart' ).getCartData();
 	const isTestMode = getUPEConfig( 'testMode' );
 	const [ appearance, setAppearance ] = useState(
@@ -88,7 +89,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 		getUPEConfig( 'wcBlocksUPEAppearanceTheme' )
 	);
 
-	const fontRules = useMemo( () => getFontRulesFromPage(), [] );
+	const [ fontRules, setFontRules ] = useState( [] );
 
 	// Stripe expects the amount to be sent as the minor unit of 2 digits.
 	const amount = parseInt(
@@ -107,8 +108,18 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 
 	useEffect( () => {
 		async function generateUPEAppearance() {
+			if ( ! containerRef.current ) {
+				return;
+			}
+			setFontRules(
+				getFontRulesFromPage( containerRef.current.ownerDocument )
+			);
 			// Generate UPE input styles.
-			let upeAppearance = getAppearance( 'blocks_checkout', false );
+			let upeAppearance = getAppearance(
+				'blocks_checkout',
+				false,
+				containerRef.current.ownerDocument
+			);
 			upeAppearance = await api.saveUPEAppearance(
 				upeAppearance,
 				'blocks_checkout'
@@ -130,7 +141,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => {
 
 	return (
 		<>
-			<div className="payment-method-label">
+			<div ref={ containerRef } className="payment-method-label">
 				<span className="payment-method-label__label">{ title }</span>
 				{ isTestMode && (
 					<span className="test-mode badge">