Сохранение опции SelectControl - PullRequest
Новая
       8

Сохранение опции SelectControl

0 голосов
/ 12 апреля 2019

Мне удалось создать пользовательский блок Гутенберга в WordPress, и я создал секцию панели для хранения всех опций моих блоков.

Тем не менее, я очень новичок, чтобы отреагировать, и мне удалось собрать все вместе. Я пытаюсь дать этому выбрать исходное состояние, а также сохранить состояние при изменении.

Я знаю, что мне нужно что-то сделать с помощью State, но я не уверен, что вижу, что мое обещание не выполняется, но я не знаю, почему. 

// 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 );

1 Ответ

1 голос
/ 12 апреля 2019

Вы на правильном пути. Как вы уже упоминали, вам действительно нужно добавить 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. Самое важное, что нужно знать для разработки Гутенберга, это то, что они всегда возвращают новый компонент. Вот почему я смог использовать это так <MySelectControl />.

...