Как работать с блоками WordPress вне Гутенберга с помощью Node.js

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

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

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

Сегодня мы увидим, как мы можем работать с блоками Гутенберга, не заходя в редактор WordPress. Почему? По нескольким причинам…

Первый и самый очевидный — потому что мы можем. В течение некоторого времени определение основных блоков в редакторе Gutenberg было доступно в виде отдельного пакета кода. Это означает, что мы можем использовать их вне WordPress благодаря диспетчеру пакетов NPM.

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

Для этого мы должны создать папку для нашего проекта, запустить npm init , чтобы создать файл package.json с данными проекта, а затем выполнить следующую команду, чтобы установить эти две зависимости:

 npm install @wordpress/block-library @wordpress/blocks

Следующим шагом будет создание файла index.js с кодом, который мы хотим выполнить. Этот код написан на Node.js — варианте JavaScript, работающем на серверах. Для сегодняшнего примера содержимое index.js может быть следующим:

 const { registerCoreBlocks } = require( '@wordpress/block-library' ); const { createBlock, serialize } = require( '@wordpress/blocks' ); registerCoreBlocks(); const myBlock = createBlock( 'core/paragraph', { content: 'This is a block created programmatically', } ); const serializedBlock = serialize( myBlock ); console.log( serializedBlock );

Первые два оператора, которые появляются в предыдущем коде, являются операторами require для импорта зависимостей. Как я уже говорил, мы хотим импортировать стандартное определение блока WordPress. Мы делаем это с помощью require('@wordpress/block-library') . Поскольку мы хотим импортировать только функцию registerCoreBlocks из этого пакета, слева от символа равенства мы деструктурируем эту функцию.

Таким же образом мы импортируем пакет @wordpress/blocks в качестве зависимости. В этом пакете есть функции для работы с блоками. В пакете определено множество функций (у вас они есть здесь), но в этом примере мы хотим, чтобы createBlock создавал новые блоки и serialize их для преобразования в строки, которые мы можем сохранить в содержимом записи WordPress.

Теперь, когда у нас есть импортированные зависимости, мы вызываем функцию registerCoreBlocks , которая загружает определение стандартных типов блоков WordPress, чтобы мы могли их использовать. С этого момента мы можем создавать блоки, как вы можете видеть, когда мы вызываем функцию createBlock , передавая в качестве параметра имя типа блока, который мы хотим создать, и объект с его атрибутами.

В предыдущем примере мы собираемся создать блок абзаца, поэтому мы передаем имя 'core/paragraph' а внутри объекта атрибутов мы передаем содержимое создаваемого абзаца в виде строки внутри ключа content .

Наконец, мы вызываем функцию serialize , передавая ей только что созданный блок. В результате у нас будет строка, которую мы сможем вывести с помощью функции console.log .

Теперь мы можем запустить приведенный выше код, набрав node index.js в терминале. Если мы это сделаем, произойдет следующее:

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

Окно — это объект JavaScript, который определяет браузер и представляет само окно браузера. Поскольку мы выполняем код в нашем терминале (или, если он работал в производственной среде, на сервере), у нас нет браузера с указанной переменной. Означает ли это, что мы не можем использовать блоки WordPress вне браузера? Конечно, нет!

В Node.js есть несколько пакетов, которые позволяют нам имитировать запуск нашего кода в среде браузера. В этом случае мы будем использовать пакет browser-env. Нам просто нужно установить его, как мы делали это раньше с пакетами WordPress:

 npm install browser-env

В наш файл index.js мы должны добавить новое require для импорта зависимости browser-env . Но также мы должны «исправить» объект window , так как он не поставляется с требуемым методом matchMedia . Если вы скопируете следующий код и добавите его в начало файла index.js , проблема будет решена:

 // Setup environment to simulate a browser // (mandatory to register Gutenberg blocks). require( 'browser-env' )(); window.matchMedia = window.matchMedia || function () { return { matches: false, addListener: function () {}, removeListener: function () {}, }; };

Теперь вы можете снова запустить код, и вы увидите, что он не дает сбоев и возвращает текстовое представление блока абзаца, который мы только что создали с помощью функции createBlock :

 $ node index.js <!-- wp:paragraph --> <p>This is a block created programmatically</p> <!-- /wp:paragraph -->

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

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

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

Избранное изображение Келли Сиккема на Unsplash .