Створення кастомного блоку Gutenberg в WordPress

Редактор блоків Gutenberg, впроваджений у WordPress 5.0, дозволяє користувачам створювати контент за допомогою блоків. Кастомні блоки Gutenberg дозволяють додати унікальний функціонал та елементи дизайну до вашого сайту на WordPress. У цьому посібнику ми пройдемо процес створення кастомного блоку Gutenberg з нуля.

Передумови

Перед початком роботи переконайтеся, що у вас є:

• Встановлення WordPress

• Базові знання JavaScript і React

• Встановлені Node.js і npm

Зручний хостинг для ваших сайтів на WordPress

Так, це хвилинка реклами в тексті. Але корисної! Ну і мені хотілось би, щоб ви побачили :)

Шукаєте хороший хостинг для ваших сайтів на WordPress? Зверніть увагу на Host4Biz. Це надійний хостинг з сучасними серверами в Європі та українською командою.

А за промокодом MYHOST10 ви отримаєте знижку в 10% на першу оплату. Для цього реєструйтесь за посиланням та введіть код перед оплатою.

Крок 1: Налаштуйте середовище розробки

Спочатку нам потрібно налаштувати середовище розробки. Відкрийте ваш термінал і перейдіть до каталогу теми або плагіна WordPress.

cd wp-content/themes/your-theme

Створіть новий каталог для вашого кастомного блоку:

mkdir custom-block
cd custom-block

Ініціалізуйте новий проект npm:

npm init -y

Встановіть необхідні пакети:

npm install @wordpress/scripts --save-dev

Крок 2: Створіть файли блоку

Всередині каталогу custom-block створіть папку src та додайте два файли: block.js і editor.css.

mkdir src
touch src/block.js src/editor.css

Крок 3: Зареєструйте кастомний блок

Редагуйте файл block.js для реєстрації вашого кастомного блоку:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
import './editor.css';

registerBlockType('custom/block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit({ attributes, setAttributes }) {
        const { content } = attributes;

        return (
            <RichText
                tagName="p"
                value={content}
                onChange={(content) => setAttributes({ content })}
                placeholder="Write your custom block content..."
                className="custom-block"
            />
        );
    },
    save({ attributes }) {
        const { content } = attributes;

        return <RichText.Content tagName="p" value={content} className="custom-block" />;
    },
});

Крок 4: Додайте стилі для блоку редактора

Редагуйте файл editor.css, щоб додати стилі для вашого блоку в редакторі:

.custom-block {
    background-color: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
}

Крок 5: Збірка блоку

Створіть файл webpack.config.js в каталозі custom-block:

const defaultConfig = require('@wordpress/scripts/config/webpack.config');

module.exports = {
    ...defaultConfig,
    entry: './src/block.js',
    output: {
        path: __dirname,
        filename: 'block.js',
    },
};

Додайте скрипт збірки до вашого файлу package.json:

"scripts": {
    "build": "wp-scripts build",
    "start": "wp-scripts start"
}

Запустіть скрипт збірки:

npm run build

Крок 6: Підключіть скрипти блоку в WordPress

Наостанок підключіть ваші кастомні скрипти блоку у вашій темі або плагіні. Додайте наступний код у файл functions.php вашої теми або основний файл вашого плагіна:

function enqueue_custom_block_assets() {
    wp_enqueue_script(
        'custom-block',
        get_template_directory_uri() . '/custom-block/block.js',
        array('wp-blocks', 'wp-element', 'wp-editor'),
        filemtime(get_template_directory() . '/custom-block/block.js')
    );

    wp_enqueue_style(
        'custom-block-editor',
        get_template_directory_uri() . '/custom-block/src/editor.css',
        array(),
        filemtime(get_template_directory() . '/custom-block/src/editor.css')
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_block_assets');

Висновок

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