Navigation items (inside navigation section) on site editor displays blank screen on WooCommerce sites

rakshitwesley commented 1 year ago

Quick summary

The navigation section on the site editor for WooCommerce plans is not working. It shows a blank screen: [video redacted to remove user info]

~The issue is specific to Woo Express plans only. It works on a Business plan.~

Update: Triaging indicates that Business Plan sites with WooCommerce plugin active also replicate this issue across FSE themes. -cuemarie

Steps to reproduce

Create a site with a Woo Express plan
Add a site editor theme to it
Navigate to Appearance > Editor > Navigation and select any of the items listed there

What you expected to happen

Navigation menu items to show up

What actually happened

Blank screen

Impact

Most (> 50%)

Available workarounds?

Yes, easy to implement

Platform (Simple and/or Atomic)

Atomic

Logs or notes

Workaround: Edit the navigation through the page template

https://github.com/Automattic/wp-calypso/assets/95758851/8b5ad170-0af4-413a-83f8-9d323ae66a77

worldomonation commented 1 year ago

📌 REPRODUCTION RESULTS Tested on Simple – not applicable Tested on Atomic – reproduced Replicable outside of Dotcom – not tested

📌 NOTES

reproduced with a new site created with Woo Express.
reproduced across various FSE themes.

📌 FINDINGS/SCREENSHOTS/VIDEO

https://github.com/Automattic/wp-calypso/assets/6549265/55b8b33c-d3b3-4a8e-b0a5-679e1b2a9573

📌 LOGS

TypeError: e.split is not a function
    531 legacy-template.js:15
    n emitter.js:14
    n emitter.js:14
    emit emitter.js:43
    s registry.js:65
    r registry.js:247
    Redux 4
    x promise-middleware.js:20
    U resolvers-cache-middleware.js:51
    g Redux
    Go use-init-edited-entity-from-url.js:58
    Vr react-dom.min.js:1
    Cl react-dom.min.js:1
    El react-dom.min.js:1
    El react-dom.min.js:1
    dl react-dom.min.js:1
    Nn react-dom.min.js:1
    ol react-dom.min.js:1
    ol react-dom.min.js:1
    ul react-dom.min.js:1
    Dt react-dom.min.js:1
    Ft react-dom.min.js:1
    s index.js:68
    c index.js:75
    r registry.js:247
    Redux 4
    x promise-middleware.js:20
    U resolvers-cache-middleware.js:51
    Redux 3
    <anonymous> global-styles-provider.js:41
    l index.js:133
    __unstableMarkListeningStores registry.js:123
    a registry.js:204
    l index.js:132
    getValue index.js:154
    Rt react-dom.min.js:1
    Ft react-dom.min.js:1
    s index.js:68
    c index.js:75
    r registry.js:247
    Redux 4
    x promise-middleware.js:20
    U resolvers-cache-middleware.js:51
    g Redux
    Xt resolvers.js:471
    Redux 2
    x promise-middleware.js:20
    U resolvers-cache-middleware.js:51
    Redux 3
site-editor.php:2367:25

📌 ACTIONS

move to Prioritize & Assign column.
set priority to High.

kimerlin81 commented 1 year ago

I was able to reproduce this issue on a site with a Business plan. Ticket: 6599369-zd-woothemes

github-actions[bot] commented 1 year ago

Support References

This comment is automatically generated. Please do not edit it.

[ ] 6599369-zen
[ ] 6625453-zen
[ ] 6643176-zen
[ ] 6606182-zen

cuemarie commented 1 year ago

Thanks for that update, @kimerlin81. Noting that the user's site in that report is on the Business plan, using theme Munchies.

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

Tested on Atomic with Business Plan – Replicated
Replicated outside of Dotcom - Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

I replicated this on my Business plan AT site as well as in my self-hosted environment - the issue seems to be a WooCommerce / Gutenberg 16.3.0 conflict.
The error reproduces consistently with WooCommerce v7.9.0 and v7.8.2 alongside Gutenberg v16.3.0. Using Gutenberg 16.2.1 does not result in the same error - the navigation editor loads fine using that version.

Screenshots/Recordings

Self Hosted Site

https://github.com/Automattic/wp-calypso/assets/27249804/b67c6b3e-db95-40bd-a61e-8e2e7b2ab335

📌 ACTIONS

Assigned to Other
Reported here: https://github.com/woocommerce/woocommerce-blocks/issues/10628

gigitux commented 1 year ago

This issue is caused by https://github.com/WordPress/gutenberg/issues/53230

jp-imagines commented 1 year ago

Another report here: 6625453-zd-a8c

gigitux commented 1 year ago

In the few hours, WooCommerce Blocks 10.8.1 will be released and a fix for this issue will be included. The same fix will be included into WooCommerce Core 8.0.

cc @imanish003

gigitux commented 1 year ago

We released WooCommerce Blocks 10.8.1 🥳

cc @imanish003

cuemarie commented 1 year ago

Awesome, thanks @gigitux ! Confirming that with WooCommerce Blocks 10.8.1 installed on my test site, the problem is indeed resolved! Once WooCommerce Core 8.0 has reached WordPress.com sites, we should be good to close this! ❤️

ClassicRKR27 commented 1 year ago

Another report here: 6643176-zd-a8c

mdtanjid0 commented 1 year ago

[ ] #6606182-zen ( needs to follow up once the issue fixed )

imanish003 commented 1 year ago

I am closing this issue since it has been resolved in WooCommerce Blocks 10.8.1. The fix is also included in the latest version of WooCommerce Blocks. Please feel free to leave a comment on this issue if you can still reproduce it in WooCommerce Blocks 10.8.1 or Latest version of WooCommerce Blocks.

Automattic / wp-calypso