Додайте точки входу до сценарію створення блоку WordPress

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

Іноді потрібно додати інші точки входу, наприклад, ви можете використовувати блоки редактора блоків WordPress (Gutenberg) в іншому місці редактора, наприклад, на сторінці налаштувань або в настроювачі.

Цей посібник допоможе вам розширити WordPress Create Block Script webpack.config, щоб ви могли додати ці додаткові точки входу.

передумови

• Ознайомтеся зі створенням плагінів для WordPress Gutenberg за допомогою сценарію create block

Створіть свої файли

Дотримуючись посібника зі створення сценарію блоку, ми збираємося створити кілька файлів у нашому рішенні:

Створити/src/admin.js

Цей файл буде основною точкою входу для будь-якого React, який ми хочемо додати до екрана адміністратора WordPress (наприклад, якщо ми хочемо створити сторінку параметрів для керування нашими налаштуваннями за допомогою компонентів Gutenberg) .

Створіть файл /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' ),.

Решта коду просто повідомляє webpack використовувати налаштування, які вже є (наприклад ...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

• Подивіться на створення сторінки параметрів і налаштувань за допомогою компонентів Gutenberg