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; }