Custom Toolbar Button in Gutenberg Editor with Format API

Customizing your editing experience in the Gutenberg editor is essential for creating unique and engaging content. By incorporating a custom button that applies a specific tag, such as ‘mark’, you can streamline the text styling process and improve the visual presentation of your content.

To add a custom button with a specific tag in Gutenberg using the Format API, follow these steps:

Insert the following code in functions.php:

add_action('enqueue_block_editor_assets', 'custom_rich_text_toolbar_button');
function custom_rich_text_toolbar_button() {
	wp_enqueue_script(
		'custom-rich-text-toolbar-button-js',
		get_stylesheet_directory_uri().'/js/custom-rich-text-toolbar-button.js',
		array( 'wp-blocks', 'wp-element', 'wp-components', 'wp-editor' ),
		'1.0',
		true
	);
	wp_enqueue_style(
		'text-highlight-button-editor-css',
		get_stylesheet_directory_uri().'/css/custom-rich-text-toolbar-button.css',
		array( 'wp-edit-blocks' )
	);
}

This code snippet registers and enqueues a custom JavaScript file custom-rich-text-toolbar-button.js and a CSS file custom-rich-text-toolbar-button.css to be used in the Gutenberg editor. The JavaScript file is dependent on 'wp-blocks', 'wp-element', 'wp-components', and 'wp-editor' scripts, while the CSS file is dependent on 'wp-edit-blocks' styles.

Additionally, the custom-rich-text-toolbar-button.css file can be linked using the wp_print_styles hook to display styles not only in the editor.

add_action('wp_print_styles', 'add_styles');
if (!function_exists('add_styles')) {
	function add_styles() {
	    if(is_admin()) return false;
		// Your enqueued CSS
		wp_enqueue_style( 'text-highlight-button-editor-css', get_template_directory_uri().'/css/custom-rich-text-toolbar-button.css' );
	}
}

Create a file custom-rich-text-toolbar-button.css with the following content:

Place this file in the /css/ directory of your theme.

custom-rich-text-toolbar-button.css
.mark_1 {
    background-color: #d6efff;
}

Create a file custom-rich-text-toolbar-button.js with the following content:

Place this file in the /js/ directory of your theme.

custom-rich-text-toolbar-button.js
( function( wp ) {

    var withSelect  = wp.data.withSelect;
    var ifCondition = wp.compose.ifCondition;
    var compose     = wp.compose.compose;

    var CustomMark_1 = function( props ) {
        return wp.element.createElement(
            wp.editor.RichTextToolbarButton, 
            {
                icon: 'admin-appearance', 
                title: 'Custom Mark 1', 
                onClick: function() {
                    props.onChange( 
                        wp.richText.toggleFormat(props.value, {
                            type: 'webninja/custom-mark-1'
                        }) 
                    );
                }
            }
        );
    }

    var ConditionalCustomMark_1 = compose(
        withSelect( function( select ) {
            return {
                selectedBlock: select( 'core/editor' ).getSelectedBlock()
            }
        } ),
        ifCondition( function( props ) {
            return (
                props.selectedBlock &&
                props.selectedBlock.name === 'core/paragraph'
            );
        } )
    )( CustomMark_1 );


    wp.richText.unregisterFormatType('core/underline');
    wp.richText.registerFormatType(
        'webninja/custom-mark-1', {
            title: 'Custom Mark 1',
            tagName: 'mark',
            className: 'mark_1',
            edit: ConditionalCustomMark_1,
        }
    );
} )( window.wp );

This JavaScript code defines a custom format 'Custom Mark 1' for the Gutenberg editor. It creates a RichTextToolbarButton with the icon ‘admin-appearance’ and title 'Custom Mark 1'. When clicked, it toggles the 'webninja/custom-mark-1' format on the selected text. The code also includes conditional logic to apply the custom format only to paragraphs. Additionally, it unregisters the default 'core/underline' format and registers the new 'webninja/custom-mark-1' format with the tag 'mark' and class 'mark_1'.

By following these steps to incorporate a custom button with a specific tag in the Gutenberg editor using the Format API, you can optimize your text styling process and enhance the aesthetics of your content. Experiment with this feature to create visually appealing and well-structured posts for your audience.