Редактируемый блок Gutenberg.

В принципе блок не отличается от обычного абзаца. Но на нем можно отработать уже чуть больше навыков построения блоков. И некоторые отличия имеются.

PHP файлы
Единственные различия между файлом index.php в этом примере и примерами из предыдущих статей — это имена плагинов и функций.

/**
 * Plugin Name: Gutenberg Wowa Block Editable
 * Plugin URI: http://baytheway.ru
 * Description: Плагин  простого блока Gutenberg с редактируемого
 * Version: 1.0.0
 * Author: Lagutin Wowa
  * @package wwowa-gblock
 */

Файлы Javascript.

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

Первое добполнение, которое необходимо сделать по сравнению со статическим блоком, — это добавить редактируемый компонент.

var RichText = editor.RichText;

Иногда встречается устаревший вариант:

var Editable          = wp.blocks.Editable;

Это на данный момент уже не работает.

В статическом блоке было только три основных настройки. Чтобы иметь дело с редактируемым контентом, нам нужен четвертый параметр, называемый атрибутами.

attributes: {
            content: {
            type: 'array',
            source: 'children',
            selector: 'p',

Даже ничего не понимая, можно предположить, что это одно текстовое поле, в котором сохраняется абзац.

Атрибуты — это объект Javascript, который содержит состояние (данные) для всего блока. Они являются связующим звеном между edit и save функциями, поэтому они легко доступны из обеих частей блока. Технически этот объект может содержать в себе все, что вы хотите — это просто способ создать центральное хранилище для данных вашего блока.

Объект атрибутов может содержать любые данные. Единственное, что абсолютно необходимо для атрибута — это type. Параметр, который определяет, с какими данными вы будете иметь дело. Это может быть array, string, number, object и т.д.
Далее я сам не особо пока понимаю все.

Редактирование и сохранение.

edit: function( props ) {
        var content = props.attributes.content;
        function onChangeContent( newContent ) {
           props.setAttributes( { content: newContent } ); }
            return el(
                RichText, {
                    tagName: 'p',
                    className: props.className,
                    onChange: onChangeContent,
                    value: content, } ); },
save: function( props ) {
            return el( RichText.Content, {
                tagName: 'p', value: props.attributes.content,
            } ); },

Первым изменением является установка переменной content на основе атрибута content, который мы только что создали.
Затем у нас есть новая функция onChangeContent, которую мы можем использовать для обновления значения нашего атрибута content . Наконец, мы создаем элемент, который отображается в редакторе.

В примере статического блока мы создали тег p напрямую. Однако на этот раз мы хотим, чтобы содержимое нашего тега было редактируемым, поэтому мы установили для нашего элемента значение RichText . Это использует преимущества редактируемой переменной, которую мы определили в начале этого раздела. Это открывает нам еще несколько свойств:

tagName — тип элемента, который мы хотим создать. Например: p, div, span и т. Д.
className — это автоматически генерируемое имя класса. Это было использовано и в первом примере.
value — это content, который можно редактировать.
onChange — Здесь мы можем определить, что происходит, когда содержимое редактируется конечным пользователем. В этом случае мы вызываем функцию onChangeContent, которую мы создали выше.
При сохранении требуется лишь незначительное изменение функции edit, чтобы обеспечить правильное сохранение нового редактируемого содержимого.
Единственные изменения, которые мы должны сделать из первого примера, — это установка и использование переменной content.
Примерно так. Лично я уже мало что понимаю. Вернее кое — что понимаю, но объяснить уже не могу. Тем не менее, все работает. Но пока правки кода касались лишь замены имен. Посмотрим, когда придется редактировать «по живому».
А это будет уже в следующем блоке. Перейдем к нему. Карточка.

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