WordPress.org

Make WordPress Core

Opened 9 months ago

Closed 9 months ago

Last modified 9 months ago

#38969 closed defect (bug) (fixed)

Twenty Seventeen: Pictures of a gallery, viewed live in the Customizer have a dark border

Reported by: transl8or Owned by: davidakennedy
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.7
Component: Bundled Theme Keywords: has-patch commit dev-reviewed
Focuses: ui Cc:

Description

I created a page and post with a gallery.
When viewing that post in the Customizer, (with default settings = light color scheme,) the images show a dark border.

Also the link to the media file, like i have set in the gallery, does really link to the media file, even though the mouse cursor looks like a stop sign now in the Customizer and indicates the images should actually not be clickable. (Clicking on a gallery photo in the Customizer makes it difficult to get back to the live preview then.)

Attachments (6)

WP47-RC1-Customize-APostWithGallery-and8pxBorder.jpg (200.3 KB) - added by transl8or 9 months ago.
38969.diff (539 bytes) - added by afercia 9 months ago.
WP47-RC1-Customize-APostWithGallery-and8pxBorder-afterPatch38969.jpg (127.0 KB) - added by transl8or 9 months ago.
38969-dark-gallery.png (136.7 KB) - added by ocean90 9 months ago.
38969.1.diff (819 bytes) - added by laurelfulford 9 months ago.
38969.2.diff (1.2 KB) - added by laurelfulford 9 months ago.

Download all attachments as: .zip

Change History (20)

#1 @afercia
9 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.7
  • Owner set to davidakennedy
  • Status changed from new to assigned

@transl8or good catch, thanks! Looks like the relevant CSS rule in colors-dark.css misses the .colors-dark selector:

.entry-content a img,
.widget a img {
	-webkit-box-shadow: 0 0 0 8px #222;
	box-shadow: 0 0 0 8px #222;
}

@afercia
9 months ago

#2 @afercia
9 months ago

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

The attached patch looks good to me. Needs a permanent committer approval :)

#3 @transl8or
9 months ago

@afercia Thanks for the patch.
But I'm not sure if it's completly fixed. Have you tried switching the color scheme to dark?
I get white frames around the photos now (just the other way round, like it was before) :)

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


9 months ago

#5 @ocean90
9 months ago

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

38969.diff doesn't work for me, see the above screenshot by @transl8or.

Related issue: Because of the box-shadow override for .entry-content a the .gallery-item a rule with box-shadow: none doesn't work anymore, see 38969-dark-gallery.png.

#6 @afercia
9 months ago

@ocean90 @transl8or have you tried to empty your browser's cache? The patch works for me. Browser's cache can be aggressive in the Customizer, especially when using Chrome.

Re: the related issues, I've noticed them as well. Pretty evident when hovering the linked images, and a white dot is always visible in the bottom right corner:

https://cldup.com/zOU0TS8i27.png

Also, I'm not 100% sure the CSS applied to link and images is correct, shouldn't be crafted in a way images are always 100% wide to take all the link space? Currently, depending on the thumbnail size and number of columns in the gallery, there's some empty space on the right. Also, not sure what happens when the default thumbnail size (150) is smaller than the width of the link set by the CSS.

Last edited 9 months ago by afercia (previous) (diff)

#7 @afercia
9 months ago

This is what happens with a thumbnail size set to 110x110, notice the link is ~158 pixels wide in my case, this is set by the gallery CSS, while the thumbnail is resized in the browser to 110x110:

https://cldup.com/eHIUYqEFfj.png

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


9 months ago

#9 @laurelfulford
9 months ago

The hover style issue should be fixed in 38969.1.diff. There were some gallery-specific styles to remove the drop-shadow that needed to be repeated, to override the link styles again.

#10 @laurelfulford
9 months ago

  • Keywords has-patch added; needs-patch removed

38969.2.diff adds a fix for the gallery link width issue - it replaces a width: 100% on the gallery links with a max-width: 100%. The width was originally added in #38872 to fix a display issue in IE11; max-width works as a fix to that issue, too (phew!).

#11 @davidakennedy
9 months ago

  • Keywords commit added

I tested the latest patch from @laurelfulford – 38969.2.diff and it fixes the two main issues in this ticket. This should be good to go.

Also the link to the media file, like i have set in the gallery, does really link to the media file, even though the mouse cursor looks like a stop sign now in the Customizer and indicates the images should actually not be clickable. (Clicking on a gallery photo in the Customizer makes it difficult to get back to the live preview then.)

@transl8or I see that as well, but I don't think that's a theme issue.

#12 @helen
9 months ago

  • Keywords dev-reviewed added

#13 @davidakennedy
9 months ago

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

In 39418:

Twenty Seventeen: Fix style issues with gallery image links

  • Ensures dark color scheme has proper box shadow and hover/focus styles.
  • Make sure links are correct width.

Props afercia, laurelfulford.

Fixes #38969.

#14 @helen
9 months ago

In 39422:

Twenty Seventeen: Fix style issues with gallery image links

  • Ensures dark color scheme has proper box shadow and hover/focus styles.
  • Make sure links are correct width.

Props afercia, laurelfulford.

Fixes #38969 for the 4.7 branch.

Note: See TracTickets for help on using tickets.