Статический блок Gutenberg. WordPress.

Это простой блок со статическим текстом внутри. Стили тоже внутренние. Польза от этого блока никакая видимо, но начинать нужно от простого к сложному. Хотя особо одаренным можно и перескочить эту ступень. Я начал с азов. Несколько раз подбирался, но каждый раз откладывал, по причине «неврубаюсь».
Но теперь вроде немного разобрался.
В качестве шаблона я использовал вот этот плагин.

Устанавливаем его и у нас появляется вот такие блоки. Их там 5 штук.

Те, которые с расширением esnext, во внимание не берем. Я этот язык не знаю. Я посчитал, что лучшим на первое время просто повторить этот плагин со своими названиями. Это поможет быстрее понять структуру блоков и потом редактировать их по своему усмотрению.
Файловая структура плагина у нас теперь есть.

Теперь настала пора продублировать основные блоки, изменив все, что можно на свой вкус. Может и не самый лучший способ понять, что к чему, но что делать. Я выбрал такой путь.
Итак.
Структура папок плагина

И созданная мной

Папку с переводом я оставляю пустой, просто оставил, если вдруг в дальнейшем понадобится.
Соответственно папка родного плагина
gutenberg-examples и папка блока 01-basis.
Мой вариант
wwowa-gblock и wgb-simple.
Я не буду приводить много кода. Только минимальные значимые пояснения.

Еще добавлю, что плагин состоит из основного и каждый блок тоже, в свою очередь, является плагином. Поэтому файл index.php в корне плагина тоже надо подправить. Там только пути и название плагина. Это совсем просто и понятно. Даже мне.
PHP файлы
Начинаем с index.php. Этот файл будет содержать информацию о плагине, используемую WordPress для идентификации плагина, а также код, который мы используем для загрузки нашего файла Javascript.

<?php
/**
 * Plugin Name: Gutenberg Wowa Block Simple
 * Plugin URI: http://baytheway.ru
 * Description: Плагин описывает регистрацию нового простого блока Gutenberg
 * Version: 1.0.0 
 * Author: Lagutin Wowa
 * @package wwowa-gblock
 */

Как видите, этот файл начинается с сведений о плагине, а затем содержит небольшую проверку, чтобы убедиться, что плагин используется в правильном контексте и к нему нет прямого доступа. В общем то не особо отличаясь от обычного плагина.

defined( 'ABSPATH' ) || exit;

Далее языковые дела, которые я дублирую из плагина, но не использую. Ничего тут переводить, но пока лучше повторить все досконально. Мало ли что?

/* Load all translations for our plugin from the MO file. */
add_action( 'init', 'wwowa_gblock_simple_textdomain' );
function wwowa_gblock_simple_textdomain() {
    load_plugin_textdomain( 'wwowa-gblock', false, basename( __DIR__ ) . '/languages' );}

Далее он содержит код для загрузки файла Javascript, который будет содержать остальную часть кода для нашего пользовательского блока Гутенберг.

function wwowa_gblock_simple_register_block() {
    if ( ! function_exists( 'register_block_type' ) ) {
        return; }
    wp_register_script(
        'wwowa-gblock-simple',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-i18n', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )  );
register_block_type( 'wwowa-gblock/gblock-wgb-simple', array(
    'editor_script' => 'wwowa-gblock-simple', ) );
if ( function_exists( 'wp_set_script_translations' ) ) {
    wp_set_script_translations( 'wwowa-gblock-simple', 'wwowa-gblock' );  }}
add_action( 'init', 'wwowa_gblock_simple_register_block' );

Все достаточно просто, главное не ошибиться в названиях, для чего нужно продумать четкую систему имен. Так будет намного легче.

Особое внимание следует обратить на вот эту строку:

  register_block_type( 'wwowa-gblock/gblock-wgb-simple', 

Здесь надо выбрать пространство имен и имя блока. Лучше для начала поступить именно так:
wwowa-gblock – имя папки плагина. Далее дублируем gblock плюс название папки блока. Получаем gblock-wgb-simple. И общий результат, как показано выше.
Если честно, я не шибко понимаю что здесь к чему, но когда я попытался упростить эти длинные названия у меня что то пошло не так и блоки отказывались работать. Может и не в этом ошибка. Но лучше для начала прописать так. А уж потом на рабочем варианте попробовать сократить. Если нужно.

Файлы Javascript

( function( blocks, i18n, element ) {
    var el = element.createElement;
    var __ = i18n.__;
    var blockStyle = {
        backgroundColor: 'green',
        color: 'white',
        padding: '20px',
        margin:'20px',
        border: '2px solid yellow',
    };
 blocks.registerBlockType( 'wwowa-gblock/gblock-wgb-simple', {
        title: __( 'wgb:simple', 'wwowa-gblock' ),
        icon: 'universal-access-alt',
        category: 'layout',
        edit: function() {
            return el(
                'p',
                { style: blockStyle },
                'Статическое содержимое, добавленное в код блока'
            );   },
 save: function() {
       return el(
       'p',
        { style: blockStyle },
        'Статическое содержимое, добавленное в код блока'
         );   },   } );}(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element
) );

Как видите, первое, что мы делаем, это определяем несколько переменных, чтобы упростить доступ к некоторым встроенным функциям редактора. Давайте внимательнее посмотрим.

var _ = wp.i18n ._; — Мы можем использовать эту функцию для автоматического перевода строк в нашем плагине.
var el = element.createElement; — Мы можем использовать эту функцию, чтобы легко создавать элементы, которые будут выводиться в редакторе, а также в сохраненном контенте.
var blockStyle; – переменная для стилей блока.

Далее мы регистрируем наш пользовательский блок с помощью registerBlockType () . Эта функция принимает два параметра:

Имя блока — это строка, содержащая имя нашего пользовательского блока с префиксом пространства имен. Например: my-plugin / my-custom-block.
Настройки блока — это объект, который обрабатывает все остальное в нашем пользовательском блоке.
Вот самые основные настройки:

title — заголовок блока будет использоваться для идентификации нашего блока в редакторе.
icon — Значок блока помогает легче идентифицировать наш блок.
category — категория блока. Используется для группировки блока вместе с другими блоками.

Если все правильно блок появится в редакторе.

Edit.
Функция редактирования определяет, как наш блок ведет себя в редакторе.
В этом примере наша функция редактирования возвращает один элемент «p», применяет к нему стили и собственно контент блока. Конечно, там много параметров может быть, но пока это простейший вариант.

Save.
Определение способа сохранения блока Гутенберга аналогично определению способа его редактирования. Поскольку это статический блок без редактирования содержимого, функции редактирования и сохранения в точности совпадают. В следующем разделе будут различия между функциями редактирования и сохранения.

Оставьте свой комментарий