Gutenberg Mobile/Web Version Differences Resulting in Invalid Blocks

[mchowning]

When different versions of Gutenberg are used by the mobile app and the web, and a block is edited on both platforms, it is possible for an invalid block to result.

Gutenberg-Mobile Can Get Ahead of Web Gutenberg

Gutenberg-mobile generally uses the latest code from Gutenberg's master branch, so it is likely that the mobile app will frequently have more recent Gutenberg code than the web (it could even be Gutenberg code that has not been released on the web side). As a result, a block format could have been updated on the mobile app version of Gutenberg, but not on the (older) web version. Such updated blocks that are created on mobile, and then edited on web, will likely break because the web doesn't know about the new block format.

I have observed the issue with paragraph and quote blocks, but it will be a recurring issue until we find a way to deal with the fact that it is currently possible for mobile to use a newer version of Gutenberg than the site is using. When that happens, the mobile app may create/update the post in ways that the older version of Gutenberg on the web side does not know how to handle. It feels like there are probably other ways this could get us into trouble that I'm not thinking of right now.

Test scenario

The handling of alignment was recently changed from using html style to using class. Because WP.com was using an older version of Gutenberg that still relied on style for paragraph alignment, and mobile was using the latest class-based implementation for paragraph alignment, it was possible to create an invalid block by editing the block on both web and mobile in the production WordPress app. (On 9/26/29, WP.com was updated from Gutenberg 6.2—uses style for paragraph alignment—to Gutenberg 6.5—uses class for paragraph alignment—so this paragraph issue can no longer be reproduced on WP.com sites.)

1. Create a paragraph block on web with center alignment
2. Observe html similar to this:

<!-- wp:paragraph {"align":"center"} -->
<p style="text-align:center">center aligned paragraph on web</p>
<!-- /wp:paragraph -->

2. Open the post on mobile, edit the text in the paragraph block
3. Observe html on mobile now looks like this:

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">center aligned paragraph on web, edited on mobile</p>
<!-- /wp:paragraph -->

4. Save the post on mobile
5. Open the post on web
6. Observe the paragraph block renders fine, but has html like this:

<!-- wp:paragraph {"align":"center"} -->
<p style="text-align:center"><p class="has-text-align-center">center aligned paragraph on web, edited on mobile</p></p>
<!-- /wp:paragraph -->

7. Edit the text in the text in the paragraph block, and save the post
8. Reload the post on the web
9. Observe that the paragraph block now reports unexpected or invalid content on web.
10. Open the post on mobile
11. Observe that the paragraph block now reports unexpected or invalid content on mobile.

*Note that if we had the ability to add alignment to paragraph blocks on mobile, it would have been possible to create an invalid block by simply creating a paragraph block with alignment on mobile and then editing it on the web. (I know this because I discovered the issue while implementing alignment controls for paragraph blocks on mobile)

Web Gutenberg Can Also Get Ahead of Gutenberg-Mobile

We should also keep in mind that it is inevitable that at least some mobile users will fail to upgrade their WordPress app. This makes it possible for the version of Gutenberg on the web to get ahead of the version used in their app and could result in blocks being turned into invalid blocks when created on web and loaded on mobile.

[hypest]

For the case where the app's version is ahead of the backend's, one idea we recently dropped on the table is to have some subtle but persistent notice to the user while editing. It could be per block (say, when a block requires a newer version of WP or Gutenberg on the backend) or the whole post.

We'll probably need to be able to have the backend version number handy and also add a definition per block on what's the minimum version needed.

cc @iamthomasbishop since I think you had some design ideas in mind.