Отвъд основните блокове: Създаване на персонализирани 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). Ще ви е необходим и процес за изграждане (build process) за компилиране на вашия 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. Трябва да видите вашия блок "Призив за действие", наличен в редактора!

Най-добри практики за разработка на персонализирани блокове

Разработването на персонализирани блокове надхвърля простото им функционалност. Придържането към най-добрите практики гарантира, че вашите блокове са сигурни, производителни, достъпни и лесни за поддръжка.

• Именуване на пространства (Namespacing): Винаги използвайте уникално пространство за имената на вашия блок (напр. my-custom-blocks/cta). Това предотвратява конфликти с други блокове. Функцията registerBlockType се грижи за това.
• Организация на кода: Поддържайте вашия JavaScript и PHP код чист и добре организиран. За сложни блокове, обмислете разделянето на вашия JavaScript на по-малки, повторно използваеми компоненти.
• Сигурност:
  • Санитизация (Sanitization): При записване на данни в базата данни (особено потребителско съдържание), винаги ги санитизирайте. WordPress предоставя функции като sanitize_text_field, esc_url и др.
  • Ескейпинг (Escaping): При извеждане на данни към браузъра, винаги ги ескейпвайте, за да предотвратите атаки чрез кръстосано писане на скриптове (XSS). Използвайте функции като esc_html, esc_attr, esc_url.
  • Нонси (Nonces): За всякакви AJAX заявки или изпращания на формуляри, свързани с вашия блок, използвайте нонси, за да проверите дали заявката произхожда от легитимен WordPress източник.
• Интернационализация (i18n): Използвайте функциите __() и _x() (от @wordpress/i18n) за всички потребителски низове във вашия JavaScript. Това прави вашия блок преводим.
• Достъпност (Accessibility): Уверете се, че вашият блок е използваем от всички. Използвайте семантичен HTML, предоставяйте ARIA атрибути, където е необходимо, и тествайте с екранни четци.
• Производителност:
  • Мързеливо зареждане (Lazy Loading): За блокове, които зареждат тежки активи или сложни данни, обмислете прилагането на техники за мързеливо зареждане.
  • Ефективно рендиране: Оптимизирайте вашата save функция и всяко сървърно рендиране, за да бъде възможно най-ефективно.
  • Включване на активи (Asset Enqueuing): Включвайте само необходимите скриптове и стилове за вашия блок. Използвайте enqueue_block_style и enqueue_block_script_handle за специфични за блока активи.
• Модулност и разширяемост: Използвайте WordPress куките (actions и filters) във вашия PHP, за да позволите на други плъгини или теми да модифицират поведението или изхода на вашия блок.
• block.json: За по-сложни блокове, използвайте файл block.json, за да декларирате метаданни на блока, зависимости, стилове и скриптови хендъли. Това е модерният стандарт за разработка на блокове и опростява управлението на активи.

Интеграция с архитектурата на WordPress

Персонализираните блокове не са изолирани единици. Те се интегрират дълбоко с основната архитектура на WordPress:

• Куки (Hooks): Можете да използвате PHP actions и filters във вашия плъгин, за да модифицирате регистрацията на блокове, да добавяте персонализирани стилове или скриптове условно или дори да променяте рендирания изход на основни блокове. Например, можете да използвате филтъра block_type_metadata_settings, за да модифицирате настройките на регистриран блок.
• Интеграция с теми: Темите, базирани на блокове, и Full Site Editing (FSE) разчитат силно на блокове. Персонализираните блокове могат да бъдат проектирани така, че да се вписват безпроблемно в FSE шаблоните, позволявайки на потребителите да изграждат цели сайтове, използвайки последователен работен процес, базиран на блокове.
• Оперативна съвместимост с плъгини: Вашите персонализирани блокове могат да взаимодействат с други плъгини. Например, персонализиран блок за продукт може да извлича данни от плъгин за електронна търговия, или персонализиран галереен блок може да се интегрира със специфичен плъгин за медийна библиотека.

Разширени концепции и съображения

• Сървърно рендиране (Server-Side Rendering - SSR): За блокове, които изискват динамични данни или сложна логика, която е най-добре да се обработва на сървъра, можете да приложите сървърно рендиране. Това включва дефинирането на функция render_callback във вашия PHP при регистрацията на блока.
• Динамични блокове: Блоковете, които използват SSR, често се наричат динамични блокове. Те не записват статичен HTML в базата данни; вместо това те записват само своите атрибути, а render_callback генерира HTML при всяко зареждане на страницата.
• Стилове на блокове: Можете да дефинирате персонализирани стилове за вашите блокове, които потребителите могат да избират в редактора.
• Вариации на блокове: Създайте вариации на базов блок, за да предложите предварително конфигурирани версии с различни настройки по подразбиране или външен вид.
• Разлики между редактор и фронт-енд: Имайте предвид, че функциите edit и save може да се наложи да обработват различни сценарии. Функцията edit е за интерактивното изживяване в редактора, докато функцията save е за статичния HTML изход. Понякога може да се нуждаете от отделен render_callback за динамично рендиране на фронт-енда.

Заключение

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