保存 SelectControl 选项 [英] Saving SelectControl option

问题描述

我已经成功地创建了一个 WordPress 自定义古腾堡块，我已经创建了一个面板部分来存储我的所有块选项.

I have managed to create a WordPress custom Gutenberg block and I've created a panel section to store all my blocks options.

但是，我对反应很陌生，我已经设法将其搭建在一起.我试图给这个选择一个初始状态，并在更改时保存状态.

However, I am very new to react and I've managed to scaffold this together. I'm trying to give this select an initial state and also save the state when changed.

我知道我需要对 withState 做一些事情，但我不确定我是否可以看到我的承诺失败了，但我不确定为什么.

I know I need to do something with withState but I'm not sure I can see my promise is failing is that but I'm not sure why.

// Block Options
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
  return (props) => {
    const size = {size:"display-2"};
    return (
      <Fragment>
        <BlockEdit { ...props } />
        <InspectorControls>
          <PanelBody title="Display Block Settings"
            icon="welcome-widgets-menus"
            initialOpen={ true }
          >
            <SelectControl
              label="Display Size"
              value={size}
              options={[
                { label: 'Display 1', value: 'display-1' },
                { label: 'Display 2', value: 'display-2' },
                { label: 'Display 3', value: 'display-3' },
                { label: 'Display 4', value: 'display-4' },
              ]}
              onChange={ ( size ) => { setState( { size:size } ) } } 
            />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'display-heading/with-inspector-controls', withInspectorControls );

推荐答案

您走对了.正如您已经提到的，您实际上只需要添加 withState HOC.这可能看起来像这样:

You're on the right track. As you already mentioned you really just need to add the withState HOC. This could look like this:

// 1. add the withState import
import { withState } from '@wordpress/compose';

// 2. wrap your SelectControl with the withState HOC
const MySelectControl = withState( {
    // this is your state, in this case display-2 would be the default
    size: 'display-2',
} )( ( { size, setState } ) => (
    <SelectControl
        label="Size"
        value={ size }
        options={ [
            { label: 'Display 1', value: 'display-1' },
            { label: 'Display 2', value: 'display-2' },
            { label: 'Display 3', value: 'display-3' },
            { label: 'Display 4', value: 'display-4' },
        ] }
        onChange={ ( size ) => { setState( { size } ) } }
    />
) );

// Block Options
const withInspectorControls =  createHigherOrderComponent( ( BlockEdit ) => {
  return (props) => {
    return (
      <Fragment>
        <BlockEdit { ...props } />
        <InspectorControls>
          <PanelBody title="Display Block Settings"
            icon="welcome-widgets-menus"
            initialOpen={ true }
          >
            // 3. now you can add your component in your panel
            <MySelectControl />
          </PanelBody>
        </InspectorControls>
      </Fragment>
    );
  };
}, "withInspectorControl" );

wp.hooks.addFilter( 'editor.BlockEdit', 'display-heading/with-inspector-controls', withInspectorControls );

Reacts 高阶组件一开始可能会令人困惑.但是如果您熟悉 OOP 范式，您可以将它们视为 composition 模式.对于 Gutenberg 开发来说，最重要的事情是他们总是返回一个新组件.这就是为什么我能够像这样使用它<MySelectControl/>.

Reacts Higher-Order Components can be really confusing in the beginning. But if you are familiar with the OOP paradigm, you can think of them like the composition pattern. The most important thing to know for Gutenberg development is the fact that they always return a new component. That's why I was able to use it like this <MySelectControl />.

这篇关于保存 SelectControl 选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！