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

anastas10s-afk commented 2 years ago

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]):

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

To Reproduce

Steps to reproduce the behavior:

Create a fresh installation, having only WooCommerce & Storefront active
Create a new page and opt to add a WooCommerce block in it; the "All Products", for example
In the block editor (back-end) the "add to cart" button appears completely dark/black
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 commented 2 years ago

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 https://github.com/woocommerce/storefront/pull/2066 to fix this. You can subscribe to that PR to follow its status.

Again, thank you for your report! Much appreciate!

anastas10s-afk commented 2 years ago

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

woocommerce / storefront