diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.tsx b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.tsx
index f2c0c8d8c89..848c38313d2 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment-methods.tsx
+++ b/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
- ? paymentMethod.edit
- : paymentMethod.content;
+ const expressPaymentMethod = paymentMethod.content;
return isValidElement( expressPaymentMethod ) ? (
-
+
{ cloneElement( expressPaymentMethod, {
...paymentMethodInterface,
onClick: onExpressPaymentClick( id ),
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss
index 5a4e159f249..b6f4fcd0144 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart/inner-blocks/cart-express-payment-block/editor.scss
+++ b/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 {
- .wc-block-components-express-payment__event-buttons {
- > li {
- display: flex;
- align-items: center;
- justify-content: center;
-
- > img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- }
- }
+.wc-block-components-express-payment__event-buttons li {
+ pointer-events: none;
+ user-select: none;
}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/editor.scss
index 103940558c0..06472260fce 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/checkout/inner-blocks/checkout-express-payment-block/editor.scss
+++ b/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 {
- .wc-block-components-express-payment__event-buttons {
- > li {
- display: flex;
- align-items: center;
- justify-content: center;
-
- > img {
- width: 100% !important;
- height: 100% !important;
- object-fit: cover;
- }
- }
- }
+.wc-block-components-express-payment__event-buttons > li {
+ pointer-events: none;
+ user-select: none;
}