Как я могу добавить пользовательский элемент управления на страницу? - PullRequest
Новая
       3

Как я могу добавить пользовательский элемент управления на страницу?

0 голосов
/ 14 июня 2019

Мне нужно добавить флажок в форму редактирования страницы в Гутенберге без сторонних плагинов, таких как ACF.Я сделал несколько уроков, в том числе на официальной странице Wordpress, но он не работает так, как мне нужно.

У меня уже есть дополнение к боковой панели (я заменил флажок на toogle, но он будетто же самое), элемент не работает сам по себе, если я щелкаю, не изменяет его состояние, и при этом я не могу сохранить значение при сохранении страницы.

Раньше я бы решил это с метабоксом, но это не так.более совместим с этой версией Wordpress.

Что я должен изменить в коде для компонента, чтобы изменить его состояние, а затем сохранить его в базе данных при сохранении страницы?

Я пытался с этим иработает, но не то, что мне нужно: https://developer.wordpress.org/block-editor/tutorials/plugin-sidebar-0/plugin-sidebar-1-up-and-running/

Я пытался с этим: https://www.codeinwp.com/blog/make-plugin-compatible-with-gutenberg-sidebar-api/

export class MyPluginSidebar{
  constructor(wp){
    const { __ } = wp.i18n;

    const {
      PluginSidebar,
      PluginSidebarMoreMenuItem
    } = wp.editPost;

    const {
      PanelBody,
      TextControl,
      ToggleControl
    } = wp.components;

    const {
      Component,
      Fragment
    } = wp.element;

    const { withSelect } = wp.data;

    const { registerPlugin } = wp.plugins;

    const { withState } = wp.compose;
    class Hello_Gutenberg extends Component {
      constructor() {
        super( ...arguments );

        this.state = {
          key: '_hello_gutenberg_field',
          value: '',
        }

        wp.apiFetch( { path: `/wp/v2/posts/${this.props.postId}`, method: 'GET' } ).then(
          ( data ) => {
            console.log('apiFetch data', data.meta);
            this.setState( { 
              value: data.meta._hello_gutenberg_field
            } );
            return data;
          },
          ( err ) => {
            console.log('wp api fetch error', err);
            return err;
          }
        );
      }

      static getDerivedStateFromProps( nextProps, state ) {
        if ( ( nextProps.isPublishing || nextProps.isSaving ) && !nextProps.isAutoSaving ) {
          wp.apiRequest( { path: `/hello-gutenberg/v1/update-meta?id=${nextProps.postId}`, method: 'POST', data: state } ).then(
            ( data ) => {
              return data;
            },
            ( err ) => {
              return err;
            }
          );
        }
      }

      render() {
        var hasFixedBackground = true;
        return (
          <Fragment>
          <PluginSidebarMoreMenuItem
            target="hello-gutenberg-sidebar"
          >
            { __( 'Sidebar title' ) }
          </PluginSidebarMoreMenuItem>
          <PluginSidebar
            name="hello-gutenberg-sidebar"
            title={ __( 'Sidebar title' ) }
          >
            <PanelBody>
              <ToggleControl
                label="Control label"
                //help={ hasFixedBackground ? 'Has fixed background.' : 'No fixed background.' }
                checked={ hasFixedBackground }
                //onChange={ () => this.setState( ( state ) => ( { hasFixedBackground: ! state.hasFixedBackground } ) ) }
              />

            </PanelBody>
          </PluginSidebar>
        </Fragment>
        )
      }
    }

    // Pass post ID to plugin class
    // Prevent to save on each state change, just save on post save
    const HOC = withSelect( ( select, { forceIsSaving } ) => {
      const {
        getCurrentPostId,
        isSavingPost,
        isPublishingPost,
        isAutosavingPost,
      } = select( 'core/editor' );
      return {
        postId: getCurrentPostId(),
        isSaving: forceIsSaving || isSavingPost(),
        isAutoSaving: isAutosavingPost(),
        isPublishing: isPublishingPost(),
      };
    } )( Hello_Gutenberg );

    registerPlugin( 'hello-gutenberg', {
      icon: 'admin-site',
      render: HOC,
    } );
  }
}

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

Любая помощь приветствуется.

С уважением!

1 Ответ

0 голосов
/ 17 июня 2019

Если вы хотите сохранить данные, которые вы добавили позже, в блоке Гутенберга, вам нужно использовать addFilter. Я могу показать вам пример, который я использую: 

wp.hooks.addFilter('blocks.registerBlockType', 'custom/filter', function(x,y) {
    if(x.hasOwnProperty('attributes')){
        x.attributes.background_image = {
            type: 'string',
            default: ''
        };
    }
    return x;
});
...