4

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.

  • The tutorial works. Unfortunately, the added button is in a dropdown at the end of the formatting toolbar. If there's an easy way to make it visible immediately, that would be terrific. – yitwail Jul 25 '19 at 1:19
2

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

1

If I understand your requirements correctly, and assuming you haven't now discovered this already, this plugin might be helpful / provide you what you need:

https://wordpress.org/plugins/advanced-rich-text-tools/

If you want to build it yourself, then the source code for this plugin might also be instructive https://github.com/iseulde/advanced-rich-text-tools/blob/master/sub-sup.js and will demand you using the new (Gutenberg) Format API.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.