使用filters 我们可以修改块的道具和属性。首先，我们扩展属性以包括新属性：
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 attribute 添加属性值后：
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
);
