Ensure Gallery widget is styled properly across widget areas in bundled themes

[westonruter]

The Gallery widget (#41914) allows for image galleries to be added to widget areas. Many themes may not have styles in them that expect galleries to appear in a widget context, since previously galleries would have only appeared in post content. As noted in §Default Themes Updates for ​Media Widgets for Images, Video, and Audio:

Themes that add custom styles to the MediaElement.js player (namely Twenty Thirteen and Twenty Fourteen) were updated from just styling it within syndicated content, to also include instances within widgets. Most themes don’t restrict styles for captioned images or media players to just post content, that is, limit CSS selectors to classes output by post_class(). If your theme does, make sure to either remove that constraint or include a .widget selector.

In the same way for the Gallery widget, we need to make sure that all of the core themes are compatible. Gallery widgets need to be tested in all core themes and in each of their widget areas, while also changing settings like the number of columns and the image size, in order to check for the variations.

Once the core themes are updated then the changes will may be instructive for theme authors to make similar changes in their themes.

[melchoyce]

Let's get some screenshots from each default theme, along with some style improvement suggestions :)

[joyously]

Gallery widgets in Twenty Seventeen

[joyously]

Gallery widgets in Twenty Sixteen

[joyously]

Gallery widgets in Twenty Fifteen

[joyously]

Gallery widgets in Twenty Fourteen

[joyously]

Gallery widgets in Twenty Thirteen

[joyously]

Gallery widgets in Twenty Twelve

[joyously]

Gallery widgets in Twenty Eleven (no sidebar)

[joyously]

Gallery widgets in sidebar in Twenty Eleven

[joyously]

Gallery widgets in Twenty Ten

[joyously]

I added screenshots. They mostly look good, but Twenty Thirteen has some obvious problems, and Twenty Ten has a little overlap.

[westonruter]

See similar task for media added to Text widget: #42203

[williampatton]

A little bit of CSS can fix some of the issues shown in twentythirteen theme. It doesn't fix them all (larger amounts of columns with non-thumbnail image configs still have clearing issues) but it covers many of the cases.

I will continue to work towards fixing any unusual quirks in the styling of these widgets across core themes as I have time.

[davidakennedy]

Thanks @joyously for the testing and screenshots! Thanks @williampatton for the testing and patch!

I've been testing this today, and am seeing mostly the same stuff. I'm going to test a bit more tomorrow, check out the patch and see if anything else needs to be done.

[davidakennedy]

I did some further testing. See below.

2017

Okay.

2016

Okay.

2015

Okay.

2014

Mostly okay. Some issues if gallery images are different sizes.

Screenshot: ​https://cloudup.com/ch6gjzCS7KV

Also, some captions don't show fully on hover because of space if the caption is long. This is similar to galleries in the content area too.

2013

This theme has narrow widget areas, so you can't really have galleries with a lot of columns unless you use a lot of columns, forcing the images to be small. There's a patch to address this, which I'll test.

2012

Okay.

2011

In the Main Sidebar, the galleries can appear squished together. Also, in the Showcase sidebar has the same issue with some gallery column setups. Same issue in Footer Area One, Two and Three.

Screenshot: ​https://cloudup.com/ce-TqeUFEnE

2010

Everything looks solid here. One thing to note is that when image galleries mix portrait and landscape photos, some styles can look a bit off, with the borders. But I'm not sure it's worth fixing.

See: ​https://cloudup.com/ch8tX6VAL7h

[davidakennedy]

Work off of previous patch and add fixes for Twenty Ten, Eleven and Fourteen.

[davidakennedy]

Nice work @williampatton! I've used your patch to build from. My latest adds fixes for the clearing issues in Twenty Thirteen and Twenty Fourteen. It also tries to make the galleries look presentable in Twenty Ten and Eleven. Both those themes use the old gallery styles, before HTML5 support and when styles were injected into the <head>. What I've done there is remove image borders and set a max-width to 90 percent only for widget areas. So in most cases, in most columns, the widgets will look decent.

This could use some more testing before I commit in a few hours.

[davidakennedy]

Wanted to note as well. Screenshots for the clearing issue in Twenty Fourteen, and similar in Twenty Thirteen.

Before: ​https://cloudup.com/cDg74S74zf6

After: ​https://cloudup.com/cD04IjcbMmI

[melchoyce]

Tested Ten, Eleven, Thirteen, and Fourteen, and they look good to me.

[davidakennedy]

Found some issues in Twenty Twelve with larger size galleries.

Screen shot: ​https://cloudup.com/cHGFKmtt1qZ

Also, thought Twenty Seventeen gallery captions didn't look great when gallery columns are five or more.

Will have an updated patch shortly.

[davidakennedy]

Adds additional styles for Twenty Twelve and Twenty Seventeen.

[crunnells]

I tested Twenty Ten, Eleven, Twelve, Thirteen, and Fourteen, and everything looks fine. I couldn't find any major visual bugs.

[davidakennedy]

In 42019:

Bundled Themes: Make sure new gallery widgets look good in themes

Twenty Ten: Reduces image size and removes image borders for galleries in widget areas.
Twenty Eleven: Reduces image size and removes image borders for galleries in widget areas.
Twenty Twelve: Reduces image size for some gallery sizes in widget areas.
Twenty Thirteen: Ensure proper clearing for images, hide captions for some gallery column combos and ensure good display for galleries in widget areas.
Twenty Fourteen: Ensure proper clearing for images and hide captions for some gallery column combos for galleries in widget areas.
Twenty Seventeen: Hide captions for some gallery column combos for galleries in widget areas.

Props joyously, williampatton, davidakennedy, melchoyce, crunnells.

Fixes #41969.