Добавьте точки входа в скрипт WordPress Create Block

Когда вы впервые создаете блок с помощью скрипта создания блока WordPress, npm init @wordpress/blockон предоставляет вам точку входа в /src/index.js, которую вы можете использовать для компиляции всех ваших ресурсов и стилей на основе блоков.

Иногда вы хотите добавить другие точки входа, например, вы можете использовать блоки WordPress Block Editor (Gutenberg) в другом месте редактора, например, на странице настроек или в настройщике.

Это руководство поможет вам расширить скрипт WordPress Create Block Script webpack.config, чтобы вы могли добавлять эти дополнительные точки входа.

Предпосылки

• Будьте знакомы с созданием плагинов для WordPress Gutenberg с помощью скрипта создания блока.

Создайте свои файлы

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

Создавать/src/admin.js

Этот файл будет основной точкой входа для любого React, который мы хотим добавить на экран администратора WordPress (например, если мы хотим создать страницу параметров для управления нашими настройками с помощью компонентов Gutenberg Components.

Создайте файл /src/admin.jsи вставьте в него следующий код:

import { __ } from '@wordpress/i18n';
import api from '@wordpress/api';

import './admin.scss';

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

Однако он импортирует /src/admin.scssфайл, который будет скомпилирован и будет содержать все наши пользовательские CSS для администратора WordPress.

Создавать/src/admin.scss

Создайте файл /src/admin.scssи добавьте тестовый SCSS:

body {
  background: pink;
}

Опять же, этот код не служит никакой другой цели, кроме проверки компилируемости SCSS.

Создавать/webpack.config.js

Создайте файл в корневом каталоге вашего плагина с именем webpack.config.js, мы вскоре рассмотрим, что нужно поместить в этот файл.

Отредактируйте корневой PHP-файл плагина.

Если вы следовали предыдущему руководству, этот плагин будет называться wholesome-plugin.php.

В этом файле мы хотим прописать скрипты для админки, которые будут выводиться нашей конфигурацией webpack. Добавьте следующую функцию в конец этого файла:

function wholesomecode_wholesome_plugin_admin_scripts() {
    $dir = __DIR__;

    $script_asset_path = "$dir/build/admin.asset.php";
    if (! file_exists( $script_asset_path)) {
        throw new Error(
            'You need to run `npm start` or `npm run build` for the "wholesomecode/wholesome-plugin" block first.'
        );
    }
    $admin_js     = 'build/admin.js';
    $script_asset = require( $script_asset_path );
    wp_register_script(
        'wholesomecode-wholesome-plugin-admin-editor',
        plugins_url( $admin_js, __FILE__ ),
        $script_asset['dependencies'],
        $script_asset['version']
    );
    wp_set_script_translations( 'wholesomecode-wholesome-plugin-block-editor', 'wholesome-plugin' );

    $admin_css = 'build/admin.css';
    wp_enqueue_style(
        'wholesomecode-wholesome-plugin-admin',
        plugins_url( $admin_css, __FILE__ ),
        ['wp-components'],
        filemtime( "$dir/$admin_css") );
}
add_action( 'admin_enqueue_scripts', 'wholesomecode_wholesome_plugin_admin_scripts', 10 );

Мы в значительной степени скопировали код из предыдущего блока постановки в очередь, но сделали его соответствующим нашим ожидаемым выходным файлам /build/admin.jsи /build/admin.css. Обратите внимание, что мы также загружаем специально сгенерированный /build/admin.asset.phpфайл, который автоматически добавит все зависимости редактора блоков WordPress (Gutenberg) для нашего скрипта администратора.

ИзменитьwebPack.config

На шаге 2 мы создали файл webpack.config.js, в этот файл добавляем следующий код:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const path = require( 'path' );

module.exports = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry,
        admin: path.resolve( process.cwd(), 'src', 'admin.js' ),
    }
};

Этот код импортирует webpack.configиз @wordpress/scripts. Это код, который запускается каждый раз, когда вы запускаете npm startсвое решение.

Все, что мы делаем, это берем эту конфигурацию и добавляем еще одну точку входа со строкой admin: path.resolve( process.cwd(), 'src', 'admin.js' ),.

Остальная часть кода просто указывает веб-пакету использовать уже имеющиеся настройки (например ...defautConfig,, ...defaultConfig.entry).

Скомпилируйте код

Скомпилируйте ваш плагин с помощью npm startкоманды, и давайте посмотрим, что произойдет:

Компиляция кода с новой точкой входа

Теперь скрипт генерирует для нас несколько новых файлов:

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

• /build/admin.css— Это файл CSS администратора, и он ставится в очередь через основной wholesome-plugin.phpфайл загрузчика с помощью дополнительной функции, которую мы добавили.

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

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

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

• Посмотрите на использование метаполей сообщений в блоках Гутенберга.

• Посмотрите на использование параметров и настроек в блоках Гутенберга.

• Посмотрите на создание пользовательских мета-боксов в Гутенберге.

• Посмотрите на создание страницы параметров и настроек с использованием компонентов Gutenberg .