К счастью, у команды разработчиков WordPress есть удобный npm скрипт для создания блочного плагина, который создает начальный блок, чтобы вы могли быстро приступить к работе.

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

Предпосылки

Node должен быть установлен на вашем компьютере, чтобы вы могли использовать npmкоманду (что означает Node Package Manager)
Установка WordPress
Редактор кода
Доступ к терминалу

Создайте свой плагин

После того, как вы установили узел на свой компьютер, у вас должен быть доступ к npmкоманде в вашем терминале.

Откройте свой терминал и убедитесь, что вы cdуказали (Changed Directory) папку плагинов в вашей установке WordPress (например, cd wp-content/plugins).

После этого выполните следующую команду:

npm init @wordpress/block

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

Использование терминала для запуска сценария создания

Вопросы по конфигурации

Скрипт задаст следующие вопросы, вот мои примеры ответов:

Слаг блока, используемый для идентификации (а также имя плагина и выходной папки) — я хочу, чтобы мой блок назывался Wholesome Plugin, поэтому я ввел wholesome-plugin.
Внутреннее пространство имен для имени блока (что-то уникальное для ваших продуктов) — поскольку оно должно быть уникальным для всех моих продуктов, которые я ввел wholesomecode, так как это название моей компании.
Отображаемый заголовок для вашего блока — я ввел название плагина, Wholesome Plugin.
Краткое описание вашего блока (необязательно) — я ввел «An example plugin to demonstrate the create-block-script».
Dashicon для облегчения идентификации вашего блока (необязательно) — быстро открыв ресурс WordPress Dashicons, я выбрал admin-pluginsего, так как он имеет значок плагина. При этом не забудьте опустить dashicon- из префикса dashicon.
Название категории, чтобы помочь пользователям просматривать и находить ваш блок (используйте клавиши со стрелками) — я выбрал design. Хотя пользовательская категория, вероятно, подошла бы лучше.
Имя автора плагина (необязательно). Несколько авторов могут быть перечислены через запятую — я ввел wholesomecode.
Краткое название лицензии плагина (необязательно) — я нажал Enter, чтобы принять GPL v2.0 или более позднюю версию.
Ссылка на полный текст лицензии (необязательно) — я нажал клавишу ввода, чтобы вставить URL-адрес лицензии GPL v2.0.
Текущий номер версии плагина — я нажал Enter, чтобы вставить 0.1.0.

Вопросы по настройке скрипта

После этого скрипт завершит работу.

Что сейчас произошло?

Во время работы скрипта происходит несколько вещей, а именно:

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

Команды сборки

Мы рассмотрим их подробнее в разделе изучения плагинов.

Использование плагина

Прежде чем вы сможете использовать плагин, вам необходимо его активировать. Вы можете сделать это, выбрав Pluginsв меню администратора WordPress, а затем выбрав activateпод названием плагина.

Активировать плагин

Теперь вам нужно отредактировать запись в WordPress и вставить плагин с помощью редактора Gutenberg.

Вставка блока в пост

Обратите внимание, что по умолчанию плагин мало что делает, он просто создает блок. Однако он предоставляет основу для создания собственного плагина.

Просмотр блока во внешнем интерфейсе

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

Блок на переднем конце

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

Вся цель Create Block Script состоит в том, чтобы вы создали свой собственный плагин. Давайте рассмотрим файлы, которые он сгенерировал более подробно:

Сгенерированные файлы

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

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

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

**/build/index.css**— Это файл CSS редактора, который ставится в очередь через основной wholesome-plugin.phpфайл загрузчика.

**/build/index.js**— Это основной скомпилированный файл JavaScript, который ставится в очередь через основной wholesome-plugin.phpфайл загрузчика.

**/build/style-index.css**— Это внешний CSS-файл, который ставится в очередь через основной wholesome-plugin.phpфайл загрузчика.

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

**/node_modules**— Это папка, в которую установлены все зависимости JavaScript для вашего плагина.
**/src**— Это папка, содержащая все нескомпилированные ресурсы для вашего плагина.
**/src/edit.js**— Это функция редактирования блока, которая управляет тем, как блок отображается в редакторе блоков, когда он находится в режиме редактирования.
**/src/editor.scss**— Это нескомпилированный SCSS для редактора, он скомпилируется в /build/index.css.
**/src/index.js**— Это основной нескомпилированный файл JavaScript для вашего блока WordPress Editor (Gutenberg). Он регистрирует блок и содержит настройки по умолчанию.
**/src/save.js**— Это функция сохранения блока, которая управляет разметкой блока при его сохранении.
**/src/style.scss**— Это нескомпилированный SCSS для интерфейса, он скомпилируется в /build/style-index.css.
**/.editorconfig**— Этот файл содержит полезные пресеты для вашей IDE (интегрированной среды разработки), например Visual Studio Code.
**/.gitignore**— Этот файл указывает git игнорировать определенные файлы при фиксации в репозиторий git (например, GitHub).
**/editor.css**— Стили в этом файле выводятся только в редакторе, ставится в очередь через основной wholesome-notes.phpфайл загрузчика.
**/block.json**— Этот файл определяет плагин, поэтому он может быть обнаружен библиотекой блоков WordPress. Если вы вносите изменения в плагин, убедитесь, что этот файл обновлен. В более новых версиях скрипта NPM этот файл используется вместо /src/index.jsрегистрации вашего блока.
**/package.json**— Этот файл содержит все зависимости npm для плагина и команды, которые вы можете запустить. Обратите внимание, что плагин использует wp-scripts( @wordpress/scripts) в качестве своей базы, поэтому изначально загруженные зависимости относятся к этому пакету.
**/readme.txt**— Этот файл представляет собой файл readme репозитория плагинов WordPress, который требуется, если вы хотите, чтобы блок был указан в репозитории плагинов.
**/wholesome-plugin.php**— Это основной файл-загрузчик для плагина. Его имя было задано с помощью «slug», который мы ввели в скрипт начальной настройки. Он ставит в очередь все активы JavaScript, необходимые для плагина.

Изучение команд сборки

Прежде чем мы сможем запустить наши команды сборки, нам нужно убедиться, что мы находимся в папке плагина. В этом примере мы запустим cd wholesome-pluginв терминале, чтобы изменить каталог на нашу папку с плагинами.

Затем мы можем запустить следующие команды:

**npm start**— Запускает сборку для разработки. Если вы вносите изменения в плагин, вы должны сделать это, чтобы изменения отобразились (вам, вероятно, также потребуется обновить браузер).
**npm run build**— Создает код для производства. Сделайте это, если вы создаете релизную версию плагина.
**npm run format:js**— Автоматически форматирует файлы JavaScript, используя лучшие практики.
**npm run lint:css**— Линтс (ищет ошибки) в файлах CSS.
**npm run lint:js**— Линтс (ищет ошибки) в файлах JavaScript.
**npm run packages-update**— Обновляет пакеты WordPress до последней версии.

Мы будем использовать один или несколько из них при изменении плагина.

Изменение плагина

Начнем с того, что сделаем наш блок редактируемым.

Добавить атрибуты к`/src/index.js`

Откройте /src/index.jsв своем редакторе и добавьте следующее внутри registerBlockTypeфункции в разделе apiVersion:

attributes: {
  blockText: {
    default: 'Wholesome Plugin – hello from the editor!',
    type: 'string',
  },
},

Это даст нам место для хранения данных в нашем плагине, называемом blockTextдоступным через attributesсвойство (prop). Обратите внимание, что мы дали ему по умолчанию исходный текст, сгенерированный сценарием создания плагина.

Добавить RichText в`/src/edit.js`

Откройте /src/edit.jsв своем редакторе и замените импорт на useBlockPropsследующее:

import { RichText, useBlockProps } from '@wordpress/block-editor';

Это позволит нам использовать компонент RichText в нашем методе редактирования рендеринга.

Затем измените всю функцию редактирования на следующее:

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps() }>
            <RichText
                className="block__text"
                keepPlaceholderOnFocus
                onChange={ (blockText) => setAttributes( { blockText }) }
                placeholder={ __( 'Block Text', 'wholesome-plugin') }
                tagName="span"
                value={ blockText }
            />
        </p>
    );
}

Это устанавливает значение RichTextкомпонента таким же, как значение, хранящееся в blockTextатрибуте, а onChangeсвойство устанавливает blockTextатрибут на то, что когда-либо было введено в RichTextкомпонент.

Выведите атрибуты в`/src/save.js`

Откройте /src/save.jsв своем редакторе и замените saveфункцию следующим:

export default function save( { attributes }) {
    const { blockText } = attributes;
    return (<p { ...useBlockProps.save() }>
            { blockText }
        </p>
    );
}

Это просто выводит значение blockTextв абзац.

Компиляция плагина

Откройте терминал, убедитесь, что вы находитесь в корневом каталоге вашего плагина, и выполните следующую команду:

Скрипт будет скомпилирован. Если у вас есть какие-либо ошибки, терминал должен сообщить вам, что они собой представляют.

Сборка плагина

Вставка плагина

Убедитесь, что вы обновили свой пост. Предыдущая версия блока теперь может быть сломана, это нормально, просто удалите ее и вставьте новую.

Вставьте блок, используя символ плюса в левом верхнем углу редактора, и когда он будет вставлен, щелкните его текст. Вам следует. теперь можно редактировать текст.

Вставка редактируемого блока

Просмотр плагина

Сохраните сообщение и просмотрите его в интерфейсе веб-сайта, текст, который вы изменили, должен отображаться вместо исходного текста.

Редактируемый блок в интерфейсе сайта

Если вы хотите, чтобы ваши блоки отображались в пользовательской категории блоков, просто добавьте следующий код в корень вашего плагина (в данном случае wholesome-plugin.php:

function wholesomecode_wholesome_plugin_block_categories( $categories) {
    return array_merge(
        $categories,
        [
            [
                'slug'  => 'wholesome-blocks',
                'title' => __( 'Wholesome Blocks', 'wholesome-boilerplate' ),
            ],
        ]
    );
}
add_action( 'block_categories', 'wholesomecode_wholesome_plugin_block_categories', 10, 2 );

Это зарегистрирует пользовательскую категорию блока в вашем блоке вставки.

Затем все, что вам нужно сделать, это настроить categoryаргумент registerBlockTypeфункции так /src/index.js, чтобы он ссылался на вашу категорию блоков, и перекомпилировать:


category: 'wholesome-blocks',

Теперь, когда вы придете, чтобы вставить свой блок, вы найдете его во вновь созданной категории блоков:

Пользовательская категория блоков в инструменте вставки блоков

Взгляните на использование PHP для визуализации вашего блока с помощью динамических блоков .
Посмотрите на использование метаполей сообщений в качестве атрибутов в вашем блоке.
Добавьте боковую панель блока с помощью InspectorControls
Расширьте свой плагин, добавив дополнительные точки входа в файл webpack.config.

Источник записи: wholesomecode.ltd