Обзор скрипта WordPress Create Block

Команда официального редактора WordPress (Gutenberg) предоставила вам небольшой аккуратный скрипт для создания блочного плагина с помощью их @wordpress/create-blockскрипта npm.

В этой статье дается обзор скрипта WordPress Create Block Script, а также подробности того, что он выводит.

ПРИМЕЧАНИЕ. Эта статья предназначена для более старой версии скрипта создания блока.

Хотя теорию все еще можно применять, некоторая информация в этой статье может быть несовместима с последним скриптом создания блока. Вы можете просмотреть наше обновленное Руководство по созданию скриптов блоков здесь.

Запуск скрипта создания блока

Официальная документация дает вам несколько различных параметров для передачи в npm init @wordpress/blockкоманду.

Для моей установки я запустил ее в интерактивном режиме, опустив параметры. Я ввел следующую команду в свой терминал (в то время как cdв моей wp-content/pluginsпапке):

npm init @wordpress/block

Сценарий задал мне несколько вопросов, чтобы помочь мне построить мой блок.

Желая создать стартовый блок для идеи плагина, которая у меня есть («Полезные заметки»), я ответил на вопросы следующим образом:

• Слаг блока, используемый для идентификации (а также имя плагина и выходной папки): я хочу, чтобы мой блок назывался Wholesome Notes, поэтому я ввел wholesome-notes.

• Внутреннее пространство имен для имени блока (что-то уникальное для ваших продуктов): поскольку оно должно быть уникальным для всех моих продуктов, я ввел wholesome-code, так как это название моей компании. Оглядываясь назад, это было бы лучше замкнуть на wcили wcltd.

• Отображаемый заголовок для вашего блока: я ввел название плагина, Wholesome Notes.

• Обзор скрипта создания блока WordPress Я не был на 100% уверен, что хочу здесь написать, поэтому просто ввел некоторый текст, который собираюсь изменить позже.

• Иконка для облегчения идентификации вашего блока (необязательно): Быстро открыв ресурс WordPress Dashicons, я выбрал admin-commentsего, так как он имеет значок в стиле заметки.

• Название категории, чтобы помочь пользователям просматривать и находить ваш блок (используйте клавиши со стрелками): я выбрал layout, хотя, честно говоря, для этого типа блока, вероятно, потребуется отдельная категория. Это то, что я могу изменить позже.

Бегnpm init @wordpress/block

Затем сценарий пошел дальше и установил все необходимые зависимости через npm (на данный момент он просто устанавливает wp-scriptsпакет npm в качестве зависимости).

Проверка вывода

С помощью приведенных выше команд скрипт WordPress Create Block выдает следующий результат:

• полезные заметки
  • строить
    • index.asset.php
    • index.js
    • index.js.map
  • node_modules
  • источник
    • index.js
  • .editorconfig
  • .gitignore
  • редактор.css
  • пакет.json
  • стиль.css
  • полезные-notes.php

@wordpress /блокировать вывод

Ниже приводится разбивка каждого из этих файлов и папок.

wholesome-notes

Это корневая папка плагина, она имеет то же имя, что и имя, которое я ввел для «слага» в вопросах настройки.

/build

Это папка сборки. Он содержит все активы JavaScript и PHP, сгенерированные из /srcпапки. Они ставятся в очередь через основной wholesome-notes.phpфайл загрузчика.

/build/index.assets.php

Этот PHP-файл создается автоматически при /srcкомпиляции папки. Он содержит массив всех приличий JavaScript редактора WordPress (Gutenberg), используемых вашим плагином. Он ставится в очередь через основной wholesome-notes.phpфайл загрузчика.

/build/index.js

Это основной скомпилированный файл JavaScript, который ставится в очередь через основной wholesome-notes.phpфайл загрузчика.

/build/index.js.map

Этот файл создается только тогда, когда вы компилируете активы для режима разработки (IE, который вы запускаете, npm startа не npm run buildкогда вы компилируете свои активы. Это полезный файл для отладчиков JavaScript, помогающий идентифицировать имена файлов и номера строк в случае возникновения ошибок.

/node_modules

Это папка, в которую установлены все зависимости JavaScript для вашего плагина.

/src

Это папка, содержащая все нескомпилированные ресурсы для вашего плагина.

/src/index.js

Это основной нескомпилированный файл JavaScript для вашего блока редактора WordPress (Gutenberg). Изначально он содержит всю логику блока.

/.editorconfig

Этот файл содержит полезные пресеты для вашей IDE (интегрированной среды разработки), например Visual Studio Code.

/.gitignore

Этот файл указывает git игнорировать определенные файлы при фиксации в репозитории git (например, GitHub).

/editor.css

Стили в этом файле выводятся только в редакторе, ставятся в очередь через основной wholesome-notes.phpфайл загрузчика.

/package.json

Этот файл содержит все зависимости npm для плагина и команды, которые вы можете запустить. Обратите внимание, что плагин использует wp-scripts( @wordpress/scripts) в качестве своей базы, поэтому изначально загруженные зависимости относятся к этому пакету.

/style.css

Стили в этом файле выводятся в редакторе и в интерфейсе сайта, они ставятся в очередь через основной wholesome-notes.phpфайл загрузчика.

/wholesome-notes.php

Это основной загрузочный файл для плагина. Его имя было задано с помощью «slug», который мы ввели в скрипт начальной настройки. Он ставит в очередь все активы JavaScript, необходимые для плагина.

Изучение плагина

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

Создать сценарий блокировки — внешний интерфейс по умолчанию

Сценарий создания блока — серверная часть по умолчанию

Как видите, блок предоставляет нам некоторый базовый вывод, который мы можем легко изменить для реализации нашего собственного блока.

Блокировка CSS

Как видно из скриншотов, пример кода editor.cssреализует красную рамку в редакторе, тогда как примеры стилей styles.cssприменяются как к интерфейсу, так и к серверу.

Блокировать JavaScript

Точкой входа для настройки вновь созданного блока является /src/index.jsфайл.

В этом файле есть много встроенной документации, объясняющей, почему импортируются определенные функции, такие как registerBlockTypeрегистрация блока и __поддержка перевода текста i18n.

Создать блок index.js Встроенные комментарии

Это также дает вам очень простой вывод для функций editи save, которые передаются в регистрацию блока.

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

Создайте блок index.js, отредактируйте и сохраните

Построение блока

Согласно документации по созданию блока npm, вы можете использовать несколько команд в своем терминале (из корневой папки вашего плагина), чтобы выполнять такие действия, как проверка качества кода или обновление пакетов.

Основные команды, которые вам понадобятся для сборки блока, будут заключаться npm startв компиляции вашего плагина для разработки и npm run buildкомпиляции окончательной версии.

wp-scripts(из @wordpress/scriptsпакета npm) является основной зависимостью для вашего плагина. Эта зависимость абстрагирует все инструменты для вашего блока, поэтому вы можете просто сосредоточиться на создании JavaScript.

За кулисами wp-scriptsиспользуется webpackдля компиляции всех ваших активов в /build/index.jsфайл.

Вы можете прочитать больше wp-scriptsв Руководстве по редактору блоков, а также узнать больше о настройке сборки веб-пакета в разделе «Настройка сборки JavaScript» Руководства.

Расширение настройки веб-пакета Create Block

Кодовая база для вашего блока может охватывать несколько файлов или даже иметь несколько подблоков или содержать сложные стили. В такие моменты вы можете захотеть расширить настройку веб-пакета, встроенную в wp-scripts.

Для получения дополнительной информации см. мою статью о том, как расширить wp-scriptsконфигурацию веб -пакета, или ознакомьтесь с разделом «Сценарии пакетов» Руководства по редактору блоков для получения инструкций.