Створення власних мета-блоків за допомогою редактора блоків WordPress (Gutenberg)

Перше запитання, яке у вас може виникнути, це «навіщо мені створювати користувацькі мета-поля за допомогою редактора блоків (Gutenberg)?», ви все ще можете реалізувати мета-поля за допомогою PHP і додавати елементи керування до блоку, публікації чи навіть спеціальної бічної панелі. у Гутенбергу.

Є кілька причин, чому ви можете це зробити, зокрема:

• Деякі блоки мають складні параметри, і перегляд мета-поля в режимі редагування може полегшити його використання для клієнта
• Оскільки ви можете змінити певний аспект макета публікації, наприклад заголовок. Ви можете приховати поле заголовка допису та замінити його власним мета-полем у верхній частині сторінки, а також мати можливість контролювати всі мета допису, які до нього стосуються
• Тому що ви можете використовувати шаблони блоків, щоб розташувати користувацькі метаблоки, де вам подобається, щоб вони мали більше сенсу в контексті
• Оскільки ви можете застосувати ці знання до інших аспектів розробки блокового редактора (Gutenberg).

У цьому посібнику ми збираємося розширити те, що ми вже створили в нашому посібнику Post Meta Fields. Ви можете використовувати атрибути блоку, однак через природу метабоксів ми будемо використовувати метаполя публікацій у цьому посібнику.

передумови

• Ознайомтеся зі створенням плагінів для WordPress Gutenberg
• Знайомі динамічні блоки та рендеринг на сервері
• Ознайомтеся з використанням мета-полів публікацій у WordPress Gutenberg

Оскільки ми продовжуємо посібник з мета-полів публікації, будемо вже використовувати register_metaдля створення нашого мета-поля публікації, переконавшись, що ми встановили show_in_restзначення true, а також встановили джерело нашого атрибута JavaScript metaі визначили мета-ключ.

Залишається лише реалізувати інтерфейс.

Відредагуйте /src/edit.jsфайл, замінивши @wordpress/componentsімпорт таким:

import { Panel, PanelBody, TextControl } from '@wordpress/components';

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

export default function Edit( { attributes, setAttributes }) {
    const { blockText } = attributes;
    return (<div { ...useBlockProps() }>
            <Panel>
                <PanelBody
                    title={ __( 'Example Meta Box', 'wholesome-plugin') }
                    icon="admin-plugins"
                >
                    <TextControl
                        label={ __( 'Example Meta', 'wholesome-plugin') }
                        help={ __( 'This is an example meta field.', 'wholesome-plugin') }
                        onChange={ (blockText) => setAttributes( { blockText }) }
                          value={ blockText }
                    />
                </PanelBody>
            </Panel>
        </div>
    );
}

Тепер у нас є Panel, a PanelBodyі a TextControl. Зауважте, що я додав параметр admin-pluginsto the icon для того PanelBody, щоб він відповідав піктограмі плагіна.

Застосуйте стилі

Замініть SCSS /src/editor.scssна таке:

.wp-block.wp-block-wholesomecode-wholesome-plugin {
    color: unset;
    background: unset;
    padding: unset;

    p {
        all: unset;
    }
}

Якщо ви використовуєте спеціальний метабокс, створений у Gutenberg, я б рекомендував розмістити його за допомогою шаблону блоку, однак ви можете вставити його звичайним способом:

Використання спеціального мета-бокса Gutenberg

Після того, як ви створили метабокс, немає обмежень на те, що ви можете додати в нього. Вам доступна вся бібліотека компонентів WordPress Gutenberg React, а також величезна бібліотека зовнішніх компонентів React (перегляньте мою статтю про додавання select2 у ваш проект ).

Наступний приклад є вершиною айсберга того, чого ви можете досягти:

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

Щоб створити це, ось код, який вам потрібен:

Зареєструйте мета-поля публікації в PHP

Відкрийте кореневий PHP-файл плагіна (в даному випадку wholesome-plugin.php) і оновіть register_metaдоданий нами в попередньому посібнику наступне:

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_example_select',
        [
            'auth_callback' => '__return_true',
            'default'       => '',
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );

    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_example_text',
        [
            'auth_callback' => '__return_true',
            'default'       => '',
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );

    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_example_text_2',
        [
            'auth_callback' => '__return_true',
            'default'       => '',
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );

    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_example_text_3',
        [
            'auth_callback' => '__return_true',
            'default'       => '',
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );

    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_example_toggle',
        [
            'auth_callback' => '__return_true',
            'default'       => false,
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'boolean',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Оновіть атрибути JavaScript

Відкрийте /src/index.jsта замініть атрибути, які ми додали в попередньому посібнику, на такі:

attributes: {
    exampleSelect: {
        meta: '_wholesomecode_wholesome_plugin_example_select',
        source: 'meta',
    },
    exampleText: {
        meta: '_wholesomecode_wholesome_plugin_example_text',
        source: 'meta',
    },
    exampleText2: {
        meta: '_wholesomecode_wholesome_plugin_example_text_2',
        source: 'meta',
    },
    exampleText3: {
        meta: '_wholesomecode_wholesome_plugin_example_text_3',
        source: 'meta',
    },
    exampleToggle: {
        meta: '_wholesomecode_wholesome_plugin_example_toggle',
        source: 'meta',
    },
},

Імпортуйте компоненти

Відредагуйте /src/edit.jsфайл, замінивши @wordpress/componentsімпорт таким:

import {
    Panel,
    PanelBody,
    PanelRow,
    SelectControl,
    TextControl,
    ToggleControl,
} from '@wordpress/components';

Оновіть метод редагування

Продовжуйте редагувати /src/edit.jsфайл, замінивши Editблок коду таким:

export default function Edit( { attributes, setAttributes }) {
    const {
        exampleSelect,
        exampleText,
        exampleText2,
        exampleText3,
        exampleToggle,
    } = attributes;

    return (<div { ...useBlockProps() }>
            <Panel>
                <PanelBody
                    title={ __( 'Example Meta Box', 'wholesome-plugin') }
                    icon="admin-plugins"
                >

                        <SelectControl
                            help={ __( 'An example dropdown field.', 'wholesome-plugin') }
                            label={ __( 'Example Select','wholesome-plugin') }
                            onChange={ (exampleSelect) => setAttributes( { exampleSelect }) }
                            options={ [
                                {
                                    label: __( 'Please Select...', 'wholesome-plugin' ),
                                    value: '',
                                },
                                {
                                    label: __( 'Option 1', 'wholesome-plugin' ),
                                    value: 'option-1',
                                },
                                {
                                    label: __( 'Option 2', 'wholesome-plugin' ),
                                    value: 'option-2',
                                },
                            ] }
                            value={ exampleSelect }
                        />

                        <TextControl
                            help={ __( 'This is an example text field.', 'wholesome-plugin') }
                            label={ __( 'Example Text', 'wholesome-plugin') }
                            onChange={ (exampleText) => setAttributes( { exampleText }) }
                            value={ exampleText }
                        />

                    <PanelRow>
                        <TextControl
                            help={ __( 'Use PanelRow to place controls inline.', 'wholesome-plugin') }
                            label={ __( 'Example Text 2', 'wholesome-plugin') }
                            onChange={ (exampleText2) => setAttributes( { exampleText2 }) }
                            value={ exampleText2 }
                        />
                        <TextControl
                            help={ __( 'This control is inline.', 'wholesome-plugin') }
                            label={ __( 'Example Text 3', 'wholesome-plugin') }
                            onChange={ (exampleText3) => setAttributes( { exampleText3 }) }
                            value={ exampleText3 }
                        />
                    </PanelRow>

                        <ToggleControl
                            checked={ exampleToggle }
                            help={ __( 'An example toggle.', 'wholesome-plugin') }
                            label={ __( 'Example Toggle', 'wholesome-plugin') }
                            onChange={ (exampleToggle) => setAttributes( { exampleToggle }) }
                        />

                </PanelBody>
            </Panel>
        </div>
    );
}

Додайте SCSS

Нарешті відкрийте /src/editor.scssфайл і замініть його вміст наступним:

.wp-block.wp-block-wholesomecode-wholesome-plugin {
    color: unset;
    background: unset;
    padding: unset;

    .components-base-control {
        margin-bottom: 1rem;

        select {
            height: 2rem;
            min-height: 2rem;
        }
    }

    p {
        all: unset;
    }
}

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