Вставить кнопку в панель инструментов редактора блоков (заголовок)

Вопрос или проблема

Ответ или решение

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

Шаг 1: Подготовка окружения

Убедитесь, что вы создали базовую структуру вашего плагина. Ваш файл PHP должен включать все необходимые скрипты и стили. Например:

<?php
/**
 * Plugin Name: Custom Toolbar Button
 * Description: Плагин для добавления кнопки в панель инструментов редактора блоков.
 * Version: 1.0
 * Author: Ваше Имя
 */

// Подключение скриптов
function ct_register_scripts() {
    wp_enqueue_script(
        'ct-toolbar-button',
        plugin_dir_url(__FILE__) . 'index.js',
        array('wp-blocks', 'wp-element', 'wp-editor', 'wp-components'),
        true
    );
}
add_action('enqueue_block_editor_assets', 'ct_register_scripts');

Шаг 2: Создание файла JavaScript

Теперь нам нужно сосредоточиться на файле index.js, который будет содержать логику для добавления кнопки. В WordPress мы используем функциона сервиса wp.data.subscribe, чтобы следить за состоянием редактора и создавать кнопку.

Вот пример кода для вашего index.js:

const { registerPlugin } = wp.plugins;
const { Toolbar } = wp.editPost;
const { Button } = wp.components;

const CustomButton = () => {
    const handleClick = () => {
        // Логика обработки нажатия на кнопку
        alert('Кнопка нажата!');
    };

    return (
        <Button
            className="components-toolbar__control"
            label="Нажмите меня"
            onClick={handleClick}
        >
            Нажмите меня
        </Button>
    );
};

// Регистрируем плагин и добавляем кнопку в панель инструментов
registerPlugin('custom-toolbar-button', {
    render: () => (
        <Toolbar>
            <CustomButton />
        </Toolbar>
    ),
});

Шаг 3: Тестирование плагина

После того, как вы написали код, активируйте ваш плагин в интерфейсе администрирования WordPress. Проверьте, отображается ли кнопка в верхней панели редактора блоков (как показано на вашем изображении).

Шаг 4: Настройка и стилизация

Если вы хотите, чтобы кнопка выглядела по-другому, вы можете добавить соответствующие стили в ваш CSS. Создайте файл style.css и подключите его в вашем PHP файле:

function ct_register_styles() {
    wp_enqueue_style(
        'ct-toolbar-style',
        plugin_dir_url(__FILE__) . 'style.css'
    );
}
add_action('enqueue_block_editor_assets', 'ct_register_styles');

Заключение

Создание кнопки в панели инструментов редактора блоков WordPress — задача, требующая некоторой работы, но вполне осуществима. С помощью описанных выше шагов вы сможете добавить свою кнопку и настроить ее функциональность.

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