Make WordPress Core

Opened 7 years ago

Last modified 6 years ago

#41130 new defect (bug)

Link boundaries for links contaning images look bad

Reported by: mahu2401's profile mahu2401 Owned by:
Milestone: Future Release Priority: normal
Severity: normal Version: 4.8
Component: Editor Keywords: needs-patch
Focuses: Cc:


In 4.8, the new link boundaries were introduced. For normal links they are fine and they highlight the link really nice.

But if there's an image (inline-block element) in the link, the link boundaries look quite ugly. This is the case when you embed an image from the media library. The following code was used to generate the screenshot:

[caption id="..." align="alignnone" width="300"]<a href="IMAGE_FILE"><img class="size-medium ..." src="IMAGE_FILE" alt="Test" width="300" height="200" /></a> Test[/caption]

If you click on the image, two narrow link boundary markers appear above and below the image (see screenshot). These are taking up extra vertical space, so the image 'jumps' a bit.

Maybe it would be the best to disable the link boundary feature for links containing only images, in my opinion they don't provide any useful information and may irritate the user.

Attachments (2)

screenshot_link_boundaries.png (42.3 KB) - added by mahu2401 7 years ago.
2017-11-20 at 2.50 PM.png (70.7 KB) - added by danielbachhuber 6 years ago.

Download all attachments as: .zip

Change History (4)

#1 @danielbachhuber
6 years ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to Future Release

I can reproduce this against trunk in FF 57.

It seems to be impacted by alignment; a linked image with alignment exhibits the problem, while a linked image without alignment does not.

I imagine it's related to the fact that an image with .aligncenter is defined to be a block element inside of an inline-block element.

#2 @danielbachhuber
6 years ago

I agree with the assessment that link boundaries should be disabled for images. My understanding of link boundaries is that they're meant to communicate when linked text ends, which isn't necessary with an image.

Note: See TracTickets for help on using tickets.