Gallery widget: remove background

[melchoyce]

The gallery widget has accidentally inherited the grey background from the image widget. (See screenshot) We should remove it.

[joemcgill]

Heh. I had noticed, but thought this was an intentional change.

[mrasharirfan]

Limited background color to the Image Widget.

[mrasharirfan]

Hey @melchoyce

I just limited the background color to the Image Widget 🙂

Cheers!

[westonruter]

I also thought the gray was intentional. I like it that way, IMHO.

[mrasharirfan]

True. Without the background color, the pictures are looking a little misaligned from the corners.

[melchoyce]

Can we remove whatever padding is causing it to be narrower than the title field?

[mrasharirfan]

I am not sure because the padding is coming from each side of the image. I will try to work on it to see if I can find an elegant solution.

[Presskopp]

You could just strip any padding here:

.media-widget-gallery-preview .gallery-item

so there will be no borders at all. Looks better at the edges, but doesn't separate the images, see https://core.trac.wordpress.org/ticket/42101#comment:3

[melchoyce]

We definitely want separation between the images, it'd just be nice to have the edges aligned. I know this is a general issue with galleries. If it's not possible to fix, we can just remove the background color and leave the alignment uneven.

[benoitchantre]

Transparent background, edges aligned

[benoitchantre]

Replying to melchoyce:

We definitely want separation between the images, it'd just be nice to have the edges aligned. I know this is a general issue with galleries. If it's not possible to fix, we can just remove the background color and leave the alignment uneven.

It's possible to fix that using a negative margin. I have added a patch.

[Presskopp]

Thanks for inspiration, @benoitchantre , made another patch based on it.

[melchoyce]

Tested 42101.2.diff​.

When the widget is wider than the thumbnails, there's still spacing around the outside edge of the gallery, but I think that's actually fine. Not sure it's worth trying to be 100% perfect here. Screenshots: ​https://cloudup.com/cxf6sfOM534

However, I did notice an issue on Firefox, where there's no spacing between the rows: ​https://cloudup.com/cn_qZ7vakXr

I tried testing in Safari, but for some reason it wouldn't show me the patched version at all. :/ So if someone could test that, I'd appreciate it. Would also appreciate a quick IE check.

[Presskopp]

Here's another patch introducing a margin for firefox. Tested now in Chrome, Firefox & Internet Explorer to be ok, while not shown consistently across the browsers. I made sure the grey background is there when you didn't select an element.

The spacing when you have 2n elements is still there, I found it feasible like this.

Sorry no screenshots.

[melchoyce]

I think the margin-bottom: 5px; has introduced extra space in Chrome now. Is there maybe a different approach we could take here?

[Presskopp]

You're right, that's why I said it's 'ok', not perfect. My abilities to make a cross browser patch are wearing out, good luck, next one! I'm happy if you didn't find more issues at this point

[melchoyce]

In 41833:

Gallery Widget: Remove grey background behind gallery, and align images to the edge of the container.

Props Presskopp, benoitchantre, mrasharirfan.
Fixes #42101.