wordpress.org icon indicating copy to clipboard operation
wordpress.org copied to clipboard

Plugin Directory: Use `react-image-gallery` to improve the plugin screenshot section

Open ryelle opened this issue 2 years ago • 0 comments

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

ryelle avatar Mar 15 '22 21:03 ryelle