web-dev-qa-db-ja.com

Gutenbergはデフォルトブロックにカスタムメタボックスを追加しました

グーテンベルクのデフォルトブロックにカスタムメタボックスを追加することは可能ですか？各ブロックにユーザー定義のデータ属性を追加する必要があります。このデータ属性は、ラッパー要素のフロントエンドに出力されます。私はこれを行う方法についてのドキュメントを見つけることができませんでした。

私の言っていることを説明するための画像。 enter image description here 

custom-fieldmetaboxblock-editor
5
Bonttimo

フィルタを使う ブロックの小道具や属性を変更することができる。まず、新しい属性を含めるように属性を拡張します。

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

次に、ブロックの編集機能を拡張して、属性を変更するためのコントロールを含めます。

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

最後に、save関数に割り当てられた小道具を拡張し、 data属性 に追加された属性値を含めます。

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