Gutenberg add a custom metabox to default blocks

Is it possible to add custom meta boxes to the default blocks in Gutenberg? I would need to add a user-defined data-attribute to each block. This data-attribute then would be printed on the frontend to the wrapper element. I havent been able to find any documentation on how to do this.

An image to illustrate what I mean.

Is it possible to add custom meta boxes to the default blocks in Gutenberg? I would need to add a user-defined data-attribute to each block. This data-attribute then would be printed on the frontend to the wrapper element. I havent been able to find any documentation on how to do this.

An image to illustrate what I mean.

• custom-field
• metabox
• block-editor

Share Improve this question asked Jul 24, 2018 at 11:56 BonttimoBonttimo 19322 silver badges55 bronze badges 3

• did you read about block controls. I guess you want to add Inspector Controls wordpress/gutenberg/handbook/designers-developers/… – Aamer Shahzad Commented Dec 22, 2018 at 18:55
• You can modify meta either from a block or the sidebar. The html of a block can be modified with filters, in both the edit and save functions. However, as far as I know, you can not add new attributes to a block without modifying it when it is registered through the deprecate property. @Runnick Could you clarify what are you looking for? Thanks. – Alvaro Commented Dec 23, 2018 at 20:35
• @Alvaro I believe this question actually asks how to add additional control (not meta) into the inspector and then print it on front-end. So e.g. data input value from Inspector will appear in e.g. data-name attribute in the HTML. – Runnick Commented Dec 24, 2018 at 14:12

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 6 +50

Using filters we can modify the props and attributes of blocks. First we extend the attributes to include the new attribute:

const { addFilter } = wp.hooks;

// Register/add the new attribute.
const addExtraAttribute = props => {
    const attributes = {
        ...props.attributes,
        extra_attribute: {
            type: "string",
            default: "default_value"
        }
    };

    return { ...props, attributes };
};

addFilter(
    "blocks.registerBlockType",
    "my-plugin/extra-attribute",
    addExtraAttribute
);

Then we extend the edit function of the block to include a control to modify the attribute:

const { addFilter } = wp.hooks;
const { createHigherOrderComponent } = wppose;
const { Fragment } = wp.element;
const { InspectorControls } = wp.editor;
const { PanelBody, TextControl } = wpponents;

const addTextControl = createHigherOrderComponent(BlockEdit => {
    return props => {
        const { attributes, setAttributes } = props;
        return (
            <Fragment>
                <BlockEdit {...props} />
                <InspectorControls>
                    <PanelBody>
                        <TextControl
                            value={attributes.extra_attribute}
                            onChange={value => {
                                setAttributes({ extra_attribute: value });
                            }}
                        />
                    </PanelBody>
                </InspectorControls>
            </Fragment>
        );
    };
}, "withInspectorControl");

addFilter("editor.BlockEdit", "my-plugin/extra-attribute", addTextControl);

Finally we extend the props assigned to the save function and include the data attribute with the added attribute value:

const { addFilter } = wp.hooks;

// Add extra props. Here we assign an html
// data-attribute with the extra_attribute value.
const addExtraData = (props, block_type, attributes) => {
    return {
        ...props,
        "data-extra": attributes.extra_attribute
    }
};

addFilter(
    "blocks.getSaveContent.extraProps",
    "my-plugin/extra-attribute",
    addExtraData
);

For custom meta boxes usees in Gutenberg, please check the following link. https://wordpress/gutenberg/handbook/extensibility/meta-box/