Support for new “expand on click” option for images added in WP 6.4?

I went ahead and implemented this on my own but wanted to share in case it is helpful! There might be a better way to do this but this was quick and relatively easy to implement on a custom theme.

/**
 * Overrides render callback for core image block.
 * 
 * @param array $args An array of block parameters
 * @param name  $name The name of the block including namespace
 * @return array
 */
function override_core_image_block_render_callback( $args, $name ) {
	if ( 'core/image' === $name ) {
		unset( $args['viewScript'] );
		unset( $args['view_script_handles'] );
		$args['render_callback'] = 'render_image_lightbox';
	}
	return $args;
}
add_filter( 'register_block_type_args', 'override_core_image_block_render_callback', 10, 2 );

/**
 * Wrap images in links to trigger the PhotoSwipe plugin.
 *
 * @param array  $attributes An array of block attributes
 * @param string $content The HTML content of the block
 * @param object $block The block object
 * @return bool|array
 */
function render_image_lightbox( $attributes, $content, $block ) {
	if ( false === stripos( $content, '<img' ) ) {
		return '';
	}

	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );

	/*
	 * If the lightbox is enabled and the image is not linked, wrap the image in a link to trigger the PhotoSwipe Lightbox plugin.
	 */
	if (
		isset( $lightbox_settings ) &&
		'none' === $link_destination &&
		isset( $lightbox_settings['enabled'] ) &&
		true === $lightbox_settings['enabled']
	) {
		$img_src  = wp_get_attachment_url( $attributes['id'] );
		$img_meta = wp_get_attachment_metadata( $attributes['id'] );

		if ( $img_src && $img_meta ) {
			$pattern     = '/<img.*?>/';
			$replacement = sprintf( '<a class="lightbox" href="%s" data-pswp-width="%d" data-pswp-height="%d">$0</a>', esc_url( $img_src ), esc_attr( $img_meta['width'] ), esc_attr( $img_meta['height'] ) );
			$content     = preg_replace( $pattern, $replacement, $content );
		}
	}

	return $content;
}

At the moment I am reluctant to do this, since linking to the media file is always an option and also works in WordPress 6.4. So instead of enabling “expand image” for an image or gallery, just tell WordPress to link to the media files.

Also my plugin does a lot more than just getting the attachment meta data, also see https://github.com/arnowelzel/lightbox-photoswipe/blob/5.1.6/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php#L285

But I’ll see what I can do. In any case, this would be an optional feature you have to enable in the general backend settings for Lightbox with PhotoSwipe.

I added a GitHub issue for this as well:

https://github.com/arnowelzel/lightbox-photoswipe/issues/104

Making it an option sounds like a good approach! I figure there may be some users who take the same path I did and look for a replacement to the built in lightbox functionality in 6.4. The UX for enabling it in the editor is very good IMO but the lack of zoom really kills it.

I ended up dropping your plugin and adding the PhotoSwipe JS to my theme manually so I could have more direct control over the options but I hope my code fragments can save you some time. It took me a bit to find the right hooks to use.

I’m unable to find the “link to the media files” option anymore, I cannot use the lightbox with Gutenberg single image.

You find this option in the context properties of the image block when you click it.

As an example for using a Gutenberg single image (along with other options) see here: Lightbox with PhotoSwipe – WordPress Demo (arnowelzel.de)