Использование PHP для рендеринга блока в редакторе WordPress (Gutenberg)

При создании блока в редакторе блоков WordPress (Gutenberg) вы, вероятно, использовали JavaScript для преобразования блока в содержимое вашего сообщения. В этом руководстве мы рассмотрим использование PHP для рендеринга блока, создав так называемый «динамический блок».

В этом руководстве мы собираемся сделать его простым и расширить то, что мы уже создали в нашем руководстве по плагинам WordPress Gutenberg. Однако динамические блоки очень полезны для представления более сложной информации в блоке, такой как цикл поста.

Предпосылки

• Быть знакомым с созданием плагинов для WordPress Gutenberg

Создайте PHP для динамического блока

Если вы еще этого не сделали, выполните шаги в руководстве по плагинам WordPress Gutenberg, чтобы у вас была редактируемая область RichText.

Добавьте следующий PHP в свой плагин (в этом примере wholesome-plugin.php), заменив блок кода, начинающийся с register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Атрибуты

Первое, что вы заметите, это то, что мы переопределили атрибуты в этом файле, и они такие же, как те, которые мы определили в /src/index.jsфайле в нашем предыдущем руководстве.

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

Обратный вызов рендеринга

В приведенном выше коде мы также добавили аргумент render_callbackв register_block_typeфункцию. Это обрабатывает вывод блока, заменяя saveфункцию в /src/index.jsфайле.

Функция render_callbackпринимает два параметра. Это:

• $attributes— это получает атрибуты, которые мы определили как в attributesаргументе этой функции, так и в /src/index.jsфайле
• $content— это получает все, что было сохранено с помощью saveметода в /src/save.jsфайле. Это удобно, если мы выполняем рендеринг InnerBlocks, который в противном случае не был бы передан в метод рендеринга PHP.

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

Обратите внимание, что у нас нет возможности получить доступ к свойствам в PHP render_callback, поэтому нам пришлось вручную добавить класс HTML в <p>тег, чтобы наши стили по-прежнему работали (теоретически мы могли бы воспользоваться $contentпараметром и сделать немного найти и заменить обман, если мы этого хотим, но это что-то для другого руководства).

Удалить метод сохранения JavaScript

Как упоминалось ранее, $contentпараметр render_callbackфункции хранит вывод saveметода JavaScript, но обратите внимание, что мы не используем его в нашем коде.

В файле /src/index.jsзамените saveметод следующим:

Это говорит методу сохранения ничего не возвращать.

Удалить saveимпорт

Пока мы это делаем, также удалите следующую строку из /src/index.js:

import save from './save';

Теперь вы также можете удалить /src/save.jsфайл.

Компиляция плагина

Откройте терминал, убедитесь, что вы находитесь в корневом каталоге вашего плагина, и выполните следующую команду:

Скрипт будет скомпилирован. Если у вас есть какие-либо ошибки, терминал должен сообщить вам, что они собой представляют.

Используйте динамический блок

Теперь вы сможете вставить блок на страницу, отредактировать его содержимое и просмотреть его в интерфейсе.

Динамический блок в действии

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

• Посмотрите на создание вложенных дочерних блоков с InnerBlocksкомпонентом
• Узнайте , как хранить атрибуты Gutenberg в виде метаполей сообщений