Resolve Block dialog of invalid block warning shows wrong markup

[atachibana]

Notice. This defect was modified after the discussion with talldan.

Describe the bug Resolve Block dialog of invalid block warning shows two markups and rendered images. Left hand side blue box 'Modified!' is wrong.

Original wrong defect report Resolve Block dialog of invalid block warning shows two markups, but both are the same. Left side markup should be newly generated markup as bottom rendered image displays 'Modified!' in paragraph tag.

To reproduce

1. $ npm init @wordpress/block --namespace atachibana invalid-block
2. $ cd invaid-block
3. compile
4. In the block editor, Insert the block into a post and save
5. Edit save of save.js as

   <p>
   {__(
       'Modified!',
       'atachibana'
   )}
   </p>

6. compile
7. Open the saved post from block editor. You will see invalid block warning.
8. Click Resolve. Left bottom shows 'Modified!' on the blue background.

Expected behavior Left bottom should show Invalid Block - hello from the save content!.

Original wrong expected behavior Left side markup should be <p class="wp-block-atachibana-invalid-block">Modified!</p>

Screenshots If applicable, add screenshots to help explain your problem.

Editor version (please complete the following information):

• WordPress version: 5.4.2
• Gutenberg pluguin 8.3.0 Desktop (please complete the following information):
  • OS: macOS 10.14.6
  • Browser: Chrome
  • Version 83.0.4103.97

[talldan]

@atachibana Thanks for reporting this. I think there is a bug here, but it's different to the Expected behavior in your description. The left side is supposed to show the effect of converting the current post content to HTML, so I don't think the 'Modified!' text should be shown in the markup there, it should display whatever was saved by the first version of the block.

The bug seems to be that the preview shows 'Modified!', but it should show 'Invalid Block - hello from saved content'.

The right side markup seems ok, what's happening there is that the content is being converted from your block to a paragraph as that's the closest matching markup, so the text content is retained. Related to this, recently 'Attempt Block Recovery' became the default option for fixing invalid blocks - https://github.com/WordPress/gutenberg/pull/24263.

[atachibana]

@talldan This dialog's label "Current" and "After Conversion" are very confusing, but I think

• Left side: Content generated by (new) save function
• Right side: Content retrieved from post body

from Validation definition. In fact, Developer Tools shows following error messages in Console tab:

Block validation: Block validation failed for `atachibana/invalid-block` (Object).

Content generated by `save` function:

<p class="wp-block-atachibana-invalid-block">Modified!</p>

Content retrieved from post body:

<p class="wp-block-atachibana-invalid-block">Invalid Block - hello from the save content!</p>

So, I believe Left side markup is wrong. Also, we should change two labels, too.

[talldan]

@atachibana As mentioned in the docs you linked to:

Left side:

Convert to HTML: Protects the original markup from the saved post content and convert the block from its original type to the HTML block type, enabling the user to modify the HTML markup directly.

Here 'saved' doesn't refer to 'Content generated by save function', it refers to the post content saved in the database. From the console log that would be this part:

Content retrieved from post body:

<p class="wp-block-atachibana-invalid-block">Invalid Block - hello from the save content!</p>

Right side:

Convert to Blocks: Protects the original markup from the saved post content and convert the block from its original type to the validated block type.

This option actually tries to find a matching 'raw' transform for a block using the post content, which is why your block ended up being converted to a paragraph. Perhaps the docs need a refresh, this is the relevant code: https://github.com/WordPress/gutenberg/blob/dda3a9c4168c9868a37e26d0d8e376005dc7e9b6/packages/block-editor/src/components/block-list/block-invalid-warning.js#L97-L100

[atachibana]

@talldan

Thank you so much, I was definitely wrong. Misunderstood the messages and the meaning of dialog box.

I'll modify this defect to fix the left hand blue box and add below sentence to the document:

actually tries to find a matching 'raw' transform for a block using the post content' to the document