Should we migrate old reusable blocks that use deprecated syntax?

[jasmussen]

This issue came up yesterday as a friend had created reusable blocks of a couple of paragraphs that used old, now-deprecated syntax.

Because all reusable blocks are validated on Gutenberg initialization, this meant even adding a new post caused a JS error message in the console.

The fix was to insert the old reusable block, edit it, then save it. This process "healed" the syntax and made it up to snuff.

However that fix is not very discoverable, and it's not unlikely that a lot of users are experiencing block-validation related errors in their JS console, if they've been using reusable blocks for a long time. Can we improve this?

• Can we move or delay the validation of reusable blocks until the point where they are used?
• Can we automatically "edit and save" a reusable block if deprecated markup is detected?
• Can we provide a better error message, perhaps one that helps suggest how to fix it? Perhaps as a notice instead of a console error?

Already now we are showing console warnings in advance of deprecating features. However looking in the console is a very developery thing to do — should we consider showing these messages as notices instead?

[tofumatt]

I think this is a duplicate of #8015, but your write-up here is great, so I'll cross-post it there 😄

[tofumatt]

Wait, sorry, I misread this. Not a duplicate; my bad.

[designsimply]

I ran into this issue today while testing 3.9.0-rc.2. I noticed block validation errors in the console for Vimeo and pullquote blocks when opening the Gutenberg demo post:

1. Install 3.9.0-rc.1 or later.
2. Go to WP Admin > Gutenberg.
3. View the JavaScript console.

Result: block validation errors appear in the JavaScript console for the Vimeo embed block and the pullquote block:

index.js?ver=1537381442:2 Block validation: Block validation failed for `core-embed/vimeo` ({name: "core-embed/vimeo", title: "Vimeo", description: "Add a block that displays content pulled from other sites, like Twitter, Instagram or YouTube.", icon: {…}, category: "embed", …}).

Expected:

<figure class="wp-block-embed-vimeo alignwide wp-block-embed is-type-video is-provider-vimeo"><div class="wp-block-embed__wrapper">
https://vimeo.com/22439234
</div></figure>

Actual:

<figure class="wp-block-embed-vimeo wp-block-embed alignwide is-type-video is-provider-vimeo">https://vimeo.com/22439234</figure>

index.js?ver=1537381442:2 Block validation: Block validation failed for `core/pullquote` ({name: "core/pullquote", title: "Pullquote", description: "Highlight a quote from your post or page by displaying it as a graphic element.", icon: {…}, category: "formatting", …}).

Expected:

<figure class="wp-block-pullquote"><blockquote><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote></figure>

Actual:

<blockquote class="wp-block-pullquote"><p>Code is Poetry</p><cite>The WordPress community</cite></blockquote>

^{Seen at http://alittletestblog.com/wp-admin/post-new.php?gutenberg-demo running WordPress 4.9.8 and Gutenberg 3.9.0-rc.2 using Chrome 69.0.3497.92 on macOS 10.13.6.}

I saw that the markup has changed for the Vimeo block (9853) and the pullquote block (9599), so I was wondering if the validation error is expected or if the demo post should be updated in this (more specific) case?

[youknowriad]

Technically speaking we can't migrate the blocks as the migration is JS based and there's no parsing server-side yet. But let's consolidate the discussions about the deprecation/validation/migration flows here #7604