web-dev-qa-db-fra.com

Gutenberg ajoute une metabox personnalisée aux blocs par défaut

Est-il possible d'ajouter des méta-boîtes personnalisées aux blocs par défaut de Gutenberg? J'aurais besoin d'ajouter un attribut de données défini par l'utilisateur à chaque bloc. Cet attribut de données serait alors imprimé sur le frontal de l'élément wrapper. Je n'ai pas pu trouver de documentation sur la façon de procéder.

Une image pour illustrer ce que je veux dire.  enter image description here 

custom-fieldmetaboxblock-editor
5
Bonttimo

En utilisant filtres , nous pouvons modifier les propriétés et les attributs des blocs. D'abord, nous étendons les attributs pour inclure le nouvel attribut:

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
);

Ensuite, nous étendons la fonction d'édition du bloc pour inclure un contrôle permettant de modifier l'attribut:

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);

Enfin, nous étendons les accessoires assignés à la fonction save et incluons l'attribut data avec la valeur d'attribut ajoutée:

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
);
3
Alvaro