Invalid WP Core Button blocks on Blog Home template for Tsubaki (fresh trial start)

nerrad commented 1 year ago

Describe the bug

When previewing/editing the Blog Home template with the Tsubaki theme active on a fresh trial start of WooExpress, all the WP core Button blocks are showing the invalid block content warning.

Initial quick look doesn't seem to indicate anything wrong in the recovery diff UI.

However, some warnings in the console may be a clue:

logger.js:17 Block validation: Expected attribute class of value wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button, saw wp-block-button__link wp-element-button.

NOTE: For Woo Express, the linked page for retrieving a system status report in the GH issue template references a different path for getting the system status than where it is located in Woo Express.

Expected behavior

Expect no validation errors on fresh install.

Steps to reproduce

Start a fresh trial of Woo Express
Click the "Choose Theme" step of the task list.
Observe the invalid block warnings for all instances of the WP Button block on the Blog Home template.

(Note, I suspect the above steps aren't needed to explicitly reproduce - especially given this is likely an issue with the Button block syntax in the theme's starting template).

### WordPress Environment (click to view)

``` ### WordPress Environment ### WordPress address (URL): https://woo-softly-impossible-cycle.wpcomstaging.com Site address (URL): https://woo-softly-impossible-cycle.wpcomstaging.com WC Version: 7.9.0 REST API Version: ✔ 7.9.0 WC Blocks Version: ✔ 10.4.6 Action Scheduler Version: ✔ 3.6.1 Log Directory Writable: ✔ WP Version: 6.2.2 WP Multisite: – WP Memory Limit: 512 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: ✔ ### Server Environment ### Server Info: nginx PHP Version: 8.0.29 PHP Post Max Size: 2 GB PHP Time Limit: 1200 PHP Max Input Vars: 6144 cURL Version: 8.0.1 OpenSSL/1.1.1n SUHOSIN Installed: – MySQL Version: 10.4.28-MariaDB-log Max Upload Size: 2 GB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### WC Database Version: 7.9.0 WC Database Prefix: wp_ Total Database Size: 5.47MB Database Data Size: 2.87MB Database Index Size: 2.60MB wp_woocommerce_sessions: Data: 0.08MB + 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_automatewoo_abandoned_carts: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_automatewoo_customers: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_automatewoo_customer_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_events: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_guests: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_automatewoo_guest_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_logs: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_log_meta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_automatewoo_queue: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_automatewoo_queue_meta: 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.09MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 1.25MB + Index: 0.06MB + Engine InnoDB wp_postmeta: Data: 0.09MB + Index: 0.03MB + Engine InnoDB wp_posts: Data: 0.08MB + Index: 0.06MB + 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_order_bundle_lookup: Data: 0.02MB + Index: 0.09MB + 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_woocommerce_bis_activity: Data: 0.02MB + Index: 0.05MB + Engine InnoDB wp_woocommerce_bis_notifications: Data: 0.02MB + Index: 0.09MB + Engine InnoDB wp_woocommerce_bis_notificationsmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_bundled_itemmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_bundled_items: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_gc_activity: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_gc_cards: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_gc_cardsmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_prl_deploymentmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_woocommerce_prl_deployments: Data: 0.02MB + Index: 0.06MB + Engine InnoDB wp_woocommerce_prl_frequencies: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_woocommerce_prl_tracking_conversions: Data: 0.02MB + Index: 0.05MB + Engine InnoDB ### Post Type Counts ### attachment: 31 jetpack_migration: 2 page: 9 post: 1 product: 13 revision: 2 wp_global_styles: 2 wp_navigation: 2 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (22) ### Akismet Anti-Spam: Spam Protection: by Automattic - Anti Spam Team – 5.2 AutomateWoo: by WooCommerce – 5.8.5 Crowdsignal Forms: by Automattic – 1.7.0 WordPress.com Editing Toolkit: by Automattic – 3.72624 Gutenberg: by Gutenberg Team – 16.2.1 Jetpack: by Automattic – 12.4-a.7 Layout Grid: by Automattic – 1.8.4 Page Optimize: by Automattic – 0.5.3 Crowdsignal Polls & Ratings: by Automattic Inc. – 3.0.11 Woo AI: by WooCommerce – 0.2.0 WooCommerce Back In Stock Notifications: by WooCommerce – 1.6.3 WooCommerce Brands: by WooCommerce – 1.6.54 WooCommerce Gift Cards: by WooCommerce – 1.16.3 WooCommerce Google Analytics Integration: by WooCommerce – 1.8.3 WooCommerce Min/Max Quantities: by WooCommerce – 4.1.0 WooCommerce Payments: by Automattic – 6.2.0 WooCommerce Product Add-ons: by WooCommerce – 6.4.4 WooCommerce Product Bundles: by WooCommerce – 6.22.2 WooCommerce Product Recommendations: by WooCommerce – 2.4.0 WooCommerce Shipping & Tax: by WooCommerce – 2.3.1 WooCommerce Shipment Tracking: by WooCommerce – 2.3.1 WooCommerce: by Automattic – 7.9.0 ### Inactive Plugins (10) ### Avalara AvaTax: by Avalara – 2.5.0 Classic Editor: by WordPress Contributors – 1.6.3 TaxJar - Sales Tax Automation for WooCommerce: by TaxJar – 4.1.5 WooCommerce Australia Post Shipping: by WooCommerce – 2.5.3 WooCommerce Canada Post Shipping: by WooCommerce – 2.8.1 WooCommerce EU VAT Number: by WooCommerce – 2.8.5 WooCommerce FedEx Shipping: by WooCommerce – 3.8.0 WooCommerce Royal Mail: by WooCommerce – 2.9.0 WooCommerce UPS Shipping: by WooCommerce – 3.5.1 WooCommerce USPS Shipping: by WooCommerce – 4.7.1 ### Dropin Plugins (2) ### advanced-cache.php: advanced-cache.php object-cache.php: Memcached ### Must Use Plugins (1) ### WP.com Site Helper: by – ### Settings ### API Enabled: – Force SSL: – Currency: USD ($) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 2 Taxonomies: Product Types: bundle (bundle) 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: ✔ HPOS feature screen enabled: – HPOS feature enabled: – Order datastore: WC_Order_Data_Store_CPT HPOS data sync enabled: – ### WC Pages ### Shop base: #45 - /shop/ Cart: #46 - /cart/ Checkout: #47 - /checkout/ My account: #48 - /my-account/ Terms and conditions: ❌ Page not set ### Theme ### Name: Tsubaki Version: 1.2.1 Author URL: https://automattic.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: /wordpress/plugins/woocommerce/7.9.0/packages/woocommerce-blocks/templates/notices/error.php /wordpress/plugins/woocommerce/7.9.0/packages/woocommerce-blocks/templates/notices/notice.php /wordpress/plugins/woocommerce/7.9.0/packages/woocommerce-blocks/templates/notices/success.php ### Back In Stock ### Database Version: 1.6.3 Loopback Test: – ### Gift Cards ### Database Version: 1.16.3 Loopback Test: – Task Queueing Test: ✔ ### Product Bundles ### Database Version: 6.22.2 Loopback Test: – Template Overrides: – ### 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 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 navigation new-product-management-experience product-variation-management settings async-product-editor-category-field Daily Cron: ✔ Next scheduled: 2023-07-21 18:03:45 -04:00 Options: ✔ Notes: 63 Onboarding: skipped ### WooCommerce Payments ### Version: 6.2.0 Connected to WPCOM: Yes Blog ID: 221483430 Account ID: - ### Action Scheduler ### Complete: 19 Oldest: 2023-07-20 14:06:07 -0400 Newest: 2023-07-20 14:06:08 -0400 Failed: 1 Oldest: 2023-07-20 14:06:08 -0400 Newest: 2023-07-20 14:06:08 -0400 Pending: 2 Oldest: 2023-07-20 15:06:08 -0400 Newest: 2023-07-21 14:06:08 -0400 ### Product Recommendations ### Database Version: 2.4.0 Loopback Test: – Task Queueing Test: ✔ Page Cache Test: – ### Status report information ### Generated at: 2023-07-20 14:34:46 -04:00 ```

What plan is active?

Free trial

PanosSynetos commented 1 year ago

Thanks for the issue @nerrad

It's easier to reproduce, if you just go to Appearance > Editor wp-admin/site-editor.php (with Tsubaki enabled)

nerrad commented 1 year ago

In the console there are more details about the block validation error:

Content generated by `save` function:

<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button">Shop now</a></div>

Content retrieved from post body:

<div class="wp-block-button is-style-fill"><a class="wp-block-button__link wp-element-button">Shop now</a></div>

You can also reproduce this locally by copying what is configured in the pattern used in this template for the buttons block and button and pasting it in the code editor view of a site editing instance (you'll need to replace the PHP block with text):

https://github.com/Automattic/theme-tsubaki/blob/0c737159003f1334763cbaeb4d4bd1805f40952b/patterns/full-width-image-cta.php#L20C3-L26C23

Code editor View	Exiting Code Editor View

If I add the has-white-color has-black-background-color has-text-color has-background CSS classes to button block syntax in the code editor view with something like this, there is no validation error:

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"black","textColor":"white","className":"is-style-fill"} -->
<div class="wp-block-button is-style-fill"><a class="wp-block-button__link has-white-color has-black-background-color has-text-color has-background wp-element-button">Shop now</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

So it looks like this could be immediately fixed by updating the patterns in Tsubaki. It's possible this change might have been related to some updates to the color handling in global styles since I don't see any changes in the immediate history of the Buttons or Button block that would have caused this. @oandregal does anything come to your mind about a change in Gutenberg that might have caused this - or is this just something that patterns would have to account for in updates?

xristos3490 commented 1 year ago

Nice catch, @nerrad, Thanks!

This seems to be related to a recent work we did on handling the global styles here https://github.com/Automattic/theme-tsubaki/pull/33/files, But I'm not sure where this regression occurred.

xristos3490 commented 1 year ago

Oh, I just got it. Indeed in this PR, I forgot to remove the JSON attributes along with the classes 😅

nerrad commented 1 year ago

Ahh, ya that would be it :)

xristos3490 commented 1 year ago

Resolved at https://github.com/Automattic/theme-tsubaki/issues/35

Automattic / wc-calypso-bridge