Existing Video Block Code Prevents Block Editor From Loading

[renata-franco]

Quick summary

The majority of the posts cannot be loaded on Block Editor on this simple site.
Ticket: 4460307zd

Steps to reproduce

1. Start on https://wordpress.com/posts/
2. Click on any post. Some load, most don't.

What you expected to happen

The block editor should load.

What actually happened

For all the posts that do not load, no matter their title, the tab only says "50 Steps to Mastering Python Premium Content", which is the title of the website.

Some posts load with the blue WordPress.com Favicon. Some load with the orange WordPress.com favicon.

Some have a normal structure for a Block Editor post, even if they do not open.
Others have a very long link, similar to those from Classic Editor, like this one:

• /wp-admin/post.php?post=533&action=edit&calypsoify=1&block-editor=1&frame-nonce=fd30ab5628&origin=https%3A%2F%2Fwordpress.com&environment-id=stage&support_user&_support_token

Classic Editor loads the pages. Another interesting thing is that it seems to be a bit random, as some post open sometimes and other times they don't.

Context

Customer report on their site.

Browser

Mozilla Firefox

Simple/Atomic

Simple

Other notes

Operating System

MacOS

OS Version

Monterrey 12.0.1.

Browser Version

Firefox 94.

Is this specific to the applied theme? If so, what is the theme name?

No, occurs regardless of theme.

Console and/or error logs

On posts that do load on Block Editor, I get this error:

On posts that do not load, I get this error:

On posts that load with the strange link (explained above), I get nothing:

Available Workarounds

They can use the classic editor but it appears that most of their pages were built with the block editor so that is less than ideal.

Reproducibility

Consistent

Severity

One

Available workarounds?

No and the platform is unusable

Workaround details

No response

[renata-franco]

Very sorry if this is in the incorrect category.

[sophiegyo]

I am pretty sure this is related to another issue. Your user report indicated that the post titled Chapter 25 was one with a problem. I was able to replicate the problem, and when I opened it in the Classic Editor, I found there was a video at the very bottom of the post.

Edit: It's definitely the video, I removed and re-added it and the post is fine now.

[mrfoxtalbot]

@sophiegyo and I have been testing this and it looks like it is indeed a video block that is causing the editor to break. Some old posts have video blocks that seem to have been created with a previous version of the editor but are conflicting with the current version.

Here is an example of the code that is found in these posts and prevents the editor from loading:

<!-- wp:video {"guid":"NA1ZEUCw","id":458,"src":"https:\/\/mrfoxtestingsite.files.wordpress.com/\/2020\/11\/basque-names.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-4-3 wp-has-aspect-ratio"} -->	 
<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress wp-embed-aspect-4-3 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">	 
https://videopress.com/v/NA1ZEUCw?preloadContent=metadata	 
</div></figure>	 
<!-- /wp:video -->

For reference, below is the code current the editor (Gutenberg: v11.8.3) will generate if you try to add a new video block now:

<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><div class="wp-block-embed__wrapper">
https://videopress.com/v/RZIlVR0A?resizeToParent=true&amp;cover=true&amp;posterUrl=https%3A%2F%2Fvideos.files.wordpress.com%2FRZIlVR0A%2Fbasque-names_std.original.jpg&amp;preloadContent=metadata
</div></figure>

There are a few differences between the two codes but the first thing that caught my eyes was the escaped '/' in the video URL.

In order to test this on a new post, I had to use the Classic editor, since the block editor will NOT let me add this code in the "Visual" editor and will delete the code if I try to add it via "Code Editor":

Pasting this code inside an HTML block will also cause the editor to crash:

We also noticed that pasting the offending code in the classic editor "unscapes" the URL, but the post will still not load via the block editor:

Interestingly enough, the public post loads just fine. AT and Simple sites return the same results. Here are two examples:

• Simple Site: https://mrfoxtestingsite.wordpress.com/2021/11/16/broken-editor/
• Atomic: https://mrfxvanillaat.wpcomstaging.com/2021/11/17/existing-video-block-code-causes-editor-to-crash/ (with and without the Gutenberg plugin)

I tested this on a local site with and without the Gutenberg plugin and the code does show as a broken block but does NOT crash the editor completely:

To add it up, we need to figure out what has changed in the editor that makes it no longer compatible with video blocks added by previous Gutenberg versions and why it makes the entire editor to crash, as opposed to just showing a "broken block" message.

[jeherve]

cc @Automattic/greenhouse who have been making changes to the Video block recently.

It would be interesting to figure out if this only happens on WordPress.com Simple, or if this also happens:

• On WoA sites (currently running 10.4-a.5, with recent changes to the block)
• On self-hosted Jetpack sites running 10.3.

[sophiegyo]

It would be interesting to figure out if this only happens on WordPress.com Simple, or if this also happens:

* On WoA sites (currently running 10.4-a.5, with recent changes to the block)

* On self-hosted Jetpack sites running 10.3.

I'd have tested if I could :( Unfortunately it requires a page/post where the video was already added before whatever change triggered this, adding a video block now works just fine :/

[JoshuaGoode]

Seems this Atomic Request was related: p9F6qB-7GH-p2

Console error I'm seeing on a Simple site:

Updated Block: core/video
react-dom.min.edd8b7a6.js?m=1624062436h:7 TypeError: Cannot read properties of undefined (reading 'length')

[roundhill]

We're working on a fix for this, should be a simple one and deployed soon.

[roundhill]

The blank editor issue should be fixed now, let us know if y'all still have any issues editing posts with video blocks.

[mrfoxtalbot]

It does seem to be fixed now @roundhill, thank you for the quick response!

[rw-ye]

Customer report of this issue on AT site - 4464349-zd-woothemes

[mrfoxtalbot]

Thank you @rw-ye. I just retested this and I can confirm that is if fixed on simple sites but it is still breaking the editor on AT sites, @roundhill. Thank you!

[roundhill]

Thank you @rw-ye. I just retested this and I can confirm that is if fixed on simple sites but it is still breaking the editor on AT sites, @roundhill. Thank you!

Yes, we discovered that it was also an issue on Atomic. It should be fixed today, I'll reply here when it is deployed!

[kraftbj]

Apologies for the delay. The fix was deployed to Atomic-hosted sites at approximately 10:45 a.m. Central time (5 hours ago).

Internal reference p9o2xV-1IJ-p2#comment-5280