JuZ Rich Text Extender

Try it

This site registers two formats: Marker and Badge. In the editor, select some text: they appear in the formatting toolbar, under the arrow next to bold, italic and link.

A sentence with a highlighted passage, then a New badge.

How to use it

The plugin adds no button by itself: a theme or a plugin registers its formats with the juz_rich_text_extender/formats filter. Each format applies a span with a CSS class to the selected text.

add_filter( 'juz_rich_text_extender/formats', function ( array $formats ): array {
    $formats[] = [
        'name'      => 'playground-highlight',
        'title'     => __( 'Marker', 'my-theme' ),
        'className' => 'playground-highlight',
        'icon'      => 'admin-customizer',
    ];
    $formats[] = [
        'name'      => 'playground-badge',
        'title'     => __( 'Badge', 'my-theme' ),
        'className' => 'playground-badge',
        'icon'      => 'tag',
    ];
    return $formats;
} );

Then style the classes in the theme stylesheet:

.playground-highlight {
    background: linear-gradient(transparent 55%, #e5e5e5 55%);
}

.playground-badge {
    padding: 0.1em 0.6em;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 0.8em;
}

Buttons that would produce invalid HTML nesting are disabled. The nesting rules can be changed with the juz_rich_text_extender/inline_tags filter.