Gutenberg: Insert Link: consider adding an "Additional CSS Class" field to the link inserter

[logiclink]

Every block allows an additional css class in the extended section.

It would be great if an additional css class could be assigned to links also.
The resulting html would be:

<a **class="my-class"** href="https://www.somewhere.com/somefile.pdf" target="_blank" rel="noreferrer noopener" aria-label="manual (opens in new tab)">manual</a>

It is possible to insert a class in the HTML view.

[youknowriad]

Thanks for opening the issue, Noting that it's already possible to add a className from the HTML mode to links. and it's also possible to replace the link format with a custom link format with this feature.

The UI doesn't support it though.

[BiDbMAK]

Hi there!
How is it going with this feature?

[sarahmonster]

The design team discussed this during a triage session in Slack today (Note: You may need a Slack account to log in.)

The overall consensus was that we're not sure this is a common enough use case to warrant introducing additional complexity to the interface. WordPress' philosophy is to "provide features that 80% or more of end users will actually appreciate and use", and we're not certain if this is a common enough action that 80% of users will use it.

Let's establish a user need for the functionality, and then, if we think it's warranted and necessary, we can explore options for implementation. The mockup here may prove confusing for users, since it adds a control for an _inline element_ to its _parent element_, which runs counter to our pattern of only placing controls for the currently-selected element in the sidebar. If we decide this is a useful enough feature to add to the core software, it would be good to explore other potential placements.

[youknowriad]

ok based on these discussions, I'm going to close this issue for now now. Thanks all.

[prasadgupte]

@sarahmonster fair comment there. there is ofcourse the workaround to set this in the HTML view. I'm a technie myself, but the new editor is such a delight and i get most work done front-end and i don't want to be fiddling with code.

As a blogger, my use case is while I'd like to link to several pages from a post, I would like to highlight a couple of links on the post where i'd like to draw user attention. you can see an example here where the mentoring sessions & decision framework links are highlighted: http://www.prasadgupte.com/blog/5-tips-how-to-find-expat-job-in-germany-eu/

thanks!

[smerriman]

The mockup here may prove confusing for users, since it adds a control for an _inline element_ to its _parent element_, which runs counter to our pattern of only placing controls for the currently-selected element in the sidebar.

No it doesn't. It adds a control for the inline element just to the inline element, in exactly the same way that you have provided other controls for the inline element (specifically, the ability to add target="_blank").

I've been using the workaround of editing in HTML mode and adding a class, but have now just discovered that if you then go back to Visual editing and click the 'Open in new tab' toggle, the custom class gets deleted.

So if you're suggesting the HTML mode is a valid workaround, the rest of the inline controls are broken.

[kticka]

Yep. If you decide to update link via UI, custom classes are removed. HTML mode isn't a solution at all.

[leadclown]

this is a common use case, we need this. html mode is not the answer because the editors should not have to use it.

furthermore the class is removed when you change the link.

often a link has maybe an icon and you can't alway use a button. for example inline links.

please do the little effort for an big impact ;-)