Adding custom classes to elements via the WYSIWYG

Question

I'd like to give my client the ability to add custom classes to elements via the WYSIWYG editor. For example, giving a link anchor tag a cta class so they can specify this link should be a call to action button. I want them to have control so that not all links are treated this way, and so that the CTA button can be anywhere within their copy, not specifically at the beginning or end. I'm trying to make it re-usable throughout the site. Another example would be specifying they want their list element to display as a grid list by adding the class grid-list to one of the lists they create in their block of copy.

I know they can do this through the HTML editing side of the WYSIWYG, but it would be a lot more straightforward if there was a way for them to just highlight an element and add a class. Can't seem to find any way for them to be able to do it though. I'm using ACF by the way, but not seeing any options.

Answer 1

You can always use shortcodes like:

[cta]https://example.com[/cta]

Here is a handy generator https://generatewp.com/shortcodes/

Answer 2

What do you mean with WYSIWYG editor? Is it a classic editor, built-in block editor, or some third party plugin editor? If you are using block editor, there is an advanced section in right sidebar where you can add as many classes as you like, divided by space. A more user-friendly way would be to register block style for the button, so user can select "default" button or "Call to action" link via the button in right sidebar, and therefore easily choose link type.