Add the ability to create an inline <span> tag with a custom class in RichText fields via the Toolbar

[eric-michel]

What problem does this address?

The editor toolbar offers a lot of formatting options for content within a Richtext field:

However, sometimes we want to be able to apply inline formatting for which there is no option in the Toolbar. For instance let's say we want a single h1 tag that looks like this:

In the editor, I can make the text fit on two lines by using shift-enter and can make the top line bold via the Toolbar, but there isn't a way to provide a different font size inline:

In general, this is fine. I don't expect the Toolbar to offer every possible formatting option just like I don't expect block controls to offer every possible option either. However, on the block level, we can add custom classes so that we can write our own custom CSS at-will:

There is currently no way to do that via the editor interface for a section of inline text.

What is your proposed solution?

In a perfect world, I would love an additional option in the Toolbar that would provide an input field (similar to the ability to add a link to an arbitrary selection of text). When highlighting text and providing this input field with a class name, it would wrap that text in a span tag with that class applied.

This is, of course, currently possible by simply swapping to the Code editor view. However, offering a Toolbar button will definitely reduce friction, just like having the ADDITIONAL CSS CLASS(ES) input field reduces friction for adding custom classes to full blocks.

[fabiankaegy]

Hey @eric-michel 👋

Are you hoping for a solution where the editor UI allows you to manually add a random class name as a string?

Or are you looking for a way to extend the available formats in that dropdown with custom options you have defined?

If you are looking for the ladder this is already possible using the Rich Text Formats API. Here is a guide on how to register your own formats: https://developer.wordpress.org/block-editor/how-to-guides/format-api/

[eric-michel]

Hi @fabiankaegy! I was not aware of the Rich Text Formats API! I will definitely check that out.

Having said that, in a perfect world, I'd love this to be folded into the editor UI for everyone. It feels like something that would be broadly useful (similar to being able to add a custom class to a full block).

Also, I've toyed around with making some custom blocks here and there, but maintaining features like this in our theme for the long-term is a bit daunting with how often and quickly the editor is evolving.

[asafm7]

This will also be useful for adding inline font icons.