Wp-calypso: Atomic: Transferring to Atomic breaks blocks

[apeatling]

Edit by @gwwar: Please audit which blocks commonly throw block validation errors on transfer, create new issues for each, and close out this issue.

Building your site on simple, then transferring to Atomic results in broken blocks.

To reproduce:

• Create a new simple site
• Add a new page and select the Team template
• Update the first preson's photo, and edit the text in each paragraph block to the right.
• Delete one of the paragraph blocks.
• Publish the page
• Upgrade to business and install Yoast SEO
• Go back and edit the team page. Blocks will be broken.

Before transfer:

After transfer:

[apeatling]

Selecting either [Resolve] or [Convert to HTML] often does not work. The only sure fire way to recover from this is to select the three dots and "Attempt Block Recovery". This is a massive dead end for most users.

[apeatling]

The example above breaks the paragraph blocks, but on a real site I was working on the transfer resulted in more than half of the blocks on the page to be broken.

[apeatling]

@gwwar Assigning you so in the milestone this issues exists in its clear this is owned and will be triaged by Serenity. Feel free to reassign when you're done. Same for the other two issues. https://github.com/Automattic/wp-calypso/issues/37051, https://github.com/Automattic/wp-calypso/issues/37053

[gwwar]

Note that only one milestone can be assigned at a time, if you'd like to still sort in Building my Business, we'll need another subproject instead.

[gwwar]

@Automattic/serenity when taking this please timebox the investigation and break this out out into more specific issues. The way this is phrased we won't ever be able to close this ;)

I'll fine another issue for the Attempt Block Recovery customization or core contribution shortly.

[apeatling]

Fine to remove from the milestone and change that up. 👍

[gwwar]

Added https://github.com/Automattic/wp-calypso/issues/37230 to track better block validation recovery actions

[mmtr]

The particular issue with the team layout is that the block editor on Atomic sites is expecting an extra text align style on paragraph blocks:

Block validation: Expected attribute `style` of value `font-size:16px;text-align:left`, saw `font-size:16px;`.

Block validation: Block validation failed for `core/paragraph` ({name: "core/paragraph", icon: {…}, keywords: Array(1), category: "common", title: "Paragraph", …}).

Content generated by `save` function:

<p style="font-size:16px;text-align:left" class="has-text-align-left has-custom-size"><em>Position or Job Title</em></p>

Content retrieved from post body:

<p style="font-size:16px;" class="has-text-align-left"><em>Position or Job Title</em></p>

I didn't find any other block that breaks on transfer so far. I'll investigate where that text-align:left is getting from.

[mmtr]

Actually, the text-align style is coming from a second validation error. The first one that is triggered is caused by the presence of a has-custom-size class:

Content generated by `save` function:

<p style="font-size:16px" class="has-text-align-left has-custom-size"><em>CEO</em></p>

Content retrieved from post body:

<p style="font-size:16px;" class="has-text-align-left"><em>CEO</em></p>

[mmtr]

Verified the validation error is coming from CoBlocks. Deactivating it makes the error messages to go away. I also reproduced the same error on a self-hosted install so I reporte it there: https://github.com/godaddy-wordpress/coblocks/issues/1220

[jrtashjian]

We have a fix that will be released later today in CoBlocks 1.19.1

[mmtr]

CoBlocks 1.19.1 is out and this issue is no longer reproducible 🎉

Closing this, since I also created a page for every single page template and one post with all the blocks available and verified that none of them breaks when transferring a simple site to atomic.