Головна сторінка/Знання/WordPress/Детальна інформація про зміст.

Повний посібник з розробки та практичних навичок використання блок-редактора Gutenberg у WordPress

Читання за 3 хвилини.
2026-03-17
2026-06-04
2,352
Я заробляю комісію, коли ви робите покупки за посиланнями нижче, без додаткових витрат для вас.

Блоковий редактор Gutenberg у WordPress кардинально змінив підхід до створення контенту, надаючи редакторам повну гнучкість та контроль над структурою сторінок. Для розробників це означає появу абсолютно нового підходу до програмування, заснованого на технологіях React та сучасному JavaScript. У цій статті ми детально розглянемо, як створювати власні блоки з нуля, а також як розробляти динамічні блоки та застосовувати їхні варіанти – все це для того, щоб надати вам повний практичний посібник з розробки.

Розуміння основної архітектури редактора блоків

Редактор Гутенберга не є єдиною, цілісною програмою, а складається з низки незалежних пакетів (packages). Розуміння його архітектури є основою для ефективного розроблення.

Розділення редактора від шару даних

Інтерфейс редактора сам по собі є відокремленим від шару даних WordPress. Це основна особливість цього редактора. @wordpress/editor Пакет надає компоненти інтерфейсу користувача (UI) для редактора. @wordpress/data Пакет реалізує механізм управління станом, схожий на Redux. Таке розділення обов’язків дозволяє розробникам зосередитися на візуальному представленні блоків та їхній логіці взаємодії, а автоматизоване зберігання даних здійснюється за допомогою вбудованих механізмів WordPress.

Рекомендуємо до прочитання. Оволодіння спеціальними типами статей у WordPress: повний практичний посібник від створення до публікації。

Реєстрація блоків та їх життєвий цикл

Кожен блок має бути перевірений (або схвалений) для подальшого використання. registerBlockType Функція реєструється. Ця функція приймає два параметри: унікальне ім’я блоку (наприклад… my-plugin/my-custom-blockОб’єкт, який містить усю конфігураційну інформацію блоку.
Після реєстрації блоки проходять цикл життя, що включає ініціалізацію, рендеринг, редагування та збереження даних. Розробники здебільшого впливають на цей процес, визначаючи відповідні параметри та правила поведін edit 和 save Дві ключові функції для керування відображенням блоків у редакторі та на передньому кінці (в браузері).

UltaHost – хостинг для сайтів, побудованих на платформі WordPress
Гарантія повернення грошей протягом 30 днів, необмежена пропускна здатність мережі та доступ до баз даних, безкоштовний захист від DDoS-атак; знижка 50% при покупці на термін 3 роки (варіанти об’ємів трафіку: 4 ТБ/5
Лоґотип UltaHost. сторінка доступу

Створіть свій перший власний блок з нуля.

Ми створимо простий блок “Підкреслені попередження”, який дозволить користувачам додавати вікна попереджень із фоновим кольором та заголовком.

Налаштування розробчого середовища та базових файлів

По-перше, переконайтеся, що ваша розробна середовище готова до використання. Вам знадобляться середовища Node.js та npm. Створіть у каталозі плагінів нову папку для плагіна, наприклад… my-custom-blocksУ цьому папці створіть наступні основні файли:
- my-custom-blocks.php (Головний файл плагіна)
- package.json (Використовується для керування залежностями Node.js та скриптами збірки проекту)
- src/ Каталог (для зберігання вихідного коду)
- build/ Каталог (каталог, створений інструментами збірки коду, який читається WordPress)

在 package.json У цьому розділі необхідно налаштувати скрипти для збірки проекту та включити їх до процесу розробки. @wordpress/scripts Пакети можуть значно спростити налаштування таких інструментів, як Webpack та Babel.

{
  "name": "my-custom-blocks",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0"
  }
}

У основному файлі плагіна my-custom-blocks.php У цьому випадку вам потрібно використати register_block_type Функція призначена для повідомлення системи WordPress про необхідні дії (наприклад, про те, звідки отримати дані). build Асети блоку завантаження каталогу.

Рекомендуємо до прочитання. Посібник з розробки тем для WordPress: створення високопродуктивних, кастомізованих тем з нуля。

<?php
/**
 * Plugin Name: My Custom Blocks
 */
function my_custom_blocks_register_block() {
    register_block_type( __DIR__ . '/build/highlight-box' );
}
add_action( 'init', 'my_custom_blocks_register_block' );

Напишіть вихідний код JavaScript для блоку.

在 src Створити папку у каталозі highlight-box/index.js Файл. Це головний вхідний файл блоку.

import { registerBlockType } from '@wordpress/blocks';
import { RichText, useBlockProps, InspectorControls, ColorPalette } from '@wordpress/block-editor';
import { PanelBody, PanelRow } from '@wordpress/components';

registerBlockType('my-custom-blocks/highlight-box', {
    title: '高亮提示框',
    icon: 'warning', // 从 Dashicons 中选择
    category: 'design',
    attributes: {
        title: {
            type: 'string',
            source: 'html',
            selector: '.highlight-title',
        },
        content: {
            type: 'string',
            source: 'html',
            selector: '.highlight-content',
        },
        backgroundColor: {
            type: 'string',
            default: '#fff3cd',
        },
    },
    edit: ({ attributes, setAttributes }) =&gt; {
        const blockProps = useBlockProps();
        const { title, content, backgroundColor } = attributes;

const onChangeTitle = (newTitle) =&gt; {
            setAttributes({ title: newTitle });
        };
        const onChangeContent = (newContent) =&gt; {
            setAttributes({ content: newContent });
        };
        const onChangeBackgroundColor = (newColor) =&gt; {
            setAttributes({ backgroundColor: newColor });
        };

return (
            <>
                <inspectorcontrols>
                    <panelbody title="Налаштування кольорів">
                        <panelrow>
                            <colorpalette
                                value="{backgroundColor}"
                                onchange="{onChangeBackgroundColor}"
                            />
                        </panelrow>
                    </panelbody>
                </inspectorcontrols>
                <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                    <richtext
                        tagname="h3"
                        classname="highlight-title"
                        onchange="{onChangeTitle}"
                        value="{title}"
                        placeholder="输入标题..."
                    />
                    <richtext
                        tagname="p"
                        classname="highlight-content"
                        onchange="{onChangeContent}"
                        value="{content}"
                        placeholder="输入提示内容..."
                    />
                </div>
            </>
        );
    },
    save: ({ attributes }) =&gt; {
        const blockProps = useBlockProps.save();
        const { title, content, backgroundColor } = attributes;
        return (
            <div {...blockprops} style="{{" backgroundcolor, padding: '20px', borderradius: '5px' }}>
                <RichText.Content tagName="h3" className="highlight-title" value={title} />
                <RichText.Content tagName="p" className="highlight-content" value={content} />
            </div>
        );
    },
});

Запуск npm start Режим розробки (спостереження за змінами у файлах) увімкнено. npm run build Виконайте процес створення продукту (production build). Після цього у редакторі WordPress ви знайдете цей блок “Висвітлювальне попередження” у категорії “Дизайн” та зможете використовувати його за потреби.

Розробка на вищому рівні: динамічні блоки та відображення на серверній стороні

Зміст статичних блоків зберігається безпосередньо у вмісті статті. Однак для блоків, які потребують оперативних даних (наприклад, списку останніх статей, інформації про користувачів), необхідно створювати динамічні блоки. Під час зберігання динамічних блоків зберігаються лише деякі атрибути (наприклад, кількість статей), а їх вміст на передньому кінці веб-сайту генерується дин

hosting.com Віртуальний хостинг
Висока продуктивність завдяки процесорам AMD EPYC, SSD-накопичувачам NVMe і технології LiteSpeed, цілодобова експертна підтримка, розширені заходи безпеки, включаючи SSL, грубу силу, захист від шкідливих програм і DDoS, економія до 73%.
ЛОГОТИП hosting.com сторінка доступу

Перетворити статичні блоки на динамічні блоки

По-перше, необхідно змінити налаштування реєстрації блоку. save Функція була змінена на таку, що повертає певне значення. nullІ додайте ще один. render_callback Атрибути.

// 在 registerBlockType 的配置对象中
save: () => {
    return null; // 动态区块不在内容中保存 HTML
},

Потім на стороні PHP оновіть код реєстрації та вкажіть функцію-повернення для рендерингу.

function my_custom_blocks_register_dynamic_block() {
    register_block_type( __DIR__ . '/build/latest-posts', [
        'render_callback' =&gt; 'my_custom_blocks_render_latest_posts'
    ] );
}
add_action( 'init', 'my_custom_blocks_register_dynamic_block' );

function my_custom_blocks_render_latest_posts( $attributes ) {
    $posts = get_posts( [
        'posts_per_page' =&gt; $attributes['numberOfPosts'] ?? 5,
    ] );

if ( empty( $posts ) ) {
        return '<p>Поки що немає жодних статей.</p>'$output = '<ul class="wp-block-my-custom-blocks-latest-posts">';
    foreach ( $posts as $post ) {
        $output .= sprintf(
            '<li><a href="/uk/%s/">%s</a></li>'php
    esc_url(get_permalink($post));
    esc_html(get_the_title($post));
    $output .= '';'</ul>';

return $output;
}

Використовуйте файли шаблонів блоків для рендерингу.

Для більш складних динамічних блоків рекомендується використовувати шаблонні файли. Створіть їх у каталозі плагінів. templates/latest-posts.phpПеренесіть вищезгадану логіку обробки даних у відповідний файл, а потім… render_callback Використовуйте його у Китаї. ob_get_clean 和 include Це дозволяє краще організувати завантаження шаблонів, що робить логіку PHP та HTML більш зрозумілою та простою у обслуговуванні.

Рекомендуємо до прочитання. Посібник з використання плагіна WooCommerce: повний гайд від встановлення та налаштування до управління магазином。

Сучасні теми та найкращі практики

Після оволодіння основами та можливостями динамічних блоків наступні теми допоможуть вам створювати ще потужніші та більш професійні рішення на основі цих блоків.

Реалізація функції варіантів блоків

Функція “Варіанти блоків” (Block Variations) дозволяє створювати кілька заздалегідь налаштованих стилів чи конфігурацій на основі одного базового блоку. Наприклад, для блоку підказок із підсвічуванням можна створити варіанти “Успіх”, “Попередження”, “Помилка” тощо.

Міжсерверний віртуальний хостинг
Віртуальний хостинг $2.50 USD на місяць, перший місяць $0.1 USD за промокодом tryinterserver, 461 скрипт хмарних додатків, встановлення в один клік.
ЛОГОТИП InterServer сторінка доступу 
import { registerBlockVariation } from '@wordpress/blocks';

registerBlockVariation('my-custom-blocks/highlight-box', [
    {
        name: 'success',
        title: '成功提示',
        icon: 'yes-alt',
        attributes: {
            title: '操作成功',
            backgroundColor: '#d4edda',
        },
        isDefault: false,
    },
    {
        name: 'error',
        title: '错误警告',
        icon: 'dismiss',
        attributes: {
            title: '发生错误',
            backgroundColor: '#f8d7da',
        },
    },
]);

Використання стилів блоків та стилів редактора

Використовуйте registerBlockStyle Функції дозволяють надавати блокам різних візуальних стилів, які користувачі можуть змінювати за допомогою бічної панелі. Крім того, можна використовувати… add_editor_style Можна гарантувати, що попередній перегляд в редакторі буде відповідати стилю сайту на передньому кінці (frontend), забезпечуючи таким чином досвід роботи „що бачиш, то й отримуєш“ („what you see is what you get“).

Оптимізація продуктивності та розділення коду

Зі збільшенням кількості блоків об’єднання всього JavaScript-коду в один файл може погіршити швидкість завантаження сайту. Це можна уникнути, використовуючи різні підходи до організації та компактування коду. @wordpress/dependency-extraction-webpack-pluginВже включено. @wordpress/scripts (II) Переконайтеся, що правильно задані зовнішні залежності від пакетів WordPress. Для великих плагінів можна розглянути варіанти їх завантаження за потребою або використання технологій розділення коду.

підсумок

Розробка редактора блоків Gutenberg – це процес поєднання сучасних технологій фронтенду (React, JSX, Webpack) з традиційними знаннями PHP для WordPress. Починаючи з розуміння його архітектури, ви опановуєте основні API для створення статичних блоків, потім переходите до обробки динамічних даних за допомогою динамічних блоків, а на завершення покращуєте користувацький досвід та ефективність розробки за допомогою таких передових функцій, як варіанти блоків та їх стилізація. Дотримуючись найкращих практик – чіткого організаційного плану коду, оптимізації продуктивності та належної підготовки до інтернаціоналізації – ви зможете створити потужні, легкі у обслуговуванні та зручні для користувачів власні блоки, повністю реалізувавши потенціал редактора Gutenberg.

Часті запитання

Чи обов’язково для розробки блоків типу „Гутенберг“ використовувати React?

Так, наразі офіційний спосіб розробки редактора Gutenberg повністю базується на фреймворку React. Хоча теоретично можна використовувати й інші фреймворки, усі компоненти, хаки та інструменти, які надає ядро WordPress, розроблені з урахуванням екосистеми React. Використання інших фреймворків призведе до значного збільшення складності та проблем з сумісністю.

Як додати до мого блоку власні контролі для бічної панелі?

Ви можете використовувати ці можливості. <code>InspectorControls</code> Компоненти. У блоках… edit У функції потрібно повернути цей елемент разом із основним змістом прев’ю. <code>InspectorControls</code> Усередині ви можете використовувати… <code>PanelBody</code>、<code>TextControl</code>、<code>SelectControl</code>、<code>RangeControl</code></code> 等来自 Компоненти з пакета `@wordpress/components` використовуються для створення насичених інтерфейсів налаштувань.

У чому різниця у продуктивності між динамічними та статичними блоками?

HTML-вміст статичних блоків зберігається безпосередньо у вмісті постів у базі даних, тому швидкість завантаження на стороні користувача дуже висока. Однак статичні блоки не можуть містити динамічних даних. Для динамічних блоків під час їх відображення необхідно виконувати PHP-код для звернення до бази даних, що призводить до незначного погіршення продуктивності, але забезпечує отримання актуальних даних у реальному часі. Для контенту, який змінюється нечасто, можна використовувати поєднання статичних блоків зі стратегіями періодичного кешування; для контенту, який потребує високої реально

Чи можна використовувати блоки у традиційній зоні додаткових інструментів чи у мета-блоках статей?

Так, це називається “блоковими плагінами” та “блоковими мета-рамками”. Починаючи з версії WordPress 5.8, область для плагінів також повністю керується редактором блоків Gutenberg. Ви також можете їх використовувати. register_block_type 的 widget_types Необхідні параметри (або відповідні API), щоб блоки були доступні у редакторі міні-інструментів. Для мета-вікон статей можна використовувати…register_post_meta API в поєднанні з блоками дозволяє створювати більш зрозумілі інтерфейси для редагування метаданих.

Наступний крок, що робити далі?

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

Для подальшого читання та практичних знань

Наступні матеріали пов'язані з темою цієї статті і можуть бути корисними для подальшого вивчення. Зазвичай краще починати з статей, які найбільш тісно пов'язані з вашим поточною проблемою, а потім поступово переходити до суміжних тем.

Цитата: Теги: