Add lightbox for plugin screenshots

[threadi]

Screenshots of plugins on their plugin pages are a brilliant way to visually show users exactly what a plugin does (examle: ​https://wordpress.org/plugins/woocommerce/). Currently, the screenshots are displayed as a slider on the plugin page. However, if you click on one of the images, it opens instead of the opened plugin page. You then have to go back to view the plugin page again.

I would like to see a lightbox added for the images. WordPress already provides this as an option in the image block, but the actual plugin directory theme (​https://github.com/WordPress/wordpress.org/tree/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024) doesn't use this block for screenshots – but the event would be there and would need to be linked.

[dd32]

Does Gutenberg have a Gallery view that's similar to the Plugin Screenshot section that we could replace this with?

Although, since these aren't attachments, any core gallery block might not work here..

Probably easiest to duplicate the Gutenberg block functionality into the Screenshot react app that's listed in ​https://github.com/WordPress/wordpress.org/tree/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins-2024/client/screenshots

This switches the plugin directory's screenshot section to use a pattern with core blocks instead of the shortcode. It loads the screenshots as Image blocks inside a Gallery instead of the React screenshot UI. This removes the React dependency from the page, so it's no longer necessary to load all of that JS, saving about 140KB.

I'm not sure this is merge-able as-is since it does look very different than the current UI, but I saw the ticket and wanted to give it a shot.

Fixes https://meta.trac.wordpress.org/ticket/8083

Notes

• I did not remove any code in this PR, but the React screenshots and [wporg-plugins-screenshots] code can be removed before merging (I don't think they're used anywhere else).
• This relies on a small style fix in ​https://github.com/WordPress/wporg-parent-2021/pull/178, which I'll probably merge shortly.

Screenshots

This uses the default layout of a 3-column gallery, which is pretty divergent from the current slideshow style of images, especially when they have captions. As for captions, they're visible on all images now, but they do not show up in the lightbox (see ​https://github.com/WordPress/gutenberg/issues/60469).

Before	After

❤️

I was thinking about this, and whether there's any routinely maintained gallery block plugin that implements a slider-type we currently have.

I then queried the number of screenshots plugins had, and found multiple with over 100 screenshots 🤯
Optimizing for plugins with less than 10 though makes sense, based on the number of plugins that have more than that.

Here's that data:

Screenshots | Count | As a percent
-- | -- | --
40+ | 25 | 0.0%
30-39 | 34 | 0.1%
20-29 | 187 | 0.3%
19 | 46 | 0.1%
18 | 67 | 0.1%
17 | 71 | 0.1%
16 | 108 | 0.2%
15 | 139 | 0.2%
14 | 201 | 0.3%
13 | 196 | 0.3%
12 | 327 | 0.5%
11 | 329 | 0.5%
10 | 519 | 0.9%
9 | 772 | 1.3%
8 | 1,041 | 1.7%
7 | 1,523 | 2.5%
6 | 2,270 | 3.8%
5 | 3,168 | 5.3%
4 | 4,699 | 7.8%
3 | 6,794 | 11.3%
2 | 8,306 | 13.8%
1 | 7,340 | 12.2%
0 | 22,172 | 36.7%

Optimizing for plugins with less than 10 though makes sense, based on the number of plugins that have more than that.

As a followup to this, I would suggest the overall height of the section is limited to ~3 rows of screenshots or an absolute arbitrary pixel count, with the rest hidden behind a expand / see more type selector.

This would also fix https://meta.trac.wordpress.org/ticket/2273

Hi @ryelle, @dd32,

I really like the direction here of moving the screenshots UI to core Gallery blocks instead of continuing to patch the legacy React gallery.

I tried this approach locally, and after working through it I think it points to a pretty clear solution for the remaining UX issues too.

The current screenshots section is showing its age at this point. We have the long-running screenshots UI ticket in https://meta.trac.wordpress.org/ticket/2273, the lightbox request in https://meta.trac.wordpress.org/ticket/8083, the navigation issue in https://meta.trac.wordpress.org/ticket/7878, the lazy-loading issue in https://meta.trac.wordpress.org/ticket/5190, and now a fresh Chrome 146 regression in https://meta.trac.wordpress.org/ticket/8204 caused by the old display: table-cell thumbnail implementation.

Based on that, the direction that makes the most sense to me is:

• move the plugin screenshots UI to the core Gallery block
• add a masonry-style layout for mixed image sizes
• use core lightbox for opening screenshots
• do not show captions in the gallery grid
• show captions only inside the lightbox

After trying it locally, the main issue I ran into was not the Gallery block itself, but the screenshot content we need to handle. Plugin authors upload screenshots in very different formats. Some are tall, some are wide, some are square, some have captions, some do not, and caption length varies a lot too. Because of that, the standard layouts do not work especially well here:

• cropped images lose important content
• uncropped images in a regular grid leave awkward gaps
• showing captions directly in the grid makes the layout even more uneven

That is why I think the cleanest version of this approach is a masonry-style layout, with captions not rendered visually in the grid at all. If captions are optional, missing, short, or very long, they make the gallery harder to scan and the layout less consistent. Keeping them in the lightbox only feels like the best compromise to me: the grid stays clean, and the caption is still available when someone opens the image.

It also seems like a better long-term direction in general, because once this is based on Gutenberg blocks we would have more flexibility to adjust the gallery behavior later depending on the number and type of images, including switching layouts if that ever makes sense.

For wordpress.org specifically, this would also let us modernize the current screenshots section in one step:

• replace the legacy React ImageGallery
• remove the old thumbnail/table-cell behavior that is already breaking in Chrome
• get core lightbox support
• keep captions where they are most useful, inside the lightbox rather than in the grid
• address the long-running screenshots tickets with one consistent approach

I am not specifically proposing a "3 rows / See more" limit as part of this comment. If we want to reduce the initial height of the section later, something like an expansion after the sixth image could be discussed separately, but for me that is secondary to the main layout and lightbox direction.

The only real blocker I see is that lightbox captions still depend on ​https://github.com/WordPress/gutenberg/issues/60469, since the current core lightbox does not yet pass figcaptions into the overlay.

Related tickets / PRs for context:

• https://meta.trac.wordpress.org/ticket/2273
• https://meta.trac.wordpress.org/ticket/8083
• https://meta.trac.wordpress.org/ticket/7878
• https://meta.trac.wordpress.org/ticket/5190
• https://meta.trac.wordpress.org/ticket/8204
• #67
• ​https://github.com/WordPress/gutenberg/issues/60469
• ​https://github.com/WordPress/wporg-parent-2021/pull/178

If this direction makes sense, I would be happy to help move it forward.

[alexodiy]

Leaving this here for cross-reference as well:
​https://github.com/WordPress/wordpress.org/pull/524#issuecomment-4060518452

If we consider this direction with a masonry-style layout, plugins with more uniform screenshot sets would still get a clean regular grid

And for mixed screenshot sets, it adapts much better without awkward cropping or gaps.

Chrome 146 changed how LayoutNG handles anonymous table boxes for <button> elements, so .image-gallery-thumbnail buttons that use display: table-cell no longer share a row - they each get their own anonymous table and stack vertically.

Swapping table-cell for inline-block fixes it. The container already has white-space: nowrap so nothing else breaks.

This is a quick temporary fix for the Chrome regression - a more modern gallery replacement is being discussed in #8083.

Fixes https://meta.trac.wordpress.org/ticket/8204

[dd32]

In 14719:

Plugin Directory: Screenshots: Fix the display of the screenshot thumbnails in recent Chrome versions.

Props alexodiy.
Closes ​https://github.com/WordPress/wordpress.org/pull/560
See #8083.
Fixes #8204.

[thilinah]

In 14950:

Plugin Directory: server-render screenshots gallery + Gallery Lightbox Enhancements polyfill

Props alexodiy, thilinah, dd32, bor0.
Closes ​https://github.com/WordPress/wordpress.org/pull/622.
Fixes #2273, #8083, #8204, #5190, #7878.