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

[colorful tones]

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.

[colorful tones]

screenshots of issue with TT3 activated and Whisper style variation chosen

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)

[karmatosed]

@colorful-tones I just tested this and wasn't able to see it fixed with the existing patch. Are you able to perhaps refresh this now some time has passed?

[colorful tones]

The Image block seems to be fixed. However, the Site Logo block does not. I updated the patch to apply only to the Site Logo block.

[sabernhardt]

Thanks for the updates. 57368.diff has an unrelated change, so I checked the PR.

PR 3795 removed the border from the linked Site Logo in a new installation, but not in a site where I had already added a Site Logo block in TT3's Whisper variation.

A linked Image block continues to have a bottom border, which is usually hidden behind opaque images. Transparent images and images with rounded corners still show the border.

Additional blocks that show a border under linked images include:

• Gallery blocks with the "Crop images to fit" option
• Featured Images within the Post Template of a Query Loop

[karmatosed]

@colorful-tones it looks like we have a partial fix do you want to iterate to fix the others @sabernhardt highlighted or shall we focus on the one you have?

[colorful tones]

it looks like we have a partial fix do you want to iterate to fix the others @sabernhardt highlighted or shall we focus on the one you have?

I'll take a pass at fixing up the other stuff now and hopefully have a patch shortly. Thanks all!

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, Site Logo, or Post Featured Image block is wrapped in a link and has border radius applied.

Steps to create issue with latest WP trunk (or prior versions) with Twenty Twenty-Three theme activated:

1. Go to Global Styles and choose Whisper style variation
2. Add a Site Logo block a transparent image (.png), or an Image block in a post with a link attached to it and border radius set, or a Post Featured Image that has the 'Link to Post' option enabled and a border radius.

(Note: in order to see style variation changes you oftentimes have to switch away from the variation that has the changes, 'Save' changes, and then switch back to it in the Global Styles area. This busts the cache.

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

[colorful tones]

PR 3795 removed the border from the linked Site Logo in a new installation, but not in a site where I had already added a Site Logo block in TT3's Whisper variation.

@sabernhardt you would have to change style variations to break the cache and see the effects being updated. Basically, whenever I change something in any of the xxxxxxxx.json theme files - I have to switch to a different variation and then back to the variation I'm changing to bust the cache and actually see the changes. I'm not sure how this stands in core and is likely a separate issue worth exploring. I thought that at some point there was an impact for setting define( 'SCRIPT_DEBUG', true );, but that does not seem to be the case any more.

I've opened a new pull request, and I've addressed and tested all changes against the Post Features Image, Image, Site Logo, and Gallery blocks to verify that the border and background (on :hover) are fixed.

I'm having issues generating a patch, because it is outputting a ton of stuff I have not changed. I'm going to seek guidance in Slack #core.

Also, I've been branching and testing against trunk. I'm not sure if we need to update this ticket's Version, because right now it is marked for 6.1? 🤔

[colorful tones]

Ok, my understanding of manually generating patches and attaching them to these tickets seems to be outdated and redundant since I noticed that there is automatically a patch attached (above).

So, I guess my only remaining question is: should this patch be targeted against trunk or 6.1 branch? I've been targeting trunk.

[sabernhardt]

I've been targeting trunk.

Yes, create patches based on trunk. In almost all cases, including this one, the latest version would need updating. If a patch ever needs to be committed to a branch before (or instead of) trunk, that should be made clear.

[karmatosed]

@colorful-tones just to be clear so I can go into testing, the latest patch is:

• Against trunk.
• Ready to test.

If that is the case I will happily work on testing in order to see about shepherding this on it's journey to commit.

[colorful tones]

@karmatosed Correct, the patch is ready for testing and is targeting the trunk branch. Thanks for clarifying and shepherding.

[karmatosed]

Thanks, assigning to myself in hope to get this to commit.

[karmatosed]

I can see this resolved now thank you everyone. I am going to move this forward. Attaching what I am seeing to show the resolution.

[karmatosed]

In 58818:

Twenty Twenty-Three: Fixes unnecessary borders for links images in Whisper variation.

This fixes the Whisper variation having borders for links images. Other styles did not have this.

Props colorful-tones, sabernhardt.
Fixes #57368.

[poena]

Was the media & text block and avatar excluded on purpose? They still have borders.

[colorful tones]

Was the media & text block and avatar excluded on purpose? They still have borders.

They were not excluded on purpose, and merely overlooked by me. I would be happy to investigate and attach a patch this week. Would it be ideal to open a new Trac ticket at this point, or just re-open this ticket?