Manually added link attributes are stripped when editing URL or toggling Open in new tab

[sabernhardt]

Original report by elgameel
https://core.trac.wordpress.org/ticket/50652

When we manually add a CSS class to a link in the editor, editing the link again removes the class tag.

For example, if we try to edit this link:
<a href="https://example.com" class="btn">test link</a>

The class tag will be removed, and it will look like this:
<a href="https://example.com">test link</a>

Here's a video that explains the problem: https://i.rankmath.com/wtZycO

To reproduce

1. Edit a post in Visual mode.
2. Highlight text in a paragraph (or similar) block and activate the button to add a link.
3. Type a custom URL or select a page/post and press the Enter key.
4. Switch to Edit as HTML and add a class or other attribute to the a tag. Preferably this would change the link's style within the editor.
5. Switch back to Visual editing.
6. Either toggle the "Open in new tab" button or else click the Edit button, change the URL and press Enter again.
7. If the attribute's removal is not obvious visually, switch back to Edit as HTML to find that the custom attribute is no longer there.

Expected behavior
Manual attributes remain on the link tag, even when one of the standard attributes is edited in the visual mode.

Versions

• WordPress version: 5.6 RC1, without the Gutenberg plugin activated
• OS/Browser: Windows 10 with Firefox 83

[Elgameel]

Hi @sabernhardt

Thanks for moving my ticket to GitHub.

[grzim]

I believe it is connected to the issue #27212

[getdave]

This requires handling in packages/format-library/src/link/utils.js. We need to try accepting all the attributes.

[karthick-murugan]

@sabernhardt - I think this issue no longer exist. Please have a look at this video taken from latest gutenberg version.

REC-20250102202947.mp4

[kyle-charlton]

The issue still persists if you make a change using block controls that directly affects the element you edited manually.
For example, if you created a link and added a data attribute data-pizza="Pepperoni" using the Edit as HTML block option, then save, everything works as expected, however, if you then switch back to Edit visual, then change the link to open in a new tab, the data attribute is removed. Another issue is that if you add a class trough the HTML editor, it does not appear under the Advanced Additional CSS class(es) list.

playground-demo.mp4