Block Patterns causing "updates" displayed in browser console for blank new Post (blocks are not used within editor content)

[getdave]

Description

With the latest trunk build, start a new Post and you will see a lot of output in the console relating to various blocks having successfully "updated" their content. This appear to be due to a change in the DOM used in the block which doesn't match what's "saved" in the post content.

However...

In this case these warnings shouldn't be showing because we haven't yet inserted any blocks. So why is the editor informing us that blocks have been updated?

I believe these console messages are coming from the block previews in the inserter. Needs further investigation - not confirmed, but at first glance the blocks seem to match up.

Example of warning message

Block successfully updated for `core/media-text` (Object).

New content generated by `save` function:

<div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border"><figure class="wp-block-media-text__media"><img src="http://localhost:8889/wp-content/themes/tt1-blocks/assets/images/playing-in-the-sand.jpg" alt="“Playing in the Sand” by Berthe Morisot" class="wp-image-1752 size-full"/></figure><div class="wp-block-media-text__content"></div></div>

Content retrieved from post body:

<div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border"><figure class="wp-block-media-text__media"><img src="http://localhost:8889/wp-content/themes/tt1-blocks/assets/images/playing-in-the-sand.jpg" alt="&#8220;Playing in the Sand&#8221; by Berthe Morisot" class="wp-image-1752"/></figure><div class="wp-block-media-text__content"></div></div>

- <div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border"><figure class="wp-block-media-text__media"><img src="http://localhost:8889/wp-content/themes/tt1-blocks/assets/images/playing-in-the-sand.jpg" alt="“Playing in the Sand” by Berthe Morisot" class="wp-image-1752 size-full"/></figure><div class="wp-block-media-text__content"></div></div>
+ <div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border"><figure class="wp-block-media-text__media"><img src="http://localhost:8889/wp-content/themes/tt1-blocks/assets/images/playing-in-the-sand.jpg" alt="&#8220;Playing in the Sand&#8221; by Berthe Morisot" class="wp-image-1752"/></figure><div class="wp-block-media-text__content"></div></div>

Possibly related to entity handling? “P

Step-by-step reproduction instructions

1. Build latest trunk.
2. Start New Post.
3. Open dev tools Console.
4. See loads of messages about blocks being "updated".

Expected behaviour

Actual behaviour

Screenshots or screen recording (optional)

Code snippet (optional)

WordPress information

• WordPress version:
• Gutenberg version:
• Are all plugins except Gutenberg deactivated?
• Are you using a default theme (e.g. Twenty Twenty-One)?

Device information

• Device:
• Operating system:
• Browser:

[ntsekouras]

This happens because we have extended patterns functionality which needs to parse the patterns. In order to do it in a more performant manner, they are parsed during browser idle time and that's why the messages are shown on load of a post, even if there are no blocks in the content.

Most of these issues should be solved in this: #28921, where the patterns are revisited.

Reference: #29444

[kjellr]

I don't think that's related to #28921, since the patterns there look like they're coming from TT1 Blocks. We should likely get those fixed over there.

[getdave]

Closing this as I assume it's been fixed @kjellr?

[kjellr]

It has not been, but I'll check in on this later today. If it's still happening I'll open an issue for TT1 Blocks.

[kjellr]

I looked into this again, and it does still happen in Twenty Twenty-One and TT1 Blocks. But it also happens with a couple of the freshly added patterns from #2997 (the "Two Buttons" pattern for example).

While we can update all these, this issue is likely to come up repeatedly for themes and plugins that bundle patterns. If the markup has changed at all, we'll see these messages.

Is the core of the issue here performance? Re-opening for a moment so we can continue discussing whether or not Gutenberg can handle this more elegantly — these messages are a bit confusing since the patterns haven't been inserted yet at all. I'd love to get some pattern plugin/theme authors feedback here as well.

[getdave]

I wonder if this happens with a production build of the Plugin. Lets check by using latest release from Plugin repo.

If it is then we could look into tailoring the verbosity of the console logging for the preview component via props. That way we could silence the errors when rendering previews.

[carolinan]

I can confirm that this happens with the production build of the plugin.

[Mamaduka]

I will close this since deprecation/update logs are now grouped and produce less noise in the console - #34163.