6

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/… – Aamer Shahzad Dec 22 '18 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 '18 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 '18 at 14:12
3
+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 } = 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 (
            <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
);
|improve this answer|||||
-2

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

|improve this answer|||||
  • I understood that with those functions you can add meta boxes to the page or post but not to individual blocks? – Bonttimo Jul 24 '18 at 12:45

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.