search

WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.55k stars 4.22k forks source link

Unnecessary line breaks within image captions due to display: inline-block; on `.wp-block-image a` #67366

Open frkly opened 9 hours ago

frkly commented 9 hours ago

Description

Ideally, the text in captions, including hyperlinks, should flow continuously without any forced line breaks. However, currently, the presence of a hyperlink leads to text breaking before or after it if there isn't sufficient width to accommodate it without wrapping. In my estimation, this issue stems from a lack of consideration for hyperlinks within figcaptions when addressing Issue #62556, which focused on fixing the focus ring around images when they are linked.

Step-by-step reproduction instructions

  1. Activate the Twenty Twenty-Four theme.
  2. Open Gutenberg Editor.
  3. Add an Image block to your post.
  4. Type a caption for the image that includes a moderately long anchor text link. Here is the example text I used for the caption:

This charming tabby cat, spotted enjoying a peaceful afternoon nap on the sunlit hood of my car, perfectly demonstrates the art of relaxation and mindfulness. Cats are renowned for their ability to find comfort almost anywhere. It is said that in ancient days, cats were believed to bring peace to any place they chose to rest, magically transforming even the most chaotic homes into havens of calm. (Photo by Burak Argun on Pexels.com)

  1. Save and publish your post.
  2. Open the published post in a browser.
  3. Open the browser's DevTools. Set the viewport to iPhone SE to simulate a smaller screen size. Locate the CSS for .wp-block-image a. Toggle the display: inline-block; on and off to observe the differences in how the caption text is displayed.

Screenshots, screen recording, code snippet

https://github.com/user-attachments/assets/ca62f567-77f9-4234-b7fd-cbd81be57ff3

Environment info

Please confirm that you have searched existing issues in the repo.

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Please confirm which theme type you used for testing.

Infinite-Null commented 8 hours ago

Hi @frkly , Thank you for highlighting this issue. I was able to successfully reproduce it and agree that it is important to include hyperlinks that flow seamlessly without any forced line breaks. Example:

Image description

Supplemental Artifacts

https://github.com/user-attachments/assets/0716eb37-a8df-4e7c-8c04-89ecb60b90e8

Environment