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, updatesrc/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).