Використання 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компонента
• Дослідіть , як зберігати атрибути Гутенберга як мета-поля публікації