如何在古腾堡编辑器中保存全局检查器控件？

Question

我是 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 开关的正确方法。

我知道之后我需要弄清楚如何操作块输出，但一次一个问题！

Answer 1

我最终通过剖析了几个古腾堡插件弄明白了这一点。在这种情况下，在向检查器添加控件之前，我必须为所有块创建属性：

// 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 中添加您想要的任何属性及其设置、默认值等。

如何在古腾堡编辑器中保存全局检查器控件？

How do I save global inspector controls in Gutenberg editor?

javascript

wordpress

reactjs

wordpress-gutenberg