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. enter image description here

  • did you read about block controls. I guess you want to add Inspector Controls wordpress.org/gutenberg/handbook/designers-developers/… 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
    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
    Dec 24, 2018 at 14:12

2 Answers 2


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 = {
        extra_attribute: {
            type: "string",
            default: "default_value"

    return { ...props, attributes };


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

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

const addTextControl = createHigherOrderComponent(BlockEdit => {
    return props => {
        const { attributes, setAttributes } = props;
        return (
                <BlockEdit {...props} />
                            onChange={value => {
                                setAttributes({ extra_attribute: value });
}, "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 {
        "data-extra": attributes.extra_attribute


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

  • I understood that with those functions you can add meta boxes to the page or post but not to individual blocks?
    – Bonttimo
    Jul 24, 2018 at 12:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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