WordPress недавно представил пакет @wordpress/scripts npm. Это коллекция многоразовых скриптов для разработки WordPress. Мы узнаем, как создать настраиваемый блок Гутенберга, используя ES6, JSX и @wordpress/scripts пакет.
Поскольку большинство браузеров не могут интерпретировать или запускать ES6 и JSX, нам нужно использовать инструменты Babel для преобразования этих синтаксисов в код, который браузеры можно понять. Также, используя инструмент сборки, такой как Webpack, мы можем организовать наш код в более мелкие модули, а затем объединить их в одну загрузку.

Пакет @ wordpress / scripts абстрагирует эти библиотеки для стандартизации и упрощения разработки, поэтому вам не нужно обрабатывать детали для настройки этих библиотек.

Вы также можете посмотреть предыдущие видеоролики Введение в Гутенберг и Создание Гутенберга с помощью ES5.

Настройка настраиваемого плагина блока Гутенберга:

Мы будем использовать @wordpress/scripts пакет npm, который устанавливает необходимые зависимости и обрабатывает конфигурацию по умолчанию для webpack и Babel.

Итак, давайте создадим каталог с именем myguten-block и установим пакет @wordpress/scripts, используя внутри него npm. The — save-exact устанавливает точную версию пакета @wordpress/scripts

cd wordpress/wp-content/plugins
mkdir myguten-block
cd myguten-block
npm init
npm i --save-dev --save-exact @wordpress/scripts

Это установит все необходимые пакеты и зависимости внутри каталога node_module. Обратите внимание, что он использует src/index.js в качестве точки входа и будет выводить связанный файл с именем index.js внутри каталога build.
Мы напишем наш связанный с блоком код внутри src/index.js, который веб-пакет будет объединен в build/index.js, а затем мы сможем поставить build/index.js в очередь. используя наш плагин.

Итак, давайте также создадим два каталога src и build

Это интерфейс командной строки, который предоставляет двоичный файл с именем wp-scripts, поэтому вы можете вызывать его напрямую. Итак, давайте добавим этот скрипт в package.json

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
},

Когда ты бежишь,

npm run start он будет запускать webpack в режиме просмотра, поэтому, если вы внесете изменения в свой файл src / index.js, он автоматически создаст для него пакет в реальном времени. Это используется в среде разработки.
npm run build команда создаст связанный файл с именем index.js внутри build каталога, который будет преобразованным кодом, готовым к производству.

Зарегистрируйте свой блок

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

1-Имя блока (Уникальная строка для идентификации блока в формате namespace/block-name)
2-Объект конфигурации блока (Содержит несколько свойств, которые необходимы для регистрации блока. Object [{ key: value }])

namespace - это имя вашей темы или плагина.
Это имя используется в разделителях комментариев как <!-- wp:namespace/block-name -->, когда сообщение сохраняется в базе данных.

Теперь давайте зарегистрируем наш блок, вызвав registerBlockType(). Здесь myguten-block - это пространство имен (имя каталога нашего плагина), а test-block - имя блока. Затем нам нужно указать заголовок, описание, значок и категорию.

Функция edit описывает структуру блока и представляет то, что редактор будет отображать, когда блок используется на панели инструментов.

Функция save определяет, как атрибуты будут объединяться вместе для создания окончательной разметки, которая затем сериализуется и сохраняется в базе данных. Он решит, как ваш контент будет выглядеть во внешнем интерфейсе.

Давайте объединим этот файл, запустив webpack в режиме просмотра с помощью npm run start

npm run start

Создайте файлы CSS

Файл src/editor.css будет содержать стили того, как наш пользовательский блок будет выглядеть в редакторе.

.wp-block-myguten-test-block {
    color: cornflowerblue;
}

src/style.css будет содержать стили того, как наш пользовательский блок будет выглядеть во внешнем интерфейсе.

 // src/style.css
.wp-block-myguten-test-block {
    color: tomato;
}

Создайте файл плагина и поставьте его в очередь

Хотя поведение редактора блока реализовано в JavaScript, вам необходимо зарегистрировать блок на стороне сервера, чтобы сценарий помещался в очередь при загрузке редактора.

Итак, давайте создадим файл плагина и поставим в очередь связанный файл build/index.js, наши таблицы стилей src/editor.css и src/style.css

Обратите внимание на две зависимости сценария:

  • wp-blocks включает регистрацию типа блока и связанные функции
  • wp-element включает абстракцию элемента WordPress для описания структуры ваших блоков.
  • wp-editor включает такие компоненты, как RichText

Линейные инструменты

@wordpress-package также поможет вам обеспечить соблюдение рекомендаций по стилю кодирования для ваших файлов JavaScript и CSS. Давайте добавим этот скрипт в ваш package.json файл

"scripts": {
  "lint:js": "wp-scripts lint-js src/index.js",
  "lint:js-fix": "wp-scripts lint-js src/index.js --fix",
  "lint:css": "wp-scripts lint-style '**/*.css'",
}

Теперь, когда вы запустите npm run lint:js и npm run lint:css, он отобразит все ошибки и предупреждения для файлов JavaScript и файлов CSS соответственно. Это также дает вам возможность исправить эти ошибки, добавив флаг - fix для файлов JS.

npm run lint:js

npm run lint:css

Проверьте движки и лицензию

Он может проверить, установлена ​​ли у вас необходимая версия узла и правильная ли у вас лицензия.

"scripts": {
  "check-engines": "wp-scripts check-engines",
  "check-licenses": "wp-scripts check-licenses --prod --gpl2 --ignore=abab",
}

Давайте проверим наши двигатели

npm run check-engines

npm run check-licenses

Лицензия, которая должна быть определена в вашем файле package.json, должна бытьGPL-2.0-or-later

Переопределение конфигурации веб-пакета по умолчанию для @ wordpress / scripts

@wordpress/scripts уже предоставляет конфигурацию по умолчанию для webpack. Если она вам действительно не нужна, вы не должны отменять эти настройки по умолчанию. Однако, если вы действительно хотите их переопределить, вы можете создать свой собственный файл конфигурации веб-пакета с именем webpack.config.js в том же каталоге, где находится ваш package.json.

Пример:

// webpack.config.js
const defaultConfig = require("./node_modules/@wordpress/scripts/config/webpack.config");

module.exports = {
  ...defaultConfig,
  module: {
    ...defaultConfig.module,
    rules: [
      ...defaultConfig.module.rules,
      {
        test: /\.svg$/,
        use: ["@svgr/webpack", "url-loader"]
      }
    ]
  }
};

Если вы хотите добавить настраиваемую точку входа и точку вывода, вы можете определить настраиваемые сценарии следующим образом: (используйте имя сценария wp-scripts build, затем путь к файлу точки входа, а затем путь к выходному файлу. Пути для настраиваемых точек входа указываются относительно корень проекта.

"scripts": {
"build:dynamic-block": "wp-scripts build dynamic-block/block.js --output-path=dist"
 },

Вы узнаете больше о разработке пользовательских блоков Гутенберга в следующих блогах и видео.