A New Lightbox for the WordPress Block Editor

The WordPress community has been working hard on version 6.4, which is now available.

Over the last few WordPress releases, we’ve seen some great new media features, including duotone filters, aspect ratios, and the Openverse integration. We’re likely to see more media improvements in Gutenberg Phase 3.

WordPress 6.4 gives us a new lightbox feature that can be used with images and photo galleries. We plan to add an integration for MetaSlider slideshows too.

The WordPress team shared this short video of how the feature works. This video is inside the new “Site Editor”. Look for the “Expand on click” option in the right sidebar.

You can add lightboxes inside WordPress posts. Inside each image or gallery block, you’ll be able to find the “Expand on click” option. When visitors see this image in your post, it will probably appear smaller than the full-size version of the image. Thanks to the lightbox feature, they’ll be able to click and see a much larger, expanded version of the image.

Lightbox feature in the WordPress block editor

You can expand on this lightbox feature using the MetaSlider Lightbox. This plugin has a setting called “Override WordPress “Enlarge on Click” setting” and it allows to use a more advanced lightbox for your images and videos.

MetaSlider Lightbox settings

The MetaSlider Lightbox option is highly customizable and is recommended if you need to upgrade from the basic lightbox.

MetaSlider Lightbox example

You can also use this plugin to enhance your MetaSlider slideshows with a lightbox. Visitors can view your slideshow and then click on an image and see a larger, higher-resolution version of the image. Often the background is darkened so that the viewer’s eyes can focus on the image alone. This feature currently works for Image Slides only.

  • Once you have created a slideshow in MetaSlider, look in the right sidebar. You are looking for the “Advanced Settings” area.
  • Scroll down and check the “Open in lightbox?” setting.
MetaSlider slideshow Open in lightbox

Now go and visit your slideshow on the front of your site. This image below shows a normal slideshow.

MetaSlider slideshow

Click on any of the images in your slideshow, and you’ll see a full pop-up window. You can navigate through the images.

MetaSlider Lightbox example

Leave a Reply

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