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" },
Вы узнаете больше о разработке пользовательских блоков Гутенберга в следующих блогах и видео.