Make WordPress Core

Opened 15 months ago

Last modified 15 months ago

#57368 assigned defect (bug)

Twenty Twenty-Three: unnecessary borders for linked images in Whisper variation

Reported by: colorful-tones's profile colorful tones Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 6.1
Component: Bundled Theme Keywords: has-patch
Focuses: css Cc:

Description

Since the Whisper style variation currently uses CSS border to give links an underline throughout. It is problematic in some scenarios where images have links wrapped around them.

This can easily be overcome with a little further addition to the styles/whisper.json.

Attachments (2)

Screen Shot 2022-12-21 at 1.12.12 PM.png (1.3 MB) - added by colorful tones 15 months ago.
screenshots of issue with TT3 activated and Whisper style variation chosen
Screen Shot 2022-12-21 at 1.10.19 PM.png (1.5 MB) - added by colorful tones 15 months ago.

Change History (4)

@colorful tones
15 months ago

screenshots of issue with TT3 activated and Whisper style variation chosen

#1 @sabernhardt
15 months ago

  • Component changed from Themes to Bundled Theme
  • Summary changed from Twenty Twenty-Three [Whisper variation] - unnecessary borders for images to Twenty Twenty-Three: unnecessary borders for linked images in Whisper variation
  • Version changed from trunk to 6.1

This ticket was mentioned in PR #3795 on WordPress/wordpress-develop by @colorful tones.


15 months ago
#2

  • Keywords has-patch added; needs-patch removed

Trac #57638

The Whisper style variation relies heavily on utilizing the border-bottom to give links their underlined appearance. As opposed to the usual text-decoration: underline. This starts to surface in unexpected visual results when an Image or Site Logo block is wrapped in a link.

Steps to create issue (WP 6.1.1) with Twenty Twenty-Three theme activated:

  1. Go to Global Styles and choose Whisper style variation
  2. Add a Site Logo block with image
  3. Add an Image block to a Post or Page and add a link

Screenshots of the current issue with the border on the Site Logo and Image in Twenty Twenty-Three (v1.0)

https://i0.wp.com/user-images.githubusercontent.com/405912/208984063-fb71e646-6e28-474a-a5e4-2b64f19e3791.png

https://i0.wp.com/user-images.githubusercontent.com/405912/208984071-d5539066-1c76-489d-ba63-67f4721eadf1.png

Note: See TracTickets for help on using tickets.