Patterns containing non-core blocks are losing styling in the Inserter with Gutenberg 13

[WhiteHeatherClub]

Patterns containing non-core blocks are losing styling moving from Gutenberg 12.9 to 13.0 in the Inserter - they are placed and display fine on the page Editor, it's the Inserter Previews that are affected.

This happens in either a classic theme (i.e. Twenty Twenty One) or FSE theme (Twenty Twenty Two)

Originally posted by @WhiteHeatherClub in #40305 (comment)

[carolinan]

Hi
Please include detailed information about the non-core blocks, such as the name of the block and plugin, so that we can try to reproduce the problem.

[WhiteHeatherClub]

Hi, I'm using Getwid blocks - in my case patterns are made with the Media & Text Slider, Section and Image Slider (but I'm guessing it would affect the others as well).

Also on this post #40305 another Dev is mentioning it is happening with AinoBlocks as well.

[ellenbauer]

I want to report the same issue, I loose all CSS styling of our AinoBlocks plugin (https://wordpress.org/plugins/aino-blocks/) blocks, as soon as I activate Gutenberg 13+, see screenshots below:

Gutenberg plugin 13.1.0 active with Aino Blocks and one of our premium themes, but you can use our Aino free theme (https://wordpress.org/themes/aino/) to replicate the issue as well:

As a comparison without the Gutenberg plugin active:

This is a major issue for us and I wonder how to solve it. Any kind of help or hint on what we can do to fix it would be greatly appreciated.

[ndiego]

I have been able to confirm.

Testing steps:

1. Ensure you are running 6.0 or Gutenberg 13+ is active
2. Install and activate the Aino theme
3. Install and activate Aino Blocks
4. Navigate to a new page and preview patterns in the Pattern Explorer, they will appear broken
5. Revert to 5.9.3 and disable Gutenberg
6. Preview the patterns again, and they will appear correctly

cc @Mamaduka @ntsekouras I am guessing this is related to the new patterns REST API "stuff", but could use your expertise.

cc @annezazu @priethor @gziolo @adamziel pinging you all for review, this is a significant breaking change that we need to get fixed before the 6.0 release.

[ndiego]

In investigating this more deeply, I do no believe this is related to the REST API patterns implementation. Block styles in the Aino Blocks plugin are enqueued in a single stylesheet with the enqueue_block_editor_assets hook. This was/is a very common implementation for adding custom styles in the Editor.

Something changed in 13.0+ and WordPress 6.0 where this is no longer working properly in Block Previews or the Site Editor. If you insert one of the Aino Patterns into a template in the Site Editor, they will also lack styles. See the screenshot below:

[Mamaduka]

#40469 might be related to this issue. Unfortunately, I couldn't track down the source of the problem.

[ndiego]

Thanks for pointing out #40469 @Mamaduka, I just tested that and confirmed that's also a major issue.

[getdave]

Testing this with the setup you provided (using RC 1 - no Gutenberg Plugin) I noticed that aino-blocks is enqueuing editor styles and they are being loaded. Continuing to investigate.