Adding class in editor to block created with @wordpress/block results in invalid block on editor reload

[houblon]

Steps to reproduce:

• npm init @wordpress/block test-block
• enable block plugin
• add block to post
• add class to block via the "Additional CSS class(es)" in the block inspector
• save post
• reload editor

Console error with example class "is-style-test":

Content generated by `save` function:

<p class="wp-block-create-block-test-block">Test Block – hello from the saved content!</p>

Content retrieved from post body:

<p class="wp-block-create-block-test-block is-style-test">Test Block – hello from the saved content!</p>

This error also occurs if classes are added via styles registered either in the block plugin or a theme.

[gziolo]

It looks like it's a general issue with the order of loading core scripts. @wordpress/block-editor register all hooks that operate on the block registration so the custom block registration should trigger after they are in place. It isn't the case for the sample block scaffolded with @wordpress/create-block because it depends only on 'wp-blocks', 'wp-element', 'wp-i18n' and 'wp-polyfill'. I believe that the only way to fix it for good is to defer running all those registration-related hooks until the editor is about to get initialized. /cc @youknowriad @aduth

[kebbet]

Could #21887 be a derived from this bug too?

[gziolo]

Could #21887 be a derived from this bug too?

Nope, it's a different issue. Core blocks aren't affected by the issue I described.

[houblon]

@gziolo, thanks for the insight. With 'wp-editor' added as a dependency, the block loads without error.

Is there a reason 'wp-editor' isn't a dependency by default? I can imagine there being cases to exclude it, but am not familiar enough with the Block API to know.

[skorasaurus]

@gziolo was there PR for this since it had the in progress label?

[gziolo]

I tried with the latest version of @wordpress/create-block and I can't reproduce the issue anymore.

I get the following HTML saved:

<!-- wp:create-block/test-block {"className":"is-style-test"} -->
<p class="wp-block-create-block-test-block is-style-test">Test Block – hello from the saved content!</p>
<!-- /wp:create-block/test-block -->

It validates every time I refresh.