wordpress.org
wordpress.org copied to clipboard
Plugin Directory: Use `react-image-gallery` to improve the plugin screenshot section
This PR uses the previous work done in 2273 + react-image-gallery to improve the screenshot UI.
The improvements:
- The screenshots are now a consistent height, which prevents content jump.
- This library also provides a "lightbox" view for viewing larger images at full-size.
- The keyboard navigation experience is also improved: next, previous, and full-screen buttons all have focus states.
Unfortunately, there are issues too. The transition CSS on RTL pages is a little janky, and the labels used in the library are also not available for translation, so non-English screen reader users will still hear English labels.
Screenshot UI:
The thumbnail nav on RTL + many screenshots ends up veering offscreen somehow, I think the offset logic must be wrong in react-image-gallery
, or the CSS here conflicts with it somehow.
Fullscreen (lightbox) view:
https://meta.trac.wordpress.org/ticket/2273