Render from content instead of edit prop and adjust css

plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.tsx

@@ -142,20 +142,6 @@ const ExpressPaymentMethods = () => {
 		[ __internalSetExpressPaymentError, onExpressPaymentError ]
 	);
 
-	// In the editor, we apply styles to the button containers to show the changes of the height and border-radius controls,
-	// which would be passed to the payment APIs on the front-end
-	const stylesForButtonContainers = isEditor
-		? {
-				height: `${ showButtonStyles ? buttonHeight : '48' }px`,
-				borderRadius: `${
-					showButtonStyles ? buttonBorderRadius : '4'
-				}px`,
-				pointerEvents: 'none',
-				userSelect: 'none',
-				ariaDisabled: true,
-		  }
-		: {};
-
 	/**
 	 * @todo Find a way to Memoize Express Payment Method Content
 	 *
@@ -167,15 +153,9 @@ const ExpressPaymentMethods = () => {
 	const content =
 		entries.length > 0 ? (
 			entries.map( ( [ id, paymentMethod ] ) => {
-				const expressPaymentMethod = isEditor
+				const expressPaymentMethod = paymentMethod.content;
-					? paymentMethod.edit
-					: paymentMethod.content;
 				return isValidElement( expressPaymentMethod ) ? (
-					<li
+					<li key={ id } id={ `express-payment-method-${ id }` }>
-						key={ id }
-						id={ `express-payment-method-${ id }` }
-						style={ stylesForButtonContainers }
-					>
 						{ cloneElement( expressPaymentMethod, {
 							...paymentMethodInterface,
 							onClick: onExpressPaymentClick( id ),

plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss

@@ -33,19 +33,7 @@
 	}
 }
 
-// Center images rendered in place of buttons in the editor
+.wc-block-components-express-payment__event-buttons li {
-.wc-block-components-express-payment {
+	pointer-events: none;
-	.wc-block-components-express-payment__event-buttons {
+	user-select: none;
-		> li {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			> img {
-				width: 100%;
-				height: 100%;
-				object-fit: cover;
-			}
-		}
-	}
 }

plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/editor.scss

@@ -42,22 +42,13 @@
 	position: absolute;
 	top: 29px;
 	right: 12px;
-	color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+	color: var(
+		--wp-components-color-accent,
+		var(--wp-admin-theme-color, #3858e9)
+	);
 }
 
-// Center images rendered in place of buttons in the editor
+.wc-block-components-express-payment__event-buttons > li {
-.wc-block-components-express-payment {
+	pointer-events: none;
-	.wc-block-components-express-payment__event-buttons {
+	user-select: none;
-		> li {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-
-			> img {
-				width: 100% !important;
-				height: 100% !important;
-				object-fit: cover;
-			}
-		}
-	}
 }