Image Block: Preserve line breaks in media caption #70476
Conversation
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @JulienGardair. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Thanks for working on this, @BugReportOnWeb!
Instead of adding an effect to normalize captions from the Media Library, I think we can do that in the onSelectImage method.
| useEffect( () => { | ||
| // Replacing `\n` with `<br />` ensures that line breaks are preserved, | ||
| // consistenctly in both the editor and the frontend. | ||
| if ( typeof caption === 'string' && caption.includes( '\n' ) ) { | ||
| const normalized = caption.replace( /\n/g, '<br />' ); | ||
| setAttributes( { caption: normalized } ); | ||
| } | ||
| }, [ caption, setAttributes ] ); |
There was a problem hiding this comment.
A similar attribute update or synchronization isn't reliable and can introduce unexpected side effects. At a glance, this will introduce an undo trap.
There was a problem hiding this comment.
Oh, that's interesting, I wasn't aware of the undo trap behavior before, Now that I've tested it, I can see the issue with unexpected undo steps after block insertion. I'll go ahead and make the changes accordingly.
| ) { | ||
| mediaAttributes.caption = mediaAttributes.caption.replace( | ||
| /\n/g, | ||
| '<br />' |
There was a problem hiding this comment.
| '<br />' | |
| '<br>' |
Let's match the line break tags generated by RichText.
What?
Closes #59911
This PR ensures that newline characters (
\n) in image captions, particularly when added via the Media Library are preserved and rendered correctly in both the editor and the frontend.Why?
When an image caption is populated from the Media Library, it may include newline characters (
\n). These appear as line breaks initially in the editor but are lost after a refresh, as\ngets converted to spaces. As a result, line breaks are not respected unless manually re-entered in the editor. confusing for users.How?
Added a
useEffectin theImageEditcomponent to detect when the caption is a string containing\n, and replace those newline characters with<br />before the data is passed toCaptioncomponent. This ensures consistent rendering by using proper HTML line breaks.Testing Instructions
Screenshots or screencast
Before
Screen.Recording.2025-06-19.at.12.35.01.AM.1.mov
After
Screen.Recording.2025-06-19.at.7.25.16.PM.mov