我是WP的gutenberg和React(但不是WP / PHP)的新手。我正在尝试添加一系列显示在所有核心块上的自定义控件。使用WP文档,我能够添加一个带有简单切换的新检查器部分:
var el = wp.element.createElement;
const { ToggleControl, PanelBody, PanelHeader, BaseControl } = wp.components;
var withInspectorControls = wp.compose.createHigherOrderComponent( function( BlockEdit ) {
return function( props ) {
return el(
wp.element.Fragment,
{},
el(
BlockEdit,
props
),
el(
wp.editor.InspectorControls,
{},
el(
PanelBody,
{
title: 'Section Controls'
},
el(
ToggleControl,
{
label: 'Full Width Section',
checked: props.attributes.full_width_section,
onChange: function(value){ props.setAttributes( { full_width_section: value } ); }
}
),
)
)
);
};
}, 'withInspectorControls' );
wp.hooks.addFilter( 'editor.BlockEdit', 'brink/with-inspector-controls', withInspectorControls );
我不能做的是找出利用blocks.getSaveContent.extraProps保存新的full_width_section切换的正确方法。
我知道我需要弄清楚如何在此之后操纵块输出,但一次只有一个问题!
我终于通过解剖一些Gutenberg插件来解决这个问题。在这种情况下,在向检查器添加控件之前,我必须为所有块创建属性:
// Attributes
const backgroundSettings = {
fullWidthSection: {
type: "boolean",
},
};
function addAttributes(settings) {
const { assign } = lodash;
settings.attributes = assign(settings.attributes, backgroundSettings);
return settings;
}
wp.hooks.addFilter( 'blocks.registerBlockType', 'brink/add-attributes', addAttributes ); // Add Attributes
从这里开始,您只需在backgroundSettings中添加所需的任何属性及其设置,默认值等。