Image Block: Caption with Link in Wide-Width and Full-Width Images Appears on Two Lines Instead of One Line

[jartes]

Description

When a caption in an Image Block includes a link, and the image is set to either wide-width for full-width, the text and link in the caption are split up and shown on two lines.

When the Image Block is set to centered, the text and link appear on the same line.

Is this expected behavior for the Image Block? If so, is there an option in the toolbar or settings to remove the
when a link is used?

From what I see, the following CSS is causing the link being in one line:

.wp-block-image.alignfull a, .wp-block-image.alignwide a {
    width: 100%;
}

Step-by-step reproduction instructions

1. On a site with a block theme, such as Twenty Twenty-five, go to the page or post editor.
2. Insert the Image Block and add an image.
3. Type in a caption such as "Photo Credit: Nature is Amazing Photo Collection".
4. Highlight the text "Nature is Amazing Photo Collection" and add a link.
5. Change the Image Block alignment to Wide-Width or Full-Width
6. Notice the the text is split into two lines:
   "Photo Credit:
   Nature is Amazing Photo Collection"
7. When inspecting the page, the HTML shows a
   tag is added.
8. Change the Image Block alignment to None
9. Notice that the text is not split and appears in one line:
   "Photo Credit: Nature is Amazing Photo Collection"

Screenshots, screen recording, code snippet

Environment info

• WordPres 6.7.1
• GB: 19.7.0

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

• Yes

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

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[Infinite-Null]

Hi @jartes,

Thank you for bringing this up. I was successfully able to reproduce the issue:

Screencast:

Screen.Recording.2024-11-22.at.12.20.59.PM.mov

According to me, the problem is:

It appears that this behavior is caused by the <a> element taking up the full width.

Suggested Fix

Setting the width to auto seems to resolve the problem:

Testing Environment:

• WordPress: 6.8-alpha-59274-src
• PHP: 8.2.25
• Server: nginx/1.27.2
• Database: mysqli (Server: 8.0.40 / Client: mysqlnd 8.2.25)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0