wpseek.com
A WordPress-centric search engine for devs and theme authors

function block_core_image_render_lightbox( $block_content, $block ) {
	/*
	 * If there's no IMG tag in the block then return the given block content
	 * as-is. There's nothing that this code can knowingly modify to add the
	 * lightbox behavior.
	 */
	$p = new WP_HTML_Tag_Processor( $block_content );
	if ( $p->next_tag( 'figure' ) ) {
		$p->set_bookmark( 'figure' );
	}
	if ( ! $p->next_tag( 'img' ) ) {
		return $block_content;
	}

	$alt              = $p->get_attribute( 'alt' );
	$img_uploaded_src = $p->get_attribute( 'src' );
	$img_class_names  = $p->get_attribute( 'class' );
	$img_styles       = $p->get_attribute( 'style' );
	$img_width        = 'none';
	$img_height       = 'none';
	$aria_label       = __( 'Enlarge image' );

	if ( $alt ) {
		/* translators: %s: Image alt text. */
		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt );
	}

	if ( isset( $block['attrs']['id'] ) ) {
		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
		$img_width        = $img_metadata['width'] ?? 'none';
		$img_height       = $img_metadata['height'] ?? 'none';
	}

	// Figure.
	$p->seek( 'figure' );
	$figure_class_names = $p->get_attribute( 'class' );
	$figure_styles      = $p->get_attribute( 'style' );

	// Create unique id and set the image metadata in the state.
	$unique_image_id = uniqid();

	wp_interactivity_state(
		'core/image',
		array(
			'metadata' => array(
				$unique_image_id => array(
					'uploadedSrc'      => $img_uploaded_src,
					'figureClassNames' => $figure_class_names,
					'figureStyles'     => $figure_styles,
					'imgClassNames'    => $img_class_names,
					'imgStyles'        => $img_styles,
					'targetWidth'      => $img_width,
					'targetHeight'     => $img_height,
					'scaleAttr'        => $block['attrs']['scale'] ?? false,
					'ariaLabel'        => $aria_label,
					'alt'              => $alt,
				),
			),
		)
	);

	$p->add_class( 'wp-lightbox-container' );
	$p->set_attribute( 'data-wp-interactive', 'core/image' );
	$p->set_attribute(
		'data-wp-context',
		wp_json_encode(
			array(
				'imageId' => $unique_image_id,
			),
			JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP
		)
	);

	// Image.
	$p->next_tag( 'img' );
	$p->set_attribute( 'data-wp-init', 'callbacks.setButtonStyles' );
	$p->set_attribute( 'data-wp-on-async--load', 'callbacks.setButtonStyles' );
	$p->set_attribute( 'data-wp-on-async-window--resize', 'callbacks.setButtonStyles' );
	// Sets an event callback on the `img` because the `figure` element can also
	// contain a caption, and we don't want to trigger the lightbox when the
	// caption is clicked.
	$p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' );
	$p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' );
	$p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' );

	$body_content = $p->get_updated_html();

	// Adds a button alongside image in the body content.
	$img = null;
	preg_match( '/<img[^>]+>/', $body_content, $img );

	$button =
		$img[0]
		. '<button
			class="lightbox-trigger"
			type="button"
			aria-haspopup="dialog"
			aria-label="' . esc_attr( $aria_label ) . '"
			data-wp-init="callbacks.initTriggerButton"
			data-wp-on-async--click="actions.showLightbox"
			data-wp-style--right="state.imageButtonRight"
			data-wp-style--top="state.imageButtonTop"
		>
			<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
				<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z" />
			</svg>
		</button>';

	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );

	add_action( 'wp_footer', 'block_core_image_print_lightbox_overlay' );

	return $body_content;
}