TL;DR: можно писать блоки на обычном JS и регистрировать их через PHP, без использования сборки.

📂 Структура

Положим всё в тему, например:

/wp-content/themes/твоя-тема/
└── blocks/
    └── simple-block/
        ├── block.js
        ├── editor.css
        └── style.css

🧩 1. block.js — чистый JS для регистрации блока

( function( blocks, editor, element ) {
    var el = element.createElement;
    var RichText = editor.RichText;

    blocks.registerBlockType( 'mytheme/simple-block', {
        title: 'Простой Блок',
        icon: 'smiley',
        category: 'widgets',

        attributes: {
            content: {
                type: 'string',
                source: 'html',
                selector: 'p',
            }
        },

        edit: function( props ) {
            return el(
                RichText,
                {
                    tagName: 'p',
                    className: props.className,
                    onChange: function( content ) {
                        props.setAttributes( { content: content } );
                    },
                    value: props.attributes.content,
                    placeholder: 'Введите текст...',
                }
            );
        },

        save: function( props ) {
            return el( RichText.Content, {
                tagName: 'p',
                value: props.attributes.content
            } );
        },
    } );
} )(
    window.wp.blocks,
    window.wp.blockEditor || window.wp.editor,
    window.wp.element
);

🎨 2. editor.css и style.css

Одинаковые стили, но editor.css — только для редактора, а style.css — для фронта.

editor.css

.wp-block-mytheme-simple-block {
    background: #f0f0f0;
    padding: 10px;
    border-left: 4px solid #0073aa;
}

style.css

.wp-block-mytheme-simple-block {
    background: #f9f9f9;
    padding: 10px;
    border-left: 4px solid #0073aa;
}

🧠 3. Подключаем через functions.php

function mytheme_register_simple_block() {
    // JS
    wp_register_script(
        'mytheme-simple-block',
        get_template_directory_uri() . '/blocks/simple-block/block.js',
        [ 'wp-blocks', 'wp-element', 'wp-editor' ],
        filemtime( get_template_directory() . '/blocks/simple-block/block.js' )
    );

    // Стили для редактора
    wp_register_style(
        'mytheme-simple-block-editor',
        get_template_directory_uri() . '/blocks/simple-block/editor.css',
        [],
        filemtime( get_template_directory() . '/blocks/simple-block/editor.css' )
    );

    // Стили для фронтенда
    wp_register_style(
        'mytheme-simple-block',
        get_template_directory_uri() . '/blocks/simple-block/style.css',
        [],
        filemtime( get_template_directory() . '/blocks/simple-block/style.css' )
    );

    // Регистрируем блок
    register_block_type( 'mytheme/simple-block', [
        'editor_script' => 'mytheme-simple-block',
        'editor_style'  => 'mytheme-simple-block-editor',
        'style'         => 'mytheme-simple-block',
    ] );
}
add_action( 'init', 'mytheme_register_simple_block' );

🧪 Проверка

1. Обнови страницу редактирования поста.
2. Новый блок появится в категории “Виджеты” → “Простой Блок”.
3. Можно редактировать текст прямо в блоке.

✅ Вывод

Ты создал собственный Gutenberg-блок без Node.js, сборок и зависимостей. Всё просто, чисто и элегантно, как любимый белый бордюр на ковре.