Description

While reviewing #53169 an issue with the Cover block was encountered, where sometimes it will repeatedly flicker when displayed within the site editor's view of an individual page, when the Cover block is contained within a synced pattern that forms part of the template.

The flickering appears to be to do with logic in useCoverIsDark within the Cover block. Specifically, the async state update in:

Kudos @aaronrobertshaw for finding the bug and the lines of code relevant for it!

Step-by-step reproduction instructions

1. Create a synced pattern that contains a Cover block with a background image set
2. In a theme like TT3, add a new template (e.g. my-template.html in the templates directory).
3. Within my-template.html, add the synced block pattern. To get the markup to add to the template, you can add the synced pattern to a post or page, then view the code editor view and copy + paste to your my-template.html file
4. Create a page and set its template to my-template.html.
5. Open the site editor, and navigate to Pages > your newly created page. Click the preview of the page to switch to the edit mode, and notice that the Cover block flickers.

Example markup from my my-template.html file:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:pattern {"slug":"core/query-standard-posts"} /-->

<!-- wp:post-content /-->

<!-- wp:post-featured-image /-->

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

<!-- wp:block {"ref":65} /-->

Screenshots, screen recording, code snippet

Environment info

• GB trunk

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes