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 ;-)

[ScotsScripts]

This is a real issue. Easy example is putting in text-decoration-none when using a bootstrap 5 theme. That has to be a link class.

[ekazda]

Upvote. This needs to be a feature.

[svedish]

I'm building a press page for a client, which he should then be able to keep populating oh his own of course.
In the HTML templates I've come up with a very simple solution: external link would open in target="_blank" and links to newspaper articles would open a pretty lightbox because they have an "open_lightbox" class (to avoid loading perhaps 200 images on one page and keep the page clean with meaningful text links instead of loads of thumbnails).
The client has asked me to build the back end with WordPress because they already know the admin area. I agreed, but I guess I'll need to come up with a different solution for this page since the client will not be able to add the open_lightbox class to "image links", am I right?
Definitely a missing feature in my opinion

[frogdesk]

Mandatory feature. Absolute silliness to suggest that it won't be used. There is no workaround except using an entirely custom HTML block. You can't even edit the HTML because it immediately removes the class as soon as you save. This bug is absolutely needed to be fixed.

[DamirPecnik]

+1 for this feature, really a must!

[driviera]

+1 ... The classes field was a Screen Option in the previous editor. Very useful for adding the "smooth-scroll" class to the anchor link where it's needed... not the block. This is a feature removal that should be reconsidered.

[paaljoachim]

This came up as I was working on adding glightbox to a test site. For creating a tutorial on how to add a lightbox to Gutenberg.

I was told this:
"The added classes in the Gutenberg editor do not add to the <a> element but to the <figure>, and this doesn't ignite glightbox. You have to edit as HTML the block and manually add the class to the <a> element, which is not ideal (and it is what I did in this case)."

Related to this comment: #13368 (comment)

@glendaviesnz @andrewserong

[andrewserong]

@paaljoachim interesting idea and use case this one. From reading the background in the discussion here, it sounds like it's a needed feature for a bunch of people, but that the problem of how to make it usable / discoverable without interfering with the regular UX of editing content hasn't been solved from a design angle. At the block level, the Advanced panel is nicely tucked away so that it's unobtrusive for regular usage. But I can see the point that exposing the ability to add a class name within the popover when editing a link won't be used by most folks in the regular task of writing content.

Since this issue is fairly old now, if folks feel strongly about adding in the feature, it might be worth opening up a fresh issue with an example use case and idea of how it should work, and then attach some design labels to gather more feedback?

[smerriman]

but that the problem of how to make it usable / discoverable without interfering with the regular UX of editing content hasn't been solved from a design angle

That part is trivial as I mentioned back in 2020. When you click the link icon, you see three toggles for controlling the link (open in new tab, nofollow, sponsored). All you need is a 4th option where you type in a class. Done.

Edit - sorry, I see you thought possibly this shouldn't be done because most people won't use it. To be honest, I've never used the 'sponsored' toggle, and it doesn't cause me any problems that I see it.

[andrewserong]

When you click the link icon, you see three toggles for controlling the link (open in new tab, nofollow, sponsored). All you need is a 4th option where you type in a class. Done.

I only see Open in new tab in the options in the link inserter within a rich text field (like the paragraph block), are the other options coming from a plugin (apologies if I've missed something there)? In the Image block's link inserter there's a dropdown toggle to expose advanced controls, which does include the option to add a custom class: (perhaps something like this could be re-used?)

I see you thought possibly this shouldn't be done because most people won't use it.

I don't feel strongly either way — but since this is a fairly old issue and the design team didn't think most folks would use it back in 2019 (I'm not a designer 😄), I thought a good way to get some buy-in from folks would be for anyone who wants to see this feature land to write up a fresh issue for it, outlining how it should ideally work. The interactions on some these components can get really fiddly, so it could probably use a designer's eye.

[smerriman]

You're right - the other two came from the Yoast SEO plugin. Whoops.

But yes, replicating that link CSS class field would be perfect.

Based on the comments above, it's true the design team didn't think most people would need it - and that's probably fair - but they also made two mistakes (thinking HTML mode was a valid workaround, which doesn't work, and thinking the mockup would be adding a control for an inline element to a parent element, which it wasn't).

If there are plenty of valid use cases, no single possible workaround, and there already exists a similar feature, then it seems worth it.

[glendaviesnz]

"The added classes in the Gutenberg editor do not add to the <a> element but to the <figure>, and this doesn't ignite glightbox. You have to edit as HTML the block and manually add the class to the <a> element, which is not ideal (and it is what I did in this case)."

@paaljoachim in the case of adding classes to an image anchor tag you can do this in the UI as Andrew shows above:

So no need to edit the html manually. In the case of the Image block, the blocks custom classes have to be applied to the figure as that is the blocks outer wrapper, and an Image block doesn't always include a element. Maybe the solution here is to always expand that extra settings panel when editing an Image block link so the option is more obvious?

Also, in the case of glightbox you can specify a custom selector, eg. figure.wp-block-image > a

[talldan]

A new issue was opened up here recently about classes and links - #38878.

[paaljoachim]

Let's see if I got this right...
Image block link settings.

and
A text link settings. (Shows the option "Open in new tab".) There are no settings to click to open additional settings.

These are very different. So it sounds like we need to bring the link settings from Image block over to text links. Adding in the arrow to open additional settings.

@getdave

Btw Should we just reopen this issue?
I can always create a new issue instead with this solution and link it a bunch of older links issues.
(It would be better to have someone else with the clear use case open an issue and I can add comments to it.)

[getdave]

This is clearly something that we need to consider adding.

It would be great if we could open a new Issue with:

• clear rationale for the feature
• up to date screenshots
• clear links to previous discussions

We can then keep this one closed.

[paaljoachim]

Actually we have this Link control issue:
Link Control: Add more controls.
#23011

[michaelsoriano]

+1 for this feature. We try to avoid our users from editing HTML.

[richtabor]

+1 for this feature.

@michaelsoriano, mind sharing how you leverage custom classes on links? Trying to get a feel for use-case here.

[michaelsoriano]

+1 for this feature.

@michaelsoriano, mind sharing how you leverage custom classes on links? Trying to get a feel for use-case here.

Hi @richtabor - we have specific classes that we use for hyperlinks - not just for styles, but for "triggers" that invoke custom behaviors. For example, a hyperlink inside a paragraph that we want to trigger a modal.

It would be great for users to be able to just add the class to the link, the same way they add classes to other block elements - instead of going to HTML view.

[Chillifish]

+1 for this feature.

@michaelsoriano, mind sharing how you leverage custom classes on links? Trying to get a feel for use-case here.

I regularly use it to style links as buttons.

[DougMelvin]

@richtabor

I too style text links as buttons using a CSS classes and;
-apply lightbox classes to text links.
-apply custom colors to some links using CSS classes.
-apply a class indicating that an animation should be triggered when the link is clicked.
-indicate that clicking the link should result a smooth-scroll to an anchor.

Telling the client that they need to "edit html" and then "never change anything about that link or the HTML edit will be lost (why?) does not elicit confidence in the platform.