Cover Block: flickering in site editor page view when used within a synced pattern

[andrewserong]

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:

gutenberg/packages/block-library/src/cover/edit/use-cover-is-dark.js

Lines 43 to 53 in ba31d2d

	retrieveFastAverageColor()
	.getColorAsync( url, {
	// Previously the default color was white, but that changed
	// in v6.0.0 so it has to be manually set now.
	defaultColor: [ 255, 255, 255, 255 ],
	// Errors that come up don't reject the promise, so error
	// logging has to be silenced with this option.
	silent: process.env.NODE_ENV === 'production',
	crossOrigin: imgCrossOrigin,
	} )
	.then( ( color ) => setIsDark( color.isDark ) );

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

2023-08-01.11.44.52.mp4

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

[aaronrobertshaw]

cc @ajlende given your insight in this area due to past updates 🙇

[carolinan]

Did you mean this issue? #52313 or 53169 ?

[ajlende]

Sorry, I don't have the time to look too deeply into this right now. But, from the video, could the setAttribute in the offending code be sending the component into an update loop somehow?

I wonder if it would be possible to remove the isDark attribute and compute its value on save instead?

[aaronrobertshaw]

Did you mean this issue? #52313 or 53169 ?

#52313 might be related (different replication steps though). #53169 though is definitely unrelated.

[ajlende]

Sorry it took me a while to get around to testing this. It seems in order to replicate the issue, the image you use must be less than 50% lightness as computed by FAC. On my computer I don't see the flickering, but I added logging to the FAC callback and see it triggering repeatedly.

I see there are already a couple fixes, but it seems my old unmerged PR #45076 that improves the heuristic also seems to fix it.

It looks like the main problem was that there were multiple useEffects that called setState for isDark putting the component into the update loop.