我设法创建了一个WordPress自定义古腾堡块,并创建了一个面板部分来存储所有块选项。
但是,我是一个非常新的反应者,我已经设法将其组合在一起。我正在尝试为此选择一个初始状态,并在更改后保存该状态。
我知道我需要对withState做些事情,但是我不确定我是否能保证我的诺言是失败的,但是我不确定为什么。
// 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 );
答案 0 :(得分:1)
您在正确的轨道上。正如您已经提到的,您实际上只需要添加withState
HOC。看起来可能像这样:
// 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 );
反应一开始,高阶组件可能确实令人困惑。但是,如果您熟悉OOP
范例,则可以将它们视为composition
模式。对于古腾堡(Gutenberg)开发而言,最重要的一点是它们总是返回一个新组件。这就是为什么我能够像这样<MySelectControl />
那样使用它。