Adding Caption & Lightbox to the Featured Image Block

A Bison standing among grasses looking toward the camera.
This photo of a Bison is one of my favorite images. I use it a lot in testing. Source: Wikipedia.

Earlier this year I re-built this site using the Twenty Twenty-Five theme, finally adopting a block theme over the veritable Twenty Twenty classic theme I had been using. In this rebuild, one thing that I had trouble with is the featured image. In the Twenty Twenty theme, a caption is rendered under the featured image if one is set on the underlying attachment post in the Media Library. In the Twenty Twenty-Five theme, however, no caption is shown by the Featured Image block:

I was expecting the Featured Image block to have an “Add caption”/“Remove caption” button in the block toolbar. This is available in the regular Image block, but it is absent in the Featured Image block:

It turns out there is a 3-year old Gutenberg issue (#40946) about this missing capability in the Featured Image block. But this isn’t the only missing feature from the block. In addition to the caption, something else I was missing is the ability to open the featured image in a lightbox, something which the Image block exposes by selecting the link option to “Enlarge on click”. The Featured Image block does not have this Link button in the block toolbar but instead just has a “Link to Post” setting toggle in the block sidebar:

There is also an open Gutenberg issue to add this lightbox capability to the Featured Image block (#57849).

Because I want these features now before they get implemented in Gutenberg, I’ve put together a couple plugins (on GitHub) that extend the Featured Image block with these missing capabilities:

These are active on this site, so you can see above how the featured image is enhanced with a caption and lightbox.

While the Gutenberg issue for adding a caption has a workaround involving the registration of a new block variation, I wanted there to be the same “Add caption” block toolbar button which is available on the Image block, and I wanted to be able to see a placeholder for how the caption would look in the Site Editor. So this is what I implemented:

Selecting “Add caption” sets a new showCaption block attribute to true, without making any changes to the block markup. This means there won’t be any block validation errors when the plugin is deactivated. When the block attribute is present, a render_block filter in PHP injects the caption into the block’s markup on the frontend. On my site, I edited the Single template to show the caption in the Featured Image block, but I left the caption off for the block on the Home template in order to keep the blog index clean. Editing the text of a Featured Image block’s caption is not done inline in the block editor as is done with the Image block; instead, editing the featured image caption requires either selecting the image in the Media Library in the post editor, opening the image in the Media Library screen, or opening it in the seldom-accessed Edit Media screen.

The plugin to implement a lightbox for the Featured Image block is much simpler, and there is no UI. There’s simply another render_block filter which checks to see if the “Link to Post” setting is enabled, and if not, then it enables the “enlarge on click” functionality. Normally the “Link to Post” setting is not enabled on the Single template, allowing the featured image to open in a lightbox the same as any other Image block which have lightbox enabled. The implementation was trivial because all it needed to do is enqueue the same script module and stylesheet as the Image block does, and then it passes the block content into the same function used by the Image block. In the end, the Featured Image block’s markup looks very similar to the Image block’s markup:

--- image-block.html
+++ featured-image-block.html
@@ -1,11 +1,12 @@
 <figure
 	data-wp-context='{"imageId":"68293cf73baf0"}'
 	data-wp-interactive="core/image"
-	class="wp-block-image size-full wp-lightbox-container"
+	style="aspect-ratio: auto"
+	class="wp-block-post-featured-image wp-lightbox-container"
 >
 	<img
 		alt=""
-		class="wp-image-8"
+		class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
 		data-wp-class--hide="state.isContentHidden"
 		data-wp-class--show="state.isContentVisible"
 		data-wp-init="callbacks.setButtonStyles"
@@ -25,6 +26,7 @@
 			http://localhost:10013/wp-content/uploads/2025/05/American_bison_k5680-1-1536x1002.jpg 1536w,
 			http://localhost:10013/wp-content/uploads/2025/05/American_bison_k5680-1-2048x1336.jpg 2048w
 		"
+		style="width: 100%; height: 100%; object-fit: cover"
 		width="2560"
 	/><button
 		class="lightbox-trigger"Code language: Diff (diff)

Ultimately, I think the Featured Image block could be deprecated in favor of adding a “Use featured image” source to the Image block. This would allow all of its features to be re-used in a featured image context. I suppose “Link to Post” would have to be added as one of the Link options when the featured image is used as the source.

I hope this is helpful for you with building sites with block themes while waiting for these features to land in the core Featured Image block!


Where I’ve shared this:

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *