Consistent inline styling in a Gutenberg-paragraph-block

Question

I have a question, and I am really sorry when it has been already asked (and answered) - but I am researching for hours now and I can't find the answer. Although...somehow I can't believe it, that nobody needs this, so maybe I am completely wrong.

But let me tell you my aim:

I am creating a website for grammar - so I need to "highlight" many words inline. I would like to keep these designs consistent, so the best would be to define styles, like "Word in foreign language", "Word in my language", "Suffix", etc... And then just use them in the paragraph, like the existing ones:

How does that work? Creating the CSS is no problem, but how can I add it to the dropdown? Or are there any other options, that I am not thinking of?

Thanks a lot for helping! This (and the soon-coming patterns with overrides...) would really help me...

Answer 1

To add custom options to that dropdown, you'd want to look at utilizing the Formatting API. Below are the main points quoted from the Block Editor Handbook step-by-step guide:

Step 1: Register a new format

The first step is to register the new format, add src/index.js with the following:

import { registerFormatType } from '@wordpress/rich-text';

registerFormatType( 'my-custom-format/sample-output', {
    title: 'Sample output',
    tagName: 'samp',
    className: null,
} );

[…]

Step 2: Add a button to the toolbar

With the format available, the next step is to add a button to the UI by registering a component for the edit property.

Using the RichTextToolbarButton component, update src/index.js:

import { RichTextToolbarButton } from '@wordpress/block-editor';

const MyCustomButton = ( props ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Sample output"
            onClick={ () => {
                console.log( 'toggle format' );
            } }
        />
    );
};

registerFormatType( 'my-custom-format/sample-output', {
    // …
    edit: MyCustomButton,
} );

[…]

Step 3: Apply a format when clicked

Next is to update the button to apply a format when clicked.

import { registerFormatType, toggleFormat } from '@wordpress/rich-text';
import { RichTextToolbarButton } from '@wordpress/block-editor';

const MyCustomButton = ( { isActive, onChange, value } ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Sample output"
            onClick={ () => {
                onChange(
                    toggleFormat( value, {
                        type: 'my-custom-format/sample-output',
                    } )
                );
            } }
            isActive={ isActive }
        />
    );
};

Further reading:

• registerFormatType function reference.
• RichTextToolbarButton code source (no documentation available).
• ToolbarButton reference (RichTextToolbarButton is based on this React component).