Plugin Directory: Try using core Gallery & Image blocks for screenshots

[ryelle]

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 Gallery block: Remove blur from captioned images in galleries wporg-parent-2021#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 WordPress/gutenberg#60469).

Before	After

[dd32]

❤️

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%

[dd32]

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.

[dd32]

This would also fix https://meta.trac.wordpress.org/ticket/2273 and render #67 obsolete.

[dan-zakirov]

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 WordPress/gutenberg#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
• Plugin Directory: Use react-image-gallery to improve the plugin screenshot section #67
• Lightbox: caption missing when opening lightbox image gutenberg#60469
• Gallery block: Remove blur from captioned images in galleries wporg-parent-2021#178

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

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props ryelle, dd32, alexodiy.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[dan-zakirov]

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.