Гутенберг Wordpress: расширение основного блока - PullRequest
Новая
       7

Гутенберг Wordpress: расширение основного блока

0 голосов
/ 08 декабря 2018

Я пытаюсь добавить заполнитель Inspector Control для всех основных блоков нового редактора Gutenberg Wordpress.Я создал элемент управления в редакторе, и теперь я пытаюсь применить этот стиль к элементу блока самостоятельно.

Но я продолжаю получать This block contains unexpected or invalid content. Ошибка на блоках.Может ли кто-нибудь помочь мне здесь, что именно я не делаю?

  var paddingEditor = wp.compose.createHigherOrderComponent(function(
    BlockEdit
  ) {
    return function(props) {
      var padding = props.attributes.padding || 0;
      handleChange = name => newValue => {
        if (props) {
          props.setAttributes({ [name]: newValue });
        }
      };
      return el(
        Fragment,
        {},
        el(BlockEdit, props),
        el(
          editor.InspectorControls,
          {},
          el(
            components.PanelBody,
            {
              title: "Padding",
              className: "",
              initialOpen: false
            },
            el("p", {}, "Padding"),
            el(components.TextControl, {
              value: padding,
              onChange: this.handleChange("padding")
            })
          )
        )
      );
    };
  },
  "paddingStyle");

  wp.hooks.addFilter(
    "editor.BlockEdit",
    "my-plugin/padding-style",
    paddingStyle
  );

  function AddPaddingAttribute(element, blockType, attributes) {
    Object.assign(blockType.attributes, {
      padding: {
        type: "string"
      }
    });

    return element;
  }

  wp.hooks.addFilter(
    "blocks.getSaveElement",
    "my-plugin/add-padding-attr",
    AddPaddingAttribute
  );

  function AddPaddingStyle(props, blockType, attributes) {
    if (attributes.padding) {
      props.style = lodash.assign(props.style, { padding: attributes.padding });
    }
    return props;
  }

  wp.hooks.addFilter(
    "blocks.getSaveContent.extraProps",
    "my-plugin/add-background-color-style",
    AddPaddingStyle
  );

PHP 

function register_block_extensions(){

    wp_register_script(
        'extend-blocks', // Handle.
        get_template_directory_uri() . '/js/extend-blocks.js',
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-editor' )
    );
    wp_enqueue_script( 'extend-blocks' );

  }
  add_action('enqueue_block_editor_assets', 'register_block_extensions');

1 Ответ

0 голосов
/ 15 января 2019

Ваш редактор. BlockEdit выглядит правильно, но мне сложно разобрать старый синтаксис.Предполагая, что это правильно, вам нужно заменить blocks.getSaveElement следующим образом: 

function AddPaddingAttribute(props) {
  if (props.attributes) { // Some modules don't have attributes
    props.attributes = Object.assign(
      props.attributes,
      {
        padding: {}
      }
    );
  }
  return props;
}
wp.hooks.addFilter(
  'blocks.registerBlockType',
  'my-plugin/add-padding-attr',
  AddPaddingAttribute
);

и изменить blocks.getSaveContent.extraProps следующим образом: 

function AddPaddingStyle(props, blockType, attributes) {
  return Object.assign(
    props,
    {
      style: {
        padding: attributes.padding
      }
    }
  );
}
wp.hooks.addFilter(
  "blocks.getSaveContent.extraProps",
  "my-plugin/add-background-color-style",
  AddPaddingStyle
);
...