Invalid block warning not clickable

[johngodley]

The invalid block warning message is no longer clickable, preventing access to the buttons or the ellipsis.

This seems to be caused by #11357. Specifically, the <IgnoreNestedEvents> is no longer the root .editor-block-list__block-edit, and now is a child of <div className="editor-block-list__block-edit">. This then causes this CSS to take effect, stopping any interaction:

	&.has-warning .editor-block-list__block-edit {
		> :not(.editor-warning) {
			pointer-events: none;
			user-select: none;
		}
	}

Deleting the rule fixes the problem, but I'm unaware if the rule is needed for anything. It may be possible to tweak it so that it takes the new hierarchy into account.

To Reproduce
Steps to reproduce the behavior:

1. Invalidate a block
2. Try and click anything in the warning message

[johngodley]

Pinging @jasmussen for advice! Happy to PR it, just not sure which direction to go.

[jasmussen]

Great ticket, thank you. I'm working on a fix right now, will assign you as reviewer.

[jasmussen]

@johngodley In that PR linked above, I have a fix for this. However can you perhaps help me with writing an e2e test for these interactions?

[MarkRH]

I made a comment regarding this here: #9906 (comment)

[idiotprogrammer]

[ 4.9.8 wordpress, self-hosted, Chrome Browser

I don't mean to whine.

I have been using Wordpress on my idiotprogrammer blog since June 2003. (The founder, Matt Mullenweg, was a UH student in my city when he told me about his project a month after his first release). I was one of Wordpress's earliest advocates.

I too am experiencing this bug on a long content page on my blog. http://www.imaginaryplanet.net/weblogs/idiotprogrammer/tips-for-smashwords-authors-publishers/

It locks every time. I can create new posts and open the edit screen with Gutenberg, but this page is now entirely uneditable. This published version actually is an earlier version from 3 hours ago which I reverted to. All the later versions have this same message.

Notably, in the edit window, I can see only about half of the entire page. About the other half, I have no idea whether this content is gone. Maybe the rest of the content in the edit window is invisible because it's invalid or has been deleted on this revision. In any case, there is no recovery path here.

This is a terrifying message, probably the most terrifying message I have seen in my 18 years as a blogger. And I have tried several CMS and even wrote a book about content management systems. I don't doubt that Gutenberg created an invalid edit state here, But if the edit window doesn't let you do anything and reverting to the classic editor destroys content, I don't think there's anything I as a content creator can do.

If Gutenberg produces these error states on certain pages/posts, and there is no way to work around them or back things up or correct them, that turns Gutenberg into something too risky for most users.

As it happens, this page URL is very important. I have spent the last 2-3 hours sending it to people and organizations. I can't make some necessary revisions because I am afraid it will ruin what is there.

Any insight or recovery steps might be appreciated.

[jasmussen]

@idiotprogrammer

Sorry you're experiencing this issue. I'm responsible for at least part of the problem, and although a fix is implemented in #11768, this didn't make it to 4.3. It's not a great feeling, introducing software issues, and we are creating an end to end test to make sure this doesn't happen again.

From a high level, there appear to be two issues here. The first one is a bug that introduced the parsing error (invalid content) in the first place. This is fixed in #11771 which also didn't make it to 4.3.

The second, is the inability to click the buttons, which as noted, is fixed by #11768.

I don't doubt that Gutenberg created an invalid edit state here, But if the edit window doesn't let you do anything and reverting to the classic editor destroys content, I don't think there's anything I as a content creator can do.

To be clear — these are bugs in the system that we will fix. If not in Gutenberg 4.4, then in 4.3.1.

It's also worth noting that clicking "resolve" would show a before/after comparison and let you choose which version to keep — the unchanged version, or the one Gutenberg thinks is right. I would ask for your patience as we fix these two bugs.

Any insight or recovery steps might be appreciated.

For the time being, the easiest fix is to downgrade to the old version of Gutenberg as we prepare a release with fixes for these two issues. To do that, go to https://wordpress.org/plugins/gutenberg/advanced/, scroll to the bottom under "Previous versions", pick 4.2.0 and download it.

Then go to your site admin, go to Plugins. Then deactivate the Gutenberg plugin, then delete the Gutenberg plugin.

Now under plugins, press "Add New", then "Upload Plugin", and point to the zip file you just downloaded. Finally activate Gutenberg 4.2, and you should be good to go. Once we release 4.4 or 4.3.1, you can upgrade again.

[GlennMartin1]

I've had to deal with this, too.

I'd love to see a 4.3.1 hotfix.

[idiotprogrammer]

Thanks for your reply. I know that programmer time is valuable. I could tell that a fix was in the works (especially if it's a regression bug). I think downgrading will fix my issue temporarily. Thanks.

It's a conceptual change with gutenberg. With the previous rich text editors, you could switch from WYSIWIG to HTML HTML view and fix any formatting issues. Now if you are enforcing validation for each block, there has to be a way to recognize the problem and fix it in a code view.

One thing that is unique about my page (by the way I'm on cloudflare) is that it's a long document with many different edits, cut and pastes and styling (though no images). For simple document edits, I suspect that these errors don't pop up as often. I suspect your test cases don't capture that degree of complex behavior/user idiocy. Thanks!

[jasmussen]

It's a conceptual change with gutenberg. With the previous rich text editors, you could switch from WYSIWIG to HTML HTML view and fix any formatting issues. Now if you are enforcing validation for each block, there has to be a way to recognize the problem and fix it in a code view.

You can still do that, although the option has moved:

The "Resolve" button will offer to do some of the work, though: