Inconsistency between back-end editor and front-end: buttons appear in black, while in back-end

[anastas10s-afk]

Describe the bug

While adding any WooCommerce Block showing products, in the block editor, the Add to cart/Select options buttons are completely black (text and background), but they look as expected on front-end.

Isolating the problem (mark completed items with an [x]):

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• I can reproduce this bug consistently using the steps below.

To Reproduce

Steps to reproduce the behavior:

1. Create a fresh installation, having only WooCommerce & Storefront active
2. Create a new page and opt to add a WooCommerce block in it; the "All Products", for example
3. In the block editor (back-end) the "add to cart" button appears completely dark/black
4. When viewing the page on the front-end, the same button(s) appear as expected

Screenshots

Back-end: https://snipboard.io/euRLJM.jpg
Front-end: https://snipboard.io/SRneDv.jpg

Expected behavior

I was expecting the button(s) to have the same appearance, independently of editing or viewing screen.

Browser Environment

https://www.whatsmybrowser.org/b/VJMBX

• Platform: macOS Ventura
• Browser(s): Chrome 107

WordPress Environment

`

WordPress Environment

WordPress address (URL): https://obtainablegroup.s3-tastewp.com
Site address (URL): https://obtainablegroup.s3-tastewp.com
WC Version: 7.0.1
REST API Version: ✔ 7.0.1
WC Blocks Version: ✔ 8.5.2
Action Scheduler Version: ✔ 3.4.0
Log Directory Writable: ✔
WP Version: 6.1
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: ✔
WP Cron: ✔
Language: en_US
External object cache: –

Server Environment

Server Info: TasteWP-S3 Official/3.0.0
PHP Version: 7.4.30
PHP Post Max Size: 60 MB
PHP Time Limit: 100
PHP Max Input Vars: 5000
cURL Version: 7.68.0
OpenSSL/1.1.1f

SUHOSIN Installed: –
MySQL Version: 8.0.30-0ubuntu0.20.04.2
Max Upload Size: 60 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ❌ Your server does not have the SoapClient class enabled - some gateway plugins which use SOAP may not work as expected.
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

Database

WC Database Version: 7.0.1
WC Database Prefix: wp_
Total Database Size: 2.40MB
Database Data Size: 0.97MB
Database Index Size: 1.43MB
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.02MB + Index: 0.06MB + Engine InnoDB
wp_woocommerce_order_items: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_woocommerce_order_itemmeta: Data: 0.02MB + Index: 0.03MB + 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.02MB + 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.02MB + Index: 0.03MB + Engine InnoDB
wp_commentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_comments: Data: 0.02MB + Index: 0.08MB + Engine InnoDB
wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_options: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_postmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_posts: Data: 0.02MB + Index: 0.06MB + 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_termmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB
wp_terms: 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_note_actions: Data: 0.02MB + Index: 0.02MB + Engine InnoDB
wp_wc_admin_notes: Data: 0.05MB + Index: 0.00MB + 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_order_coupon_lookup: Data: 0.02MB + 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
wp_wpfm_backup: Data: 0.02MB + Index: 0.00MB + Engine InnoDB

Post Type Counts

attachment: 1
nav_menu_item: 5
page: 8
post: 2
product: 1
revision: 3
wp_global_styles: 1

Security

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

Active Plugins (1)

WooCommerce: by Automattic – 7.0.1

Inactive Plugins (0)

Dropin Plugins (1)

maintenance.php: maintenance.php

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)
variable (variable)

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 WooCommerce.com: –
Enforce Approved Product Download Directories: ✔

WC Pages

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

Theme

Name: Storefront
Version: 4.1.3
Author URL: https://woocommerce.com/
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: ✔

Templates

Overrides: –

Admin

Enabled Features: activity-panels
analytics
coupons
customer-effort-score-tracks
experimental-products-task
experimental-import-products-task
experimental-fashion-sample-products
experimental-product-tour
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
multichannel-marketing
mobile-app-banner
navigation
onboarding
onboarding-tasks
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: minified-js
new-product-management-experience
settings

Daily Cron: ✔ Next scheduled: 2022-11-08 11:56:56 +00:00
Options: ✔
Notes: 36
Onboarding: skipped

Action Scheduler

Complete: 5
Oldest: 2022-11-07 11:58:31 +0000
Newest: 2022-11-07 11:58:31 +0000

Pending: 1
Oldest: 2022-11-08 11:56:59 +0000
Newest: 2022-11-08 11:56:59 +0000

Status report information

Generated at: 2022-11-07 15:55:29 +00:00
`

[dinhtungdu]

Hi @anastas10s-afk,

Thank you so much! I can reproduce the issue on my end with WP 6.1. WP 6.0 doesn't have this issue.

I created #2066 to fix this. You can subscribe to that PR to follow its status.

Again, thank you for your report! Much appreciate!

[anastas10s-afk]

This is brilliant @dinhtungdu, I've subscribed there, thanks!