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