Add Formatting Buttons to Gutenberg core/paragraph BlockControls

by

When inserting a core/paragraph block to the content, we can choose e.g. “bold”, “add link” from the controls above the content:

enter image description here

For my customer, I would like to add formatting buttons for <sup></sup> and <sub></sub>, in order to make it possible to write simple chemical or mathematical formulas, e.g. CO2 or m2.

I tried something like this, with a filter (taken from here):

const { createHigherOrderComponent } = wp.compose;
const { Fragment } = wp.element;
const { InspectorControls, BlockControls } = wp.editor;
const { PanelBody, Toolbar } = wp.components;

const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
    return ( props ) => {
        return (
            <Fragment>
                <BlockControls>
                    // what should I enter here?
                </BlockControls>
                <BlockEdit { ...props } />
            </Fragment>
        );
    };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'my-plugin/with-inspector-controls', withInspectorControls );

a) how can I add the required buttons in the filtered <BlockControls>?

b) is this the right approach?

Update 2019-01-24

An official tutorial is now available here. I haven’t tried it yet, but it seems to be exactly what I was looking for.

2 Answers
2

An official tutorial to add custom buttons is now available here.

Leave a Comment