Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
lizswafford opened this issue Nov 2, 2024 · 3 comments
Assignees
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Feature] Core Blocks Blocks that come with Gutenberg. [Feature Group] Editor Experience Features related to Gutenberg integration on WordPress.com. [Platform] Atomic [Platform] Simple [Pri] Low Address when resources are available. [Product] WordPress.com All features accessible on and related to WordPress.com. [Status] Core Fix Needed A fix within the Core WordPress or Gutenberg project is required to resolve this issue. Triaged To be used when issues have been triaged. [Type] Bug

Comments

@lizswafford
Copy link

Quick summary

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?

Steps to reproduce

  1. On a site with a FSE theme, such as Byrne, 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"

Image

What you expected to happen

  • I expect the text and link to appear in one line as it was typed in the editor regardless of the image width selected.
  • Or have an option to toggle-off the line break
    .

What actually happened

  • The user is not able to control the link placement.
  • In the editor, it is not possible to delete the line return and show text and link on one line.
  • When choosing the option to Edit as HTML the
    is not present.
  • Available block styles apply only to the appearance of the image not the caption.
  • There is no built-in option to edit appearance of captions. Such as an option in the Global Styles in the Editor.

Impact

Some (< 50%)

Available workarounds?

Yes, easy to implement

If the above answer is "Yes...", outline the workaround.

A workaround could be to add the Image Block, leave the Caption empty. Then, add a Paragraph Block below the Image Block.

Platform (Simple and/or Atomic)

Simple, Atomic

Logs or notes

(8928979-zd)

@lizswafford lizswafford added [Feature Group] Editor Experience Features related to Gutenberg integration on WordPress.com. [Feature] Core Blocks Blocks that come with Gutenberg. [Product] WordPress.com All features accessible on and related to WordPress.com. [Type] Bug Needs triage Ticket needs to be triaged labels Nov 2, 2024
@github-actions github-actions bot added [Platform] Atomic [Platform] Simple [Pri] Low Address when resources are available. labels Nov 2, 2024
Copy link

github-actions bot commented Nov 2, 2024

Support References

This comment is automatically generated. Please do not edit it.

  • 8928979-zen

@github-actions github-actions bot added the Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". label Nov 2, 2024
@jartes jartes added [Status] Core Fix Needed A fix within the Core WordPress or Gutenberg project is required to resolve this issue. Triaged To be used when issues have been triaged. and removed Needs triage Ticket needs to be triaged labels Nov 21, 2024
@jartes jartes moved this from Needs Triage to Triaged in Automattic Prioritization: The One Board ™ Nov 21, 2024
@jartes
Copy link
Contributor

jartes commented Nov 21, 2024

📌 REPRODUCTION RESULTS

  • Tested on Simple – Replicated
  • Tested on Atomic – Replicated
  • Replicable outside of Dotcom – Yes

📌 FINDINGS/SCREENSHOTS/VIDEO

  • I was able to replicate using Playground on WordPress 6.7 and GB 19.7.0

📌 ACTIONS

@richtabor
Copy link

Closed by WordPress/gutenberg#67392

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Customer Report Issues or PRs that were reported via Happiness. Previously known as "Happiness Request". [Feature] Core Blocks Blocks that come with Gutenberg. [Feature Group] Editor Experience Features related to Gutenberg integration on WordPress.com. [Platform] Atomic [Platform] Simple [Pri] Low Address when resources are available. [Product] WordPress.com All features accessible on and related to WordPress.com. [Status] Core Fix Needed A fix within the Core WordPress or Gutenberg project is required to resolve this issue. Triaged To be used when issues have been triaged. [Type] Bug
Development

No branches or pull requests

8 participants