Error "this block has encountered an error and cannot be previewed" on media-based blocks

[pauloeaquino]

Describe the bug

The WooCommerce Payments plugin is causing media-based blocks (i.e. image, media & text, cover, video, etc.) to throw this block has encountered an error and cannot be previewed errors.

To Reproduce

1. Install WooCommerce Payments plugin (no need to connect to a WooCommerce Payments account)
2. Add a media-based block (i.e. image, media & text, cover, video, etc.) to any page or post

Actual behavior

The error this block has encountered an error and cannot be previewed is shown.

Screenshots

Expected behavior

The block should be rendered without any errors.

Additional context

Encountered in 4827037-zen and 344659200-hc. I also tested on a fresh local install of WP with only WooCommerce Payments (and WooCommerce) plugins installed and was able to replicate the error.

---

This issue description was edited by @felipelousantos for adding more clarity.

[thesacredpath]

Reported here too: 32170495-hc Follow-up ticket: 4827251-zen

[thesacredpath]

Another report: 34466522-hc

[foosantos]

I'm not being able to reproduce this issue on my test site. Not sure if it is related to a new feature available only for new Atomic sites, but it works as expected on my test site.

Could you share the System Status Report for one of the test sites where you can reproduce this issue? In regular WP installations, you can get it by navigating to WP Admin > WooCommerce > Status. Once there, you can click on the "Get system report" button and then copy it by clicking on the "Copy for support" button.

(I tested with the WooCommerce Payments test mode, but it would be odd to be an issue only with live mode.)

[Greatdane]

@felipelousantos

Not sure if the same issue, but a user was unable to open pages at all in their browser (I was unable to replicate), this error was showing;

TypeError: this.activateMode is not a function
at https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:53687
at bt (https://[redacted]/wp-content/plugins/woocommerce-payments/dist/multi-currency-switcher-block.js?ver=2d570d92ca368384812f357e938ae3de:2:37410)
at Function.ba (https://[redacted]/wp-content/plugins/woocommerce-payments/dist/multi-currency-switcher-block.js?ver=2d570d92ca368384812f357e938ae3de:2:72594)
at n._createModes (https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:53647)
at n.initialize (https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:53056)
at n.initialize (https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:65656)
at n.initialize (https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:82716)
at n.h.View (https://[redacted]/wp-includes/js/backbone.min.js?ver=1.4.0:2:14139)
at n.constructor (https://[redacted]/wp-includes/js/wp-backbone.min.js?ver=5.9.1:2:2600)
at n.constructor (https://[redacted]/wp-includes/js/media-views.min.js?ver=5.9.1:2:36836)

Said it just started happening today. Safari worked for them but not Chrome.

34464585-hc

[pauloeaquino]

@felipelousantos

Here's a system report from a test site (via TasteWP). Safari browser.

`

WordPress Environment

WordPress address (URL): https://smoketemper.tastewp.com Site address (URL): https://smoketemper.tastewp.com WC Version: 6.2.1 REST API Version: ✔ 6.2.1 WC Blocks Version: ✔ 6.7.3 Action Scheduler Version: ✔ 3.4.0 WC Admin Version: ✔ 3.1.0 Log Directory Writable: ✔ WP Version: 5.9.1 WP Multisite: – WP Memory Limit: 96 MB WP Debug Mode: ✔ WP Cron: ✔ Language: en_US External object cache: –

Server Environment

Server Info: TasteWP Official/2.2.0 PHP Version: 7.4.28 PHP Post Max Size: 60 MB PHP Time Limit: 100 PHP Max Input Vars: 1000 cURL Version: 7.68.0 OpenSSL/1.1.1f

SUHOSIN Installed: – MySQL Version: 8.0.27-0ubuntu0.20.04.1 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: 6.2.1 WC Database Prefix: wp_ Total Database Size: 5.02MB Database Data Size: 3.44MB Database Index Size: 1.58MB 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_irrp_redirection_logs: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_irrp_redirectionmeta: Data: 0.02MB + Index: 0.03MB + Engine InnoDB wp_irrp_redirections: Data: 0.02MB + Index: 0.08MB + Engine InnoDB wp_links: Data: 0.02MB + Index: 0.02MB + Engine InnoDB wp_options: Data: 2.50MB + 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.02MB + 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_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 page: 8 post: 2 revision: 1 wp_global_styles: 1

Security

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

Active Plugins (6)

Backup Migration: by Migrate – 1.1.9 Copy & Delete Posts: by Copy Delete Posts – 1.2.7 MyPopUps: by Pop-ups – 1.0.9 Redirect Redirection: by Inisev – 1.0.6 WooCommerce Payments: by Automattic – 3.8.0 WooCommerce: by Automattic – 6.2.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) 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 WooCommerce.com: –

WC Pages

Shop base: Automattic/wp-calypso#7 - /shop/ Cart: Automattic/wp-calypso#8 - /cart/ Checkout: Automattic/wp-calypso#9 - /checkout/ My account: Automattic/wp-calypso#10 - /my-account/ Terms and conditions: ❌ Page not set

Theme

Name: Twenty Twenty Version: 1.9 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: ✔

Templates

Overrides: –

Subscriptions

WCS_DEBUG: ✔ No Subscriptions Mode: ✔ Live Subscriptions Live URL: https://smoketemper.tastewp.com Subscription Statuses: – WooCommerce Account Connected: ❌ No

Store Setup

Country / State: United States (US) — California

Payment Gateway Support

WooCommerce Payments

Version: 3.8.0 Connected to WPCOM: No Blog ID: - Account ID: -

Action Scheduler

Complete: 3 Oldest: 2022-03-03 02:57:28 +0000 Newest: 2022-03-03 02:57:28 +0000

Status report information

Generated at: 2022-03-03 03:01:49 +00:00 `

[foosantos]

(For reference, deleted the comment above as there were some links for the site of the user with the full SSR.)

[foosantos]

I was able to reproduce as well now, and not sure why I wasn't reproducing before. It seems to be happening also with sites that aren't Atomic. I wonder if we need to move it to the WooCommerce Payments repo.

[1dr0]

Also encountered on: 34465920-hc 34467852-hc

And a slightly different one here: 34467672-hc (can't access Additional CSS; unconfirmed if this is related, but the last updated plugin was WooCommerce Payments in their Activity Logs)

[pauloeaquino]

User report: 4827310-zen

[nagpai]

34467077-hc

Customizer disappears when WC Pay is enabled.

[dev-sabbir]

34439877-hc

Only the Widgets option is visible on the Customizer section

[pauloeaquino]

4827505-zen

[sudeepbaral]

Another user with the same issue here: 34467330-hc

Customizer appears after disabling the WooCommerce Payments plugin and disappears after enabling it again.

[sudeepbaral]

Another user with the same issue here: 4827226-zen

Unable to access customizer when WooCommerce Payments is enabled

[edwinho89]

34468945-hc

[htdat]

FYI. https://github.com/Automattic/woocommerce-payments/pull/3888 is going to fix this issue.

[jromales]

34334410-hc Unable to access Customizer when WooCommerce Payments is enabled

[htdat]

Hi all, WCPay 3.8.1 has been released to fix this issue. Would you please ask to customers about that?

[htdat]

I am closing this issue now. Feel free to create a new issue, and reach out to devs on #wcpay if there is still any other issue.

[jromales]

4827132-zd-woothemes - enabled WooCommerce Payments plugin again and issue is fixed now. I updated the user

[sudeepbaral]

4827417-zd Enabled WooCommerce Payments after updating it and could access the Customizer. I let the user know about it.