Saved payment options UI regression in 8.6.1 > 8.7.0

[frosso]

Prerequisites

• I have carried out troubleshooting steps and I believe I have found a bug.
• I have searched for similar bugs in both open and closed issues and cannot find a duplicate.

Describe the bug

In block checkout, the saved payment options appear without padding within them, causing some inconsistent UI.

In WC 8.7.0 - both Storefront & TTF themes:

Expected behavior

In WC 8.6.1 - with both Storefront and Twenty Twenty Four themes:

The padding is consistent with shipping methods & payment methods selects.

Actual behavior

The padding around the saved payment options is inconsistent with the rest of the UI.

Steps to reproduce

• Install & configure a payment method that allows for saving payment methods (e.g.: WooPayments, WC Stripe)
• As a customer, go to My account > Payment methods > Add a payment method
• As the same customer, add a product to the cart and go to blocks checkout
• You should notice the UI issue

WordPress Environment

`

WordPress Environment

WordPress address (URL): https://wcpay.test
Site address (URL): https://wcpay.test
WC Version: 8.7.0
REST API Version: ✔ 8.7.0
Action Scheduler Version: ✔ 3.7.2
Log Directory Writable: ✔
WP Version: 6.4.3
WP Multisite: –
WP Memory Limit: 512 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: nginx/1.25.4
PHP Version: 7.4.33
PHP Post Max Size: 512 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 8.6.0
(SecureTransport) OpenSSL/3.2.1

SUHOSIN Installed: –
MySQL Version: 11.3.2-MariaDB
Max Upload Size: 512 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 8.7.0
WC Database Prefix: wp_
Total Database Size: 13.21MB
Database Data Size: 8.35MB
Database Index Size: 4.86MB
wp_woocommerce_sessions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_api_keys: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_attribute_taxonomies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_downloadable_product_permissions: Data: 0.06MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.06MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.30MB + Index: 0.33MB + Engine InnoDB
wp_woocommerce_tax_rates: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_tax_rate_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zones: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_shipping_zone_locations: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_shipping_zone_methods: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_woocommerce_payment_tokens: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_payment_tokenmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_woocommerce_log: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_actions: Data: 0.09MB + Index: 0.11MB + Engine InnoDB
wp_actionscheduler_claims: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_groups: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_actionscheduler_logs: Data: 0.08MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.31MB + Index: 0.25MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_mail_catcher_logs: Data: 1.02MB + Index: 0.00MB + Engine InnoDB
wp_options: Data: 3.14MB + Index: 0.08MB + Engine InnoDB
wp_postmeta: Data: 1.52MB + Index: 0.77MB + Engine InnoDB
wp_posts: Data: 0.23MB + Index: 0.06MB + Engine InnoDB
wp_snippets: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_term_relationships: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_term_taxonomy: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_usermeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_users: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.06MB + Index: 0.00MB + Engine InnoDB
wp_wc_admin_note_actions: Data: 0.05MB + Index: 0.02MB + Engine InnoDB
wp_wc_category_lookup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_customer_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_download_log: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_orders: Data: 0.11MB + Index: 0.11MB + Engine InnoDB
wp_wc_orders_meta: Data: 0.45MB + Index: 1.94MB + Engine InnoDB
wp_wc_order_addresses: Data: 0.09MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_coupon_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_operational_data: Data: 0.06MB + Index: 0.03MB + Engine InnoDB
wp_wc_order_product_lookup: Data: 0.02MB + Index: 0.06MB + Engine InnoDB
wp_wc_order_stats: Data: 0.02MB + Index: 0.05MB + Engine InnoDB
wp_wc_order_tax_lookup: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_wc_product_attributes_lookup: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_download_directories: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_product_meta_lookup: Data: 0.02MB + Index: 0.09MB + Engine InnoDB
wp_wc_rate_limits: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_reserved_stock: Data: 0.02MB + Index: 0.00MB + Engine InnoDB
wp_wc_tax_rate_classes: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_webhooks: Data: 0.02MB + Index: 0.02MB + Engine InnoDB

Post Type Counts

attachment: 24
customize_changeset: 3
odr_master_log: 3
odr_order_bump: 1
odr_template: 1
page: 10
post: 2
product: 23
product_variation: 9
revision: 24
shop_coupon: 2
shop_order: 139
shop_order_placehold: 90
shop_order_refund: 4
shop_subscription: 4
wp_global_styles: 1
wp_navigation: 1
wp_template: 2
wp_template_part: 1

Security

Secure connection (HTTPS): ✔
Hide errors from visitors: ❌Error messages should not be shown to visitors.

Active Plugins (9)

Code Snippets: by Code Snippets Pro – 3.6.4
Order Bump for WooCommerce: by Flintop – 3.7.0
Failed Gateway: by It could be anyone. – 1.0
WooCommerce Stripe Gateway: by WooCommerce – 8.0.1
WooCommerce Payments Dev Tools: by Automattic –
WooPayments: by Automattic – 7.3.0
Woo Subscriptions: by WooCommerce – 5.9.1
WooCommerce: by Automattic – 8.7.0
Mail logging - WP Mail Catcher: by James Ward – 2.1.7

Inactive Plugins (6)

Gutenberg: by Gutenberg Team – 17.9.0
Hello Dolly: by Matt Mullenweg – 1.7.2
Loco Translate: by Tim Whitlock – 2.6.7
WooCommerce Blocks: by Automattic – 11.7.0
WooCommerce Checkout Field Editor: by WooCommerce – 1.7.12
WordPress Importer: by wordpressdotorg – 0.8.2

Settings

API Enabled: –
Force SSL: –
Currency: USD ($)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
subscription (subscription)
variable (variable)
variable subscription (variable-subscription)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to Woo.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature screen enabled: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –

Logging

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 3 MB

WC Pages

Shop base: #5 - /shop/
Cart: #6 - /cart/
Checkout: #7 - /checkout/
My account: #8 - /my-account/
Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty-Four
Version: 1.0
Author URL: https://wordpress.org
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme
WooCommerce Support: ❌ Not declared

Templates

Overrides: /Sites/wcpay/wp-content/plugins/woocommerce/templates/block-notices/error.php
/Sites/wcpay/wp-content/plugins/woocommerce/templates/block-notices/notice.php
/Sites/wcpay/wp-content/plugins/woocommerce/templates/block-notices/success.php

WooPayments

Version: 7.3.0
Connected to WPCOM: Yes
WPCOM Blog ID: xxx
Account ID: xxx
Payment Gateway: Enabled
Test Mode: Enabled
Enabled APMs: card,giropay,sofort,eps,affirm,afterpay_clearpay,klarna,sepa_debit,ideal
WooPay: Enabled (product,cart,checkout)
WooPay Incompatible Extensions: No
Apple Pay / Google Pay: Enabled (product,cart,checkout)
Fraud Protection Level: basic
Multi-currency: Enabled
Public Key Encryption: Disabled
Auth and Capture: Enabled
Documents: Disabled
Logging: Enabled

Subscriptions

WCS_DEBUG: ✔ No
Subscriptions Mode: ✔ Live
Subscriptions Live URL: https://wcpay.test
Subscriptions-core Library Version: 6.7.1
Subscription Statuses: wc-active: 2
wc-cancelled: 1
wc-on-hold: 4

WooCommerce Account Connected: ❌ No
Report Cache Enabled: ✔ Yes
Cache Update Failures: ✔ 0 failure

Store Setup

Country / State: United States (US) — California

Subscriptions by Payment Gateway

WooPayments: wc-active: 2
wc-on-hold: 4

WooPayments (SEPA Direct Debit): wc-cancelled: 1

Payment Gateway Support

WooPayments: products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

Failed Gateway: products
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
multiple_subscriptions

Stripe: products
refunds
tokenization
add_payment_method
subscriptions
subscription_cancellation
subscription_suspension
subscription_reactivation
subscription_amount_changes
subscription_date_changes
subscription_payment_method_change
subscription_payment_method_change_customer
subscription_payment_method_change_admin
multiple_subscriptions

WooPayments (SEPA Direct Debit): products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

WooPayments (iDEAL): products
refunds
multiple_subscriptions
subscription_cancellation
subscription_payment_method_change_admin
subscription_payment_method_change_customer
subscription_payment_method_change
subscription_reactivation
subscription_suspension
subscriptions
subscription_amount_changes
subscription_date_changes
tokenization
add_payment_method

Admin

Enabled Features: activity-panels
analytics
product-block-editor
coupons
core-profiler
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
product-variation-management
product-virtual-downloadable
product-external-affiliate
product-grouped
product-linked
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page

Disabled Features: customize-store
minified-js
new-product-management-experience
product-pre-publish-modal
settings
async-product-editor-category-field

Daily Cron: ✔ Next scheduled: 2024-03-27 13:02:46 +00:00
Options: ✔
Notes: 49
Onboarding: skipped

Action Scheduler

Complete: 179
Oldest: 2024-02-25 16:44:11 +0000
Newest: 2024-03-26 15:48:50 +0000

Failed: 13
Oldest: 2023-07-25 14:05:06 +0000
Newest: 2024-03-06 08:39:38 +0000

Pending: 6
Oldest: 2024-03-26 15:53:22 +0000
Newest: 2024-05-07 09:03:17 +0000

Status report information

Generated at: 2024-03-26 15:48:58 +00:00
`

Isolating the problem

• I have deactivated other plugins and confirmed this bug occurs when only WooCommerce plugin is active.
• This bug happens with a default WordPress theme active, or Storefront.
• I can reproduce this bug consistently using the steps above.

[frosso]

While searching, I didn't see an existing issue

[opr]

Thanks @frosso - actually I just spotted this today as well while reviewing something else. The cause is https://github.com/woocommerce/woocommerce/pull/44160/files#diff-64f06f1dfba7c01f3c0b28938c650ed24a1e43f0c80cb70ff0dd7c802e622d0eL191-R216

[frosso]

Thank you @opr , that helps a lot! If y'all don't have the bandwidth to fix the behavior, our team might be able to help

CC @FangedParakeet