Automattic / themes

Free WordPress themes made by Automattic for WordPress.org and WordPress.com.
https://themeshaper.com
GNU General Public License v2.0
852 stars 345 forks source link

[Various themes: Sketch, Textbook, Rebalance] unable to edit Portfolios - Add New or Edit results in error message "The editor has encountered an unexpected error." #7941

Closed lizswafford closed 2 weeks ago

lizswafford commented 2 weeks ago

Quick summary

Editing the post type Portfolio results in the error message: "The editor has encountered an unexpected error". "Copy Post Text" "Copy Error".

Theme is Various themes: Sketch, Textbook, Rebalance Tested on Simple site, Starter Plan and Free Plan. Error occurs in SU using any browser. Switching to Classic View does not resolve the error.

Related to: 8441673-zd; 8455566-zd

Steps to reproduce

What you expected to happen

Portfolio lists are visible, clicking on a Portfolio item opens the editor view. Existing Portfolios that have been published, and drafts should be editable.

What actually happened

Clicking on a portfolio listing shows a flash of the existing portfolio, then the whole page is blocked with the error message.

Switching from Default View to Classic View does not resolve the error.

Browser

Google Chrome/Chromium, Mozilla Firefox

Context

Customer reports, testing.

Platform (Simple, Atomic, or both?)

Both

Other notes

JP Portfolio themes

Error is reproducible:

Error is probably reproducible, but not manually verified:

Error is not reproducible

Error log example from browser console:

@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/editor/index.min.js?m=1719485537i&ver=a9e2081c090a466d58de:59:1599
Xe/s</</p/p<@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:24573
__unstableMarkListeningStores@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:21969
ve/a</<@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:22227
p@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:24537
Xe/s</<@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:25139
Xe@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:25272
$e@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/data/index.min.js?m=1719485537i&ver=74833c9c8234e001f4cb:1:25588
mc@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/editor/index.min.js?m=1719485537i&ver=a9e2081c090a466d58de:59:1416
hu@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:60255
xi@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:119196
bs@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:108450
vs@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:108378
gs@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:108239
as@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:105074
is@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:105456
Hl@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:46631
448/rs/<@https://s0.wp.com/wp-content/plugins/gutenberg-core/v18.6.1/build/vendors/react-dom.min.js?m=1719485537i&ver=18:2:103031

Reproducibility

Consistent

Severity

Several sites (likely all sites matching this scenario at this point)

Available workarounds?

None

Workaround details

No actual workaround. Recommend to switch to FSE theme.

github-actions[bot] commented 2 weeks ago

Support References

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

mrfoxtalbot commented 2 weeks ago

I can replicate this. I have bumped the priority, it is quite a blocker.

Could you help us triage this, @dsas? If you cannot take care of it personally, could you help us assign it to the right person?

Thank you!

dsas commented 2 weeks ago

@mrfoxtalbot, @lizswafford I'm struggling to repro this. Can you repro consistently on every site? I'm testing on a Personal site and am pressing the Edit button here, is there any particular post content I need?

Screenshot 2024-07-09 at 10 07 47
dsas commented 2 weeks ago

Looks like it's related to coblocks, I can only repro it when coblocks is enabled on simple sites (blog id < 199179200 or has the coblocks-edge sticker). I'll keep digging.

mrfoxtalbot commented 2 weeks ago

I missed your earlier ping, sorry. Let me know if you still need another pair of eyes, @dsas. Thank you!

dsas commented 2 weeks ago

Perhaps I was mistaken about coblocks, I can now repro it regardless, though I couldn't at first, perhaps an error with my dev setup.

It looks as though this error is thrown from the gutenberg FlatTermSelector component when it tries to make a comma separated list of the termids, the termids are not defined.

The taxonomies fetched on the page have a rest_base of either tags or jetpack-portfolio-type.

If I run this in the console, I also get an undefined for tags and an empty array for jetpack-portfolio-type:

editorStore = 'core/editor'; 
const { getCurrentPost, getEditedPostAttribute } = window.wp.data.select( editorStore );
getEditedPostAttribute('tags');

This sounds like https://github.com/WordPress/gutenberg/issues/38823 but I don't understand why it would only just have started happening.

dsas commented 2 weeks ago

I assume unrelated but perhaps not. The TagsEducation feature also uses the same PostTaxonomyType that wraps FlatTermSelector, and that has recently moved from ETK to jetpack-mu-wpcom

dsas commented 2 weeks ago

I can't repro when self-hosted running the released version of jetpack and with the sketch theme. I can also repro on dotcom when using the rebalance theme but not themes like illustratr and lodestar. All of these themes have portfolio support.

dsas commented 2 weeks ago

I'll look into how the portfolio support differs between lodestar and sketch tomorrow.

CC @Automattic/pixel @miksansegundo @alaczek in case you know anything about jetpack portfolio.

upwardmomentum84 commented 2 weeks ago

Another report here: 8458121-zd-a8c

This one is using Textbook on a simple site. I could not reproduce on any of my test sites, even after trying to make sure all of the BlogRC options match.

dsas commented 2 weeks ago

I can reproduce on Textbook too

radtechgh commented 2 weeks ago

Another report: 8460234-zen Sketch theme on Simple site. Could not reproduce on test site.

mrfoxtalbot commented 2 weeks ago

Thank you for investigating @dsas.

All of these themes have portfolio support.

Just to clarify this, all themes should support Portfolios if we activate them under Settings > Writing https://wordpress.com/support/portfolios/#activate-portfolios

davipontesblog commented 2 weeks ago

I just edited the issue description here to include the most up-to-date explanation of this scope.

dsas commented 2 weeks ago

One thing I've struggled to understand with on this, is that I can reproduce it on some sites and not others, even when both are simple, have the same theme and neither have any stickers applied. I can reproduce on blog id 230008519 for example, but not blog id 235029673

mrfoxtalbot commented 2 weeks ago

I can reproduce on blog id 230008519 for example, but not blog id 235029673

I added myself to the site and I can edit portfolios on both sites without any issues 🤔

On the other hand, I can still reproduce it on this site mrfoxfreesite.wordpress.com

Any chance this could be connected to the plan or to a custom domain?

dsas commented 2 weeks ago

@mrfoxtalbot - what happens if you expand the tags section in the block settings sidebar?

Any chance this could be connected to the plan or to a custom domain?

It seems rather unlikely but never say never.


On the site I can reproduce it on, the error is because <FlatTermSelector> is trying to access _termIds.join and _termIds.length even though _termIds is undefined. This will be undefined when the current editor state hasn't changed any tags and the saved post also doesn't have any tags.

On the site I cannot reproduce it on, <FlatTermSelector> isn't ran at all, until I expand the tags section in the right hand sidebar. When I do do that, it crashes immediately.

I don't know exactly why on some projects <FlatTermSelector> is invoked when loading the editor and sometimes it isn't. I think it's to do with whether you had it open last time and whether the taxonomy is set to be visible and maybe some other stuff. It doesn't really matter why though. I suspect this unknown is probably masking which themes are affected, and it's really more of them.

I don't know why the portfolio post tags are undefined and whether that's a further problem either with wpcom, jetpack or GB. I do think that <FlatTermSelector> should be more defensive so I'll open a GB bug and start the conversation from there

dsas commented 2 weeks ago

I suspect this unknown is probably masking which themes are affected, and it's really more of them.

Nope, I still can't reproduce with Lodestar 😕

dsas commented 2 weeks ago

The difference between themes is that on lodestar, there are two visibleTaxonomies - jetpack-portfolio-type and jetpack-portfolio-tag, whereas sketch adds tags to that list.

This is because on the tags taxonomies the supported post types are [ "post", "page", "jetpack-portfolio" ] when using sketch, but when using lodestar it's just [ "post" ]. Looking at the CPT for jetpack-portfolio it only registers itself with the two portfolio taxonomies, not with tags.

Next step: Figure out why this changes between themes

dsas commented 2 weeks ago

I've figured out why the use of the tags taxonomy differs depending on the theme.

Jetpack on wpcom will register portfolio cpt support for the tag taxonomy for themes which opt into it. Sketch does, Lodestar doesn't.

Ergo, the list of themes affected is:

I haven't figured out exactly why the tags taxonomy fails in GB. The http request to /wp/v2/sites/<siteid>/jetpack-portfolio/<postid>/ doesn't have an empty tags array, which I would expect. If that is related, then it's happening because the theme for that rest request is a8c/public-api rather than the sites theme, and so the extra registration logic isn't happening.

I'm rather sure it is related, because to recap, the saved post entity doesn't have a tag key.

dsas commented 2 weeks ago

I do think that should be more defensive so I'll open a GB bug and start the conversation from there

Opened https://github.com/WordPress/gutenberg/pull/63461, and that change will stop the editor crashing, but it's far from a complete fix - whenever you edit the project the existing tags won't display.

dsas commented 2 weeks ago

I think this might have been caused by https://github.com/Automattic/jetpack/pull/38154

@darssen would you be able to take a look at this bug?

Summary of the comments above

The problem is that some themes on dotcom crash gutenberg when editing portfolio posts. The root cause is that some themes opt portfolios into featured content via the classic-theme-helper (e.g. sketch). The crash hapens because the post gutenberg gets, doesn't include a tags key, as the featured content code doesn't run when GB makes a call to /wp/v2/sites/<siteid>/jetpack-portfolio/<postid>/ and so hasn't registered the post types support for the tags taxonomy.

I've opened a pr (https://github.com/WordPress/gutenberg/pull/63461) to stop GB crashing, but it doesn't completely fix the problem - the tags list when editing a project will be empty even if it was populated before.

For context, this is affecting multiple dotcom customers and has been escalated (p1720702473559139-slack-C02FMH4G8). The repro steps are in the opening post of this issue.

darssen commented 2 weeks ago

Many thanks for the great sleuthing @dsas. You are right that Automattic/jetpack#38154 caused the issue since adding the code back in my sandbox fixed the issue.

I'm working on a fix in wpcom. More details p1720732883758829-slack-CBG1CP4EN

dsas commented 2 weeks ago

Closing the issue then, thank you so much @darssen