Създаване на собствени Gutenberg блокове с JavaScript и React

Gutenberg, новият редактор на WordPress, използва блокове за създаване на съдържание. Това е голямо отклонение от предишния TinyMCE редактор и предоставя много по-интуитивен и динамичен потребителски интерфейс. В основата на този нов редактор е JavaScript библиотеката React. Това значи, че сега можете да създавате собствени блокове, използвайки JavaScript и React. В тази статия ще обсъдим как да създадем собствен блок Gutenberg с помощта на тези технологии.

Подготовка

За да започнем, трябва да имаме инсталиран Node.js и NPM на нашата машина. След това, ще използваме WP CLI, конкретно пакета @wordpress/create-block, за да създадем структурата на нашия блок. В командната си линия, навигирайте до wp-content/plugins папката на вашия WordPress сайт и въведете следната команда:

npx @wordpress/create-block my-block

Тук ‘my-block’ е името на вашия блок. Това ще създаде нова папка със същото име, включително всички необходими файлове за Gutenberg блок.

Разработка на блока

Сега отворете папката на блока в предпочитания от вас текстов редактор. Ще видите два основни файла – edit.js и save.js. Файлът edit.js определя как блокът ще изглежда и ще функционира в редактора на Gutenberg, докато save.js определя как блокът ще се показва на фронтенда на вашия сайт.

За създаване на собствен блок ще трябва да импортираме няколко компонента от @wordpress/block-editor и @wordpress/components.

Например, в edit.js можем да импортираме и използваме RichText компонента, за да създадем текстов блок, който потребителите могат да редактират:

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

export default function Edit( { attributes, setAttributes } ) {
    const { content } = attributes;

    return (
        <RichText
            tagName="p"
            value={ content }
            onChange={ ( newContent ) => setAttributes( { content: newContent } ) }
        />
    );
}

Тук използваме RichText компонента, която получава content атрибута и функцията setAttributes от пропсите. Когато потребителят промени текста, onChange събитието актуализира content атрибута с новото съдържание.

В save.js ще използваме същия RichText.Content компонент, за да отпечатаме съдържанието на блока:

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

export default function Save( { attributes } ) {
    const { content } = attributes;

    return (
        <RichText.Content tagName="p" value={ content } />
    );
}

Регистрация на блока

Накрая, трябва да регистрираме нашия нов блок в WordPress. Върнете се обратно в index.js файл и добавете следната функция registerBlockType:

import { registerBlockType } from '@wordpress/blocks';
import Edit from './edit';
import save from './save';

registerBlockType( 'my-plugin/my-block', {
    apiVersion: 2,
    title: 'My Block',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: Edit,
    save,
} );

Тук регистрираме нов блок с името ‘my-plugin/my-block’, като дефинираме атрибутите, които ще използва блокът, и посочваме функциите Edit и save за редактиране и показване на блока.

Заключение

Това е базово ръководство за създаване на ваш собствен блок в Gutenberg с JavaScript и React. Тъй като Gutenberg е създаден с React, възможностите за персонализиране и разширяване на функционалността на блоковете са почти безкрайни. С уменията за работа с React, можете да създадете по-сложни блокове, които отговарят на специфичните нужди на вашия уебсайт или приложение.