WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 8 weeks ago

#41969 closed task (blessed) (fixed)

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

Reported by: westonruter Owned by: davidakennedy
Milestone: 4.9 Priority: high
Severity: normal Version:
Component: Bundled Theme Keywords: ui-feedback has-patch needs-testing commit
Focuses: Cc:

Description

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.

Attachments (13)

2017-a-gallery.jpg (258.9 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Seventeen
2016-a-gallery.jpg (238.5 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Sixteen
2015-a-gallery.jpg (193.7 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Fifteen
2014-a-gallery.jpg (179.7 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Fourteen
2013-a-gallery.jpg (333.1 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Thirteen
2012-a-gallery.jpg (206.8 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Twelve
2011-a-gallery.jpg (273.4 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Eleven (no sidebar)
2011-sidebar-gallery.jpg (102.0 KB) - added by joyously 3 months ago.
Gallery widgets in sidebar in Twenty Eleven
2010-a-gallery.jpg (252.2 KB) - added by joyously 3 months ago.
Gallery widgets in Twenty Ten
twentythirteen-gallery-widget-css-change-01.png (1.2 MB) - added by williampatton 2 months ago.
41969.2013-css-01.diff (732 bytes) - added by williampatton 2 months ago.
41969.1.patch (5.8 KB) - added by davidakennedy 8 weeks ago.
Work off of previous patch and add fixes for Twenty Ten, Eleven and Fourteen.
41969.2.patch (7.5 KB) - added by davidakennedy 8 weeks ago.
Adds additional styles for Twenty Twelve and Twenty Seventeen.

Change History (33)

#1 @westonruter
3 months ago

  • Keywords needs-patch added
  • Owner set to davidakennedy
  • Status changed from new to assigned

#2 @melchoyce
3 months ago

  • Keywords needs-screenshots ui-feedback added

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

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


3 months ago

@joyously
3 months ago

Gallery widgets in Twenty Seventeen

@joyously
3 months ago

Gallery widgets in Twenty Sixteen

@joyously
3 months ago

Gallery widgets in Twenty Fifteen

@joyously
3 months ago

Gallery widgets in Twenty Fourteen

@joyously
3 months ago

Gallery widgets in Twenty Thirteen

@joyously
3 months ago

Gallery widgets in Twenty Twelve

@joyously
3 months ago

Gallery widgets in Twenty Eleven (no sidebar)

@joyously
3 months ago

Gallery widgets in sidebar in Twenty Eleven

@joyously
3 months ago

Gallery widgets in Twenty Ten

#4 @joyously
3 months ago

  • Keywords needs-screenshots removed

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

#5 @westonruter
2 months ago

  • Type changed from defect (bug) to task (blessed)

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

This ticket was mentioned in Slack in #core-themes by westonruter. View the logs.


2 months ago

#7 @williampatton
2 months ago

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.

This ticket was mentioned in Slack in #core by melchoyce. View the logs.


2 months ago

This ticket was mentioned in Slack in #core by davidakennedy. View the logs.


2 months ago

#10 @davidakennedy
2 months ago

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.

#11 @jbpaul17
8 weeks ago

  • Keywords has-patch needs-testing added; needs-patch removed

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 weeks ago

#13 @davidakennedy
8 weeks ago

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
8 weeks ago

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

#14 @davidakennedy
8 weeks ago

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.

#15 @davidakennedy
8 weeks ago

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

#16 @melchoyce
8 weeks ago

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

#17 @westonruter
8 weeks ago

  • Keywords commit added

#18 follow-up: @davidakennedy
8 weeks ago

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
8 weeks ago

Adds additional styles for Twenty Twelve and Twenty Seventeen.

#19 in reply to: ↑ 18 @crunnells
8 weeks ago

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

#20 @davidakennedy
8 weeks ago

  • Resolution set to fixed
  • Status changed from assigned to closed

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.

Note: See TracTickets for help on using tickets.