Image Block: Get lightbox trigger button ref via data-wp-init - #57089

Fixes #56541

What?

This PR uses the wp-init directive to get the ref of the image block's lightbox trigger button. As a result, as reported in #56541, the trigger button's ref can now be correctly retrieved even if the img element is wrapped with an element from somewhere else.

Why?

The trigger button ref is used to solve focus issues in Firefox, as described in this comment. The current implementation attempts to locate this ref using querySelector via the wp-init directive callback of the img element.

This query operates on the assumption that the img element and the trigger button exist in parallel, so if the img element is wrapped with some element by the render_block_core/image hook, for example, the trigger button cannot be found.

<figure class="wp-block-image">
	<picture>
		<img class="wp-image-1" data-wp-init="callbacks.initOriginImage">
	</picture>
	<button class="lightbox-trigger"><svg><path></path></svg></button>
</figure>

How?

In order to be able to obtain the trigger button ref more stably, I added wp-init directive to the trigger button itself, without relying on a query, and obtained the ref in its callback function. As a result, no matter what level the button is placed in, it should be possible to obtain the ref.

However, I'm not sure if using the wp-init directive just to get the ref is a recommended implementation, so I would appreciate any advice on this point.

Testing Instructions

Add the following hook to the gutenberg.php file to temporarily wrap the image block's img element with a picture element.

function render_block_image_with_picture( $block_content ) {
	preg_match( '/<img.*?\/>/', $block_content, $matches );

	if ( ! isset( $matches[0] ) ) {
		return $block_content;
	}

	$image_tag     = $matches[0];
	$new_image_tag = sprintf(
		'<picture>%s</picture>',
		$image_tag
	);

	$block_content = str_replace( $image_tag, $new_image_tag, $block_content );

	return $block_content;
}
add_filter( 'render_block_core/image', 'render_block_image_with_picture', 20 );

• Please use Firefox browser.
• Insert an image block in the Post Editor.
• Enable the "Expand on Click" option.
• Check this post on the front end.
• Use the Tab key to focus on the trigger button at the top right of the image block.
• Press the Enter key to open Lightbox.
• Press the Escape key to close the Lightbox.
• There should be no errors printed to the browser console and the trigger button should have focus.

Screenshots or screencast