What?

Add Block Bindings support for the Cover block's id and url attributes. See #74109 (comment) for context.

Why?

The Cover block is one of the more prominent blocks; adding support for Block Bindings will also unlock Pattern Overrides support for it.

Additionally, the Cover block presents a few problems which, when solved, can also inform the changes needed for other blocks to add support for Block Bindings.

How?

On the client side, the architecture of the Cover block's Edit component is such that it updates a number of its computed attributes (dimRatio etc.) in response to event handlers on specific block controls, e.g. when manually setting a new background image. This doesn't work for Block Bindings, where the attribute is connected to a Block Bindings source through a mechanism that's outside of the block's control.

Instead, this PR adds logic to update those attributes via the block Edit component's useEffect() -- which was previously only used to react to an updated featured image (as that is typically also updated "outside" of the block itself). More background and discussion on this are available here and here.

On the server side, we add some processing of block attributes within the block markup (via the HTML API), similar to what we already had in place for sourced attributes. The difference here is that the Cover block's id and url attributes aren't actually sourced attributes, but require similar treatment. To this end, the block_bindings_attribute_replaced_in_markup filter is introduced.

Testing Instructions

Use this with #75625 (which adds a featured_media.id and a featured_media.url field to the core/post-data source).

• Create a new post and set a featured image for it.
• Insert a Cover block, and connect its id and url attributes to the core/post-data source's featured_image.id and featured_image.url fields.
• Verify that it works both in the editor, and on the frontend.
• Try updating the post's featured image and verify that the Cover block updates accordingly.
• Insert a new Cover block and set its background image manually to a different image. Then, connect it to the core/post-data source's featured_image.* fields. Verify that it correctly updates the image it shows.

TODO

• Binding a newly inserted Cover block (that doesn't have its image set manually) adds an overlay that uses the dimRatio attribute default value of 100 (=fully opaque). This results in an opaque black overlay that hides the entire image.
  • The default is likely set to that value to show the Cover block as black while loading a newly set image.
• Figure out what to do if only url is bound (but id isn't), meaning that the bound image could possibly be external (which isn't currently supported by the Cover block).
  • This isn't really a blocker; it's more of a question of how to flag to the user that if the url attribute is bound, the id attribute also requires binding to the same source (unless we can find a way where that's not needed).
• Support parallax case (where the image URL is used as a background-image inside a style attribute, rather than an <img src="..."> attribute=. AFAIK, the HTML API cannot yet safely modify style attributes (as that's CSS).
  • There's a solution in WordPress/php-toolkit, but we'd need to copy quite a bit of code over in order to get that to work.

Follow-up

• Block Bindings: Expose featuredMedia information from core/post-data source #75625. This will allow connecting a Cover block's attribute to the current post's featured image in a Block Bindings-native way (and will permit us to remove the custom code from the Cover block that's currently covering this use case).
• Figure out composite types. Should core/post-data return a composite featured_media field (which is itself an object with id and url keys)? Is there precedent for a media type in the Fields API?
• Reflect bound attribute in new DataForm control in block inspector (display bound image, use purple border to highlight?) ➡️ Block Fields: Try integrating Block Bindings #75137
• Use React 19's useEffectEvent once it becomes available (see Block Bindings: Add support for Cover block id and url attrs #74610 (comment)).