rtCamp notes, day 61 of undefined

Formatting Toolbar API

The formatting toolbar API allows us to add custom text formatting functions to the gutenberg block editor, for example when we select a string and use the block toolbar to strikethrough it this is called formatting, now we can add custom formatting functions.

We have to first define/register our custom format

registerFormatType( 'our-custom-format/aryan-format', {
    title: 'Aryan Format',
    tagName: 'aryan',
    className: null,
} );

Now we have registered the format, we have to add a button to the toolbar so that we can invoke the format.

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

const AryanButton = ( props ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Aryan Button"
            onClick={ () => {
                console.log( 'aryan button clicked' );
            } }
        />
    );
};

Now this button we can render, now we have to add the code to invoke the format when this button is clicked. That can be done using the function toggleFormat from@wordpress/rich-text package.

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

const AryanButton = ( props ) => {
    return (
        <RichTextToolbarButton
            icon="editor-code"
            title="Aryan Button"
            onClick={ () => {
                onChange(
                    toggleFormat( value, {
                        type: 'our-custom-format/aryan-format',
                    } )
            } }
        />
    );
};

Now this way we can generate our own custom Format functionality.

Extending the editor UI

When we use the Slofills provided by gutenberg, we are basically extending the editor UI -> we are changing the default editor UI

The UI is extended using the @wordpress/plugins package -> we register our plugins [ the gutenberg ones ] and we modify the gutenberg editor experience

import { registerPlugin } from '@wordpress/plugins';
import { __experimentalMainDashboardButton as MainDashboardButton } from '@wordpress/edit-post';

registerPlugin('test-dashboard-button', {
	render: () => (
		<MainDashboardButton>
			<svg width="100" height="100">
				<circle cx="50" cy="50" r="10" stroke="green" stroke-width="4" fill="yellow" />
			</svg>
		</MainDashboardButton>
	)
});

This would replace the main gutenberg editor Dashboard Icon we have.
In the same way we have different slotFills provided by wordpress

• MainDashboardButton -> for the dashboard button
• PluginBlockSettingsMenuItem -> Block toolbar options
• PluginDocumentSettingPanel -> Edit post settings
• PluginMoreMenuItem -> In the gutenberg more menu [ top right three dots ]
• PluginPostPublishPanel -> The publish panel of the post
• PluginPostStatusInfo -> Post status and visibility section [ in the right sidebar ]
• PluginPrePublishPanel -> The pre publish panel
• PluginSidebar -> After the settings icon on the top right
• PluginSidebarMoreMenuItem -> Plugin sidebar with menu in more menu [ top right three dots ]