Как зарегистрировать два блока в одном плагине

Я начинаю разрабатывать блоки Gutenberg. После

npx @wordpress/create-block gutenpride

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

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

ОБНОВЛЕНИЕ: Я обнаружил, что могу найти ответы по этой теме, искат по запросу “мультиблок плагин” (ранее я не мог ничего найти). Например, этот вопрос. Таким образом, этот вопрос может быть возможным дубликатом. Я все еще исследую.

1. Добавьте подпапку в your-plugin/src с именем блока
2. Поместите все файлы src в эту папку
3. Повторите 1 и 2 для других блоков, которые вы хотите добавить.

На данный момент папка src выглядит так:

Будьте внимательны, редактируя каждый block.json, чтобы дать им название и т. д.

4. Замените регистрацию единственного блока на мультиблок в файле your-plugin.php

function create_block_your_plugin_block_init() {
    register_block_type( __DIR__ . '/build/block-1' );
    register_block_type( __DIR__ . '/build/block-2' );
}
add_action( 'init', 'create_block_your_plugin_block_init' );

5. При желании вы можете переименовать папку src в любое имя, какое вам понравится, например, blocks. В этом случае добавьте флаг --webpack-src-dir=blocks с новым именем в стартовый скрипт package.json:

"scripts": {
    "build": "wp-scripts build",
    "format": "wp-scripts format",
    "lint:css": "wp-scripts lint-style",
    "lint:js": "wp-scripts lint-js",
    "packages-update": "wp-scripts packages-update",
    "plugin-zip": "wp-scripts plugin-zip",
    "start": "wp-scripts start --webpack-src-dir=blocks"
},

6. Запустите npm start, чтобы создать папку build

Это все.

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

Я начал с копирования всего кода для каждого блока из ./src в директории /blocks/block-1 и /blocks/block-2.

Изменил файл plugin_name.php и package.json в директории плагина.

Изменил имена в block.json, чтобы отразить название как plugin_name/block-1 и plugin_name/block-2. Для стилей wp-block-plugin-name-block-1 и wp-block-plugin-name-block-2 в стилях в edit.js, save.js и editor.scss и styles.scss. для каждого блока.

В файле plugin_name.php включил для каждого блока внутри действия ‘init’, это делает блоки видимыми в директории блоков:

function plugin_name_block_init()
{
register_block_type( __DIR__ . '/build/block-1' );
register_block_type( __DIR__ . '/build/block-2' );
}
add_action( 'init','plugin_name_block_init');

package.json был изменен, чтобы запускать или строить все блоки. Таким образом, с этого момента скрипты ищут каждый block.json и index.js внутри директорий блоков, расположенных внутри директории ‘blocks’. Внутри ‘scripts’:

"build": "wp-scripts build --webpack-src-dir=blocks",
"start": "wp-scripts start --webpack-src-dir=blocks",

И в заключение, я внес изменения в названия стилей для каждого файла editor.scss и editor.scss, а также edit.js и save.js для каждого блока.

Теперь это работает для меня в разработке (npm start) или сборке (npm run build). Изменяет оба блока одновременно.

Я думаю, что это можно изменить, чтобы каждый раз собирать только один блок:

"start:block-1": "wp-scripts start --webpack-src-dir=blocks/block-1",

Работает, если вы вызываете это: npm run start:block-1 (не npm start:block-1)

Теперь на developer.wordpress.org есть специальный учебник по мультиблочным плагинам. Смотрите здесь: https://developer.wordpress.org/news/2024/09/17/how-to-build-a-multi-block-plugin/

Самые важные детали: когда вы начинаете свой проект, используйте wp-multi-block, а когда создаете отдельные блоки, используйте опцию --no-plugin.