Поза базовими блоками: Створення власних блоків Gutenberg для розширеної функціональності WordPress

Огляд

Редактор блоків WordPress, Gutenberg, революціонізував створення контенту завдяки своїй модульній системі блоків. Хоча основні блоки пропонують універсальність, власні блоки є важливими для унікальної функціональності та брендингу. Ця стаття проведе вас через процес розробки власних блоків Gutenberg, охоплюючи такі основні концепції, як реєстрація блоків, атрибути та рендеринг. Ми розглянемо практичні приклади, обговоримо найкращі практики організації коду та безпеки, а також підкреслимо, як власні блоки інтегруються з архітектурою та хуками WordPress. Оволодівши розробкою власних блоків, ви можете значно розширити можливості та користувацький досвід вашого сайту WordPress.

Поза базовими блоками: Створення власних блоків Gutenberg для розширеної функціональності WordPress

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

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

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

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

Власні блоки — це, по суті, JavaScript-компоненти, які реєструються в WordPress. Коли користувач додає власний блок до запису чи сторінки, Gutenberg зберігає його конфігурацію (атрибути) в базі даних. При рендерингу запису на фронтенді WordPress використовує PHP для інтерпретації цієї конфігурації та виведення відповідного HTML, часто використовуючи той самий JavaScript-компонент або окремий PHP-шаблон.

Основні компоненти власного блоку

Кожен власний блок Gutenberg, по суті, складається з кількох ключових частин:

1. Реєстрація: Це процес повідомлення WordPress про ваш новий блок. Він включає визначення його назви, заголовка, піктограми та інших метаданих. Це в основному робиться за допомогою функції JavaScript registerBlockType.
2. Атрибути: Це поля даних, пов'язані з вашим блоком. Розглядайте їх як налаштування або властивості, які користувач може змінювати для конкретного екземпляра блоку (наприклад, текстовий вміст, URL зображення, вибір кольору). Атрибути визначаються під час реєстрації блоку в JavaScript.
3. Функція редагування (edit): Ця JavaScript-функція визначає, як блок виглядає та поводиться в редакторі Gutenberg. Саме тут ви створюєте інтерактивний інтерфейс, який творці контенту використовуватимуть для налаштування блоку.
4. Функція збереження (save): Ця JavaScript-функція визначає статичну HTML-розмітку, яка буде збережена в базі даних та відрендерена на фронтенді вашого веб-сайту. Вона повинна відображати поточний стан атрибутів блоку.

Крок за кроком: Створення першого власного блоку

Створимо простий власний блок, який відображає "Заклик до дії" (CTA) із заголовком та кнопкою. Цей приклад зосередиться на основних аспектах JavaScript для реєстрації блоків та редагування, припускаючи, що базове середовище розробки WordPress налаштоване.

Передумови:

• Локальне середовище розробки WordPress.
• Базове розуміння JavaScript, React та PHP.
• Встановлені Node.js та npm (або yarn) для компіляції ресурсів.

1. Налаштування проекту:

Власні блоки зазвичай розробляються як частина плагіна. Створіть файл нового плагіна (наприклад, my-custom-blocks/my-custom-blocks.php) та файл JavaScript для вашого блоку (наприклад, src/index.js). Вам також знадобиться процес збірки для компіляції вашого JavaScript. Поширеним підходом є використання @wordpress/scripts, який надає зручний спосіб обробки компіляції.

У кореневій папці вашого плагіна створіть файл package.json:

{
  "name": "my-custom-blocks",
  "version": "1.0.0",
  "description": "A plugin for custom Gutenberg blocks.",
  "main": "index.js",
  "scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
  },
  "keywords": ["wordpress", "gutenberg", "block"],
  "author": "Your Name",
  "license": "GPL-2.0-or-later",
  "devDependencies": {
    "@wordpress/scripts": "^26.0.0" 
  }
}

Встановіть залежності: npm install.

2. Реєстрація блоку (JavaScript):

У вашому файлі src/index.js ви будете використовувати registerBlockType з пакету @wordpress/blocks.

import { registerBlockType } from '@wordpress/blocks';
import { __ } from '@wordpress/i18n';

// Import components for the editor
import { Edit } from './edit';
import { Save } from './save';

registerBlockType( 'my-custom-blocks/cta', {
    title: __( 'Call to Action', 'my-custom-blocks' ),
    icon: 'megaphone',
    category: 'widgets',
    attributes: {
        headline: {
            type: 'string',
            default: '',
        },
        buttonText: {
            type: 'string',
            default: 'Learn More',
        },
        buttonUrl: {
            type: 'string',
            default: '#',
        },
    },
    edit: Edit,
    save: Save,
} );

3. Визначення інтерфейсу редактора (src/edit.js):

Цей компонент відповідає за вигляд та функціональність блоку в редакторі.

import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText, InspectorControls } from '@wordpress/block-editor';
import { PanelBody, TextControl } from '@wordpress/components';

export const Edit = ( { attributes, setAttributes } ) => {
    const blockProps = useBlockProps();

    const onChangeHeadline = ( newHeadline ) => {
        setAttributes( { headline: newHeadline } );
    };

    const onChangeButtonText = ( newButtonText ) => {
        setAttributes( { buttonText: newButtonText } );
    };

    const onChangeButtonUrl = ( newButtonUrl ) => {
        setAttributes( { buttonUrl: newButtonUrl } );
    };

    return (
        <>
            <InspectorControls>
                <PanelBody title={ __( 'Button Settings', 'my-custom-blocks' ) }>
                    <TextControl
                        label={ __( 'Button Text', 'my-custom-blocks' ) }
                        value={ attributes.buttonText }
                        onChange={ onChangeButtonText }
                    />
                    <TextControl
                        label={ __( 'Button URL', 'my-custom-blocks' ) }
                        value={ attributes.buttonUrl }
                        onChange={ onChangeButtonUrl }
                    />
                </PanelBody>
            </InspectorControls>
            <div { ...blockProps }>
                <RichText
                    tagName="h3"
                    placeholder={ __( 'Enter your headline here...', 'my-custom-blocks' ) }
                    value={ attributes.headline }
                    onChange={ onChangeHeadline }
                    allowedFormats={ [ 'core/bold', 'core/italic' ] }
                />
                <a href={ attributes.buttonUrl } className="wp-element-button">
                    { attributes.buttonText }
                </a>
            </div>
        </>
    );
};

4. Визначення функції збереження (src/save.js):

Ця функція визначає HTML-вихід для фронтенду.

import { useBlockProps, RichText } from '@wordpress/block-editor';

export const Save = ( { attributes } ) => {
    const blockProps = useBlockProps.save();

    return (
        <div { ...blockProps }>
            <RichText.Content
                tagName="h3"
                value={ attributes.headline }
            />
            <a href={ attributes.buttonUrl } className="wp-element-button">
                { attributes.buttonText }
            </a>
        </div>
    );
};

5. Підключення скрипта блоку (PHP):

У вашому основному файлі плагіна (my-custom-blocks.php) вам потрібно зареєструвати та підключити ваш скомпільований JavaScript-файл.

<?php
/**
 * Plugin Name: My Custom Blocks
 * Description: Adds custom Gutenberg blocks.
 * Version: 1.0
 * Author: Your Name
 */

function my_custom_blocks_register_block() {
    // Automatically loads the block.json file and enqueues the script.
    register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'my_custom_blocks_register_block' );
?>

6. Збірка ресурсів:

Виконайте npm run build у каталозі вашого плагіна. Це скомпільує ваш JavaScript у папку build.

Тепер активуйте плагін у WordPress. Ви повинні побачити свій блок "Заклик до дії" у редакторі!

Найкращі практики для розробки власних блоків

Розробка власних блоків виходить за рамки простої функціональності. Дотримання найкращих практик гарантує, що ваші блоки будуть безпечними, продуктивними, доступними та підтримуваними.

• Простір імен: Завжди використовуйте унікальний простір імен для вашого блоку (наприклад, my-custom-blocks/cta). Це запобігає конфліктам з іншими блоками. Функція registerBlockType обробляє це.
• Організація коду: Зберігайте ваш JavaScript та PHP код чистим та добре організованим. Для складних блоків розгляньте можливість розбиття вашого JavaScript на менші, багаторазові компоненти.
• Безпека:
  • Санітизація: При збереженні даних у базі даних (особливо контенту, створеного користувачем) завжди санітизуйте їх. WordPress надає функції, такі як sanitize_text_field, esc_url тощо.
  • Екранування: При виведенні даних у браузер, завжди екрануйте їх, щоб запобігти атакам міжсайтового скриптингу (XSS). Використовуйте функції, такі як esc_html, esc_attr, esc_url.
  • Нонси: Для будь-яких AJAX-запитів або надсилань форм, пов'язаних з вашим блоком, використовуйте нонси для перевірки, що запит походить з легітимного джерела WordPress.
• Інтернаціоналізація (i18n): Використовуйте функції __() та _x() (з @wordpress/i18n) для всіх рядків, що відображаються користувачеві, у вашому JavaScript. Це робить ваш блок перекладним.
• Доступність: Переконайтеся, що ваш блок доступний для всіх. Використовуйте семантичний HTML, надавайте ARIA-атрибути, де це необхідно, та тестуйте за допомогою екранних читачів.
• Продуктивність:
  • Ледаче завантаження: Для блоків, які завантажують важкі ресурси або складні дані, розгляньте можливість впровадження технік ледачого завантаження.
  • Ефективний рендеринг: Оптимізуйте вашу функцію save та будь-який серверний рендеринг, щоб він був максимально ефективним.
  • Підключення ресурсів: Підключайте лише необхідні скрипти та стилі для вашого блоку. Використовуйте enqueue_block_style та enqueue_block_script_handle для ресурсів, специфічних для блоку.
• Модульність та розширюваність: Використовуйте хуки WordPress (дії та фільтри) у вашому PHP, щоб дозволити іншим плагінам або темам змінювати поведінку або вивід вашого блоку.
• block.json: Для більш складних блоків використовуйте файл block.json для оголошення метаданих блоку, залежностей, стилів та скриптових дескрипторів. Це сучасний стандарт для розробки блоків і спрощує керування ресурсами.

Інтеграція з архітектурою WordPress

Власні блоки не є ізольованими сутностями. Вони глибоко інтегруються з основною архітектурою WordPress:

• Хуки: Ви можете використовувати PHP-дії та фільтри у своєму плагіні для модифікації реєстрації блоків, умовного додавання власних стилів або скриптів, або навіть для зміни відрендереного виводу основних блоків. Наприклад, ви можете використовувати фільтр block_type_metadata_settings для зміни налаштувань зареєстрованого блоку.
• Інтеграція з темами: Теми на основі блоків та повний редактор сайту (FSE) значною мірою покладаються на блоки. Власні блоки можуть бути розроблені так, щоб бездоганно вписуватися в шаблони FSE, дозволяючи користувачам створювати цілі сайти, використовуючи послідовний робочий процес на основі блоків.
• Сумісність плагінів: Ваші власні блоки можуть взаємодіяти з іншими плагінами. Наприклад, власний блок продукту може отримувати дані з плагіна електронної комерції, або власний блок галереї може інтегруватися з певним плагіном медіатеки.

Розширені концепції та міркування

• Серверний рендеринг (SSR): Для блоків, які потребують динамічних даних або складної логіки, яку найкраще обробляти на сервері, ви можете реалізувати серверний рендеринг. Це передбачає визначення функції render_callback у вашому PHP під час реєстрації блоку.
• Динамічні блоки: Блоки, які використовують SSR, часто називають динамічними блоками. Вони не зберігають статичний HTML у базі даних; натомість вони зберігають лише свої атрибути, а render_callback генерує HTML при кожному завантаженні сторінки.
• Стилі блоків: Ви можете визначати власні стилі для ваших блоків, які користувачі можуть вибирати в редакторі.
• Варіації блоків: Створюйте варіації базового блоку, щоб пропонувати попередньо налаштовані версії з різними стандартними налаштуваннями або зовнішнім виглядом.
• Відмінності між редактором та фронтендом: Пам'ятайте, що функції edit та save можуть потребувати обробки різних сценаріїв. Функція edit призначена для інтерактивного досвіду редактора, тоді як функція save — для статичного виводу HTML. Іноді вам може знадобитися окремий render_callback для динамічного рендерингу на фронтенді.

Висновок

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