Создать предварительный просмотр при нажатии за пределами блока в области администрирования WordPress - PullRequest
Новая
       78

Создать предварительный просмотр при нажатии за пределами блока в области администрирования WordPress

0 голосов
/ 24 марта 2020

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

    /* This section of the code registers a new block, sets an icon and a category, and indicates what type of fields it'll include. */

wp.blocks.registerBlockType('brad/border-box', {
  title: 'Simple Box',
  icon: 'smiley',
  category: 'common',
  attributes: {
    content: {type: 'string'},
    color: {type: 'string'}
  },

/* This configures how the content and color fields will work, and sets up the necessary elements */

  edit: function(props) {
    function updateContent(event) {
      props.setAttributes({content: event.target.value})
    }
    function updateColor(value) {
      props.setAttributes({color: value.hex})
    }
    return React.createElement(
      "div",
      null,
      React.createElement(
        "h3",
        null,
        "Simple Box"
      ),
      React.createElement("input", { type: "text", value: props.attributes.content, onChange: updateContent }),
      React.createElement(wp.components.ColorPicker, { color: props.attributes.color, onChangeComplete: updateColor })
    );
  },
  save: function(props) {
    return wp.element.createElement(
      "h3",
      { style: { border: "3px solid " + props.attributes.color } },
      props.attributes.content
    );
  }
})

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

Блок в административной области

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

Код html, который создает этот блок, выглядит примерно так: 

<h3 style="border:3px solid #339fcd" class="wp-block-brad-border-box">Yeah</h3>

Может кто-нибудь сказать мне, как я могу этого достичь? Заранее спасибо.

...