Consistent inline styling in a Gutenberg-paragraph-block

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:

tech