Расширить основной блок в Гутенберге


Для проекта я должен расширить ядро блока core/обложку-изображение. Для первой базовой попытки я придумал следующий код:

PHP:

add_action('enqueue_block_editor_assets', function() {
   wp_enqueue_script('hephaestus-admin-script', 
   get_template_directory_uri() . '/dist/js/admin.js', ['wp-blocks', 'wp-element', 'wp-edit-post'], THEME_VERSION);
});

Admin.js :

function transformElement(element, blockType, attributes) {
  if (blockType.name != 'core/cover-image') {
    return element;
  }

  var newElement = wp.element.createElement(
    'div',
    {
      className: 'wp-block-cover-image',
      style: 'background-image: url(\'' + attributes.url + '\');',
    },
    [
      wp.element.createElement(
        'p',
        {
          className: 'wp-block-cover-image-text',
        },
        [
          wp.element.createElement(
            'span',
            {
              className: 'wp-block-cover-image-text-stage',
            },
            attributes.title
          )
        ]
      ),
    ]
  );

  return newElement;
}

wp.hooks.addFilter(
  'blocks.getSaveElement',
  'hephaestus/modify-get-save-element',
  transformElement
);

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

Но при повторном доступе к сайту в бэкэнде Гутенберг выдает мне следующую ошибку:

Проверка блока: Проверка блока не удалась для core/cover-image

Ожидается:

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage"></span></p></div>

Фактический:

<div class="wp-block-cover-image" style="background-image: url('https://xxxxxxxx/wp-content/uploads/2018/08/xxxxxxxx.jpg');"><p class="wp-block-cover-image-text"><span class="wp-block-cover-image-text-stage">This is a test</span></p></div>

Примечание: URL-адрес изображения намеренно зачеркнут

Почему я получаю эту ошибку проверки блока здесь? Я думаю, что это как-то связано с атрибутом заголовка. Но я не могу понять, в чем причина этого...

Помогите, кто-нибудь?

С уважением, Маркус

Author: Marcus Kober, 2018-08-17

1 answers

Ненастоящее предупреждение об ответе

Это звучит как долгосрочная плохая идея. Вы изменяете основную функциональность с помощью чего-то, что не наследует никакой сгенерированной разметки исходного блока. Любая последующая обработка блока может привести к предположению о разметке на основе имени блока, но предположения могут быть неверными, и будет трудно определить, почему, поскольку блок имеет ожидаемое имя.

Точно так же, как с виджетами и шорткодами, если вы собираетесь в основном разветвите блок, вы должны просто создать новый. Изменение блока должно выполняться только тогда, когда все, что вы делаете, - это изменяете какой-то его небольшой аспект, а может быть, и не тогда.

(Я понимаю, что вы, возможно, просто играете, но все же новый блок гораздо более совместим с поцелуями, учитывая код, который вы показываете здесь)

 4
Author: Mark Kaplun, 2018-08-17 10:54:46