Устаревшие блоки

При обновлении разметки и атрибутов статических блоков авторам блоков необходимо учитывать существующие сообщения, используя старые версии своего блока. Чтобы обеспечить хороший путь обновления, вы можете выбрать одну из следующих стратегий:

  • Не забрасывайте блок и создайте новый (другое имя)
  • Предоставьте «устаревшую» версию блока, позволяющую пользователям, открывающим эти блоки в Гутенберге, редактировать их, используя обновленный блок.

Блок может иметь несколько устаревших версий. Отклонение будет предпринято, если проанализированный блок окажется недействительным, или если определено устаревание, для которого isEligibleфункция его свойства возвращает значение true.

Устаревание определяется для типа блока как его deprecatedсвойство, массив объектов устаревания, где каждый объект принимает форму:

  • attributes(Объект): определение атрибутов устаревшей формы блока.
  • support(Объект): Поддерживает определение устаревшей формы блока.
  • save(Функция): реализация сохранения устаревшей формы блока.
  • migrate(Функция, Необязательно): функция, которая, учитывая атрибуты и внутренние блоки анализируемого блока, должна возвращать либо атрибуты, совместимые с устаревшим блоком, либо массив кортежей [ attributes, innerBlocks ].
  • isEligible(Функция, Необязательно): функция, которая, учитывая атрибуты и внутренние блоки анализируемого блока, возвращает значение true, если устаревание может обработать миграцию блока. Это особенно полезно в тех случаях, когда блок технически действителен даже после того, как объявлен устаревшим, и требует обновления его атрибутов или внутренних блоков.

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

Пример:

ES5ESNext

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType,
    attributes = {
        text: {
            type: 'string',
            default: 'some random value',
        }
    };

registerBlockType( 'gutenberg/block-with-deprecated-version', {

    // ... other block properties go here

    attributes: attributes,

    save: function( props ) {
        return el( 'div', {}, props.attributes.text );
    },

    deprecated: [
        {
            attributes: attributes,

            save: function( props ) {
                return el( 'p', {}, props.attributes.text );
            },
        }
    ]
} );

В приведенном выше примере мы обновили разметку блока, чтобы использовать divвместо p.

Изменение набора атрибутов

Иногда вам нужно обновить атрибуты, установленные для переименования или изменения старых атрибутов.

Пример:

ES5ESNext

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'gutenberg/block-with-deprecated-version', {

    // ... other block properties go here

    attributes: {
        content: {
            type: 'string',
            default: 'some random value',
        }
    },

    save: function( props ) {
        return el( 'div', {}, props.attributes.content );
    },

    deprecated: [
        {
            attributes: {
                text: {
                    type: 'string',
                    default: 'some random value',
                }
            },

            migrate: function( attributes ) {
                return {
                    content: attributes.text
                };
            },

            save: function( props ) {
                return el( 'p', {}, props.attributes.text );
            },
        }
    ]
} );

В приведенном выше примере мы обновили разметку блока для использования divвместо pи переименовали textатрибут content.

Изменение внутренних блоков

Могут существовать ситуации, когда при переносе блока нам может понадобиться добавить или удалить innerBlocks. 
Например: блок хочет перенести атрибут title в абзац innerBlock.

Пример:

ES5ESNext

var el = wp.element.createElement,
    registerBlockType = wp.blocks.registerBlockType;

registerBlockType( 'gutenberg/block-with-deprecated-version', {

    // ... block properties go here

    deprecated: [
        {
            attributes: {
                title: {
                    type: 'string',
                    source: 'html',
                    selector: 'p',
                },
            },

            migrate: function( attributes, innerBlocks ) {
                return [
                    omit( attributes, 'title' ),
                    [
                        createBlock( 'core/paragraph', {
                            content: attributes.title,
                            fontSize: 'large',
                        } ),
                    ].concat( innerBlocks ),
                ];
            },

            save: function( props ) {
                return el( 'p', {}, props.attributes.title );
            },
        }
    ]
} );

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

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

Scroll to top