Gutenberg: Investigate improvements when Block Is Invalidated

[gwwar]

Please take a few days to investigate what next steps make sense. We can create new issues/refine the summary here to reflect what we find.

Suggested courses of action:

• Promote Attempt Block Recovery as primary CTA or auto-run the Attempt Block Recovery (handled by Gutenberg: Change primary action to Attempt Block Recovery #38329 )
• Investigate if server transforms can fix issues earlier on
• See if core contributions are possible to make block validation both more relaxed and bulletproof (additive attributes/whitespace differences for example should be okay)

Context

When a block parses HTML markup, it also tries to validate the data by re-serializing and comparing the result. Unfortunately blocks currently compare with an extremely strict mode. Even a small class addition for change for completely equivalent markup/styling, is enough to cause the following scary error:

Clicking on the primary action usually isn't what the user wants. It converts the previously nice to understand block into a plain HTML block:

The best action is usually "Attempt Block Recovery" or "Convert to Blocks"

Traditionally WP allows manipulation of content from a variety of filters/customizations, so this is a very easy case to fall into.

[gwwar]

Nice Matias also pointed out a related issue in WordPress/gutenberg#7604

I think we can potentially add try PRs in parallel with our wpcom work and chat with the community on better CTAs, smarter validation and better overall user experience.

[mmtr]

See if core contributions are possible to make block validation both more relaxed and bulletproof (additive attributes/whitespace differences for example should be okay)

After reading all comments in WordPress/gutenberg#7604, I think the community could benefit from having 2 validation modes:

• Strict: the current one that marks a block as invalid if it is not an exact match.
• Moderate: allows extra attributes, as long as the ones provided by the save function are not altered (i.e. additional classes, data-* attributes, etc). It could still warns the differences in the browser console, and shows a tiny icon as a UI indicator that displays those differences when hovering it.

The strict mode will be the default one, allowing developers to switch to the moderate mode with a new Gutenberg setting in WP Admin.

For technical reference, the current strict mode is implemented in the isEquivalentHTML function.

[gwwar]

Actually will close this one out since we have a few PRs up