Атрибуты

Общие источники

Источники атрибутов используются для определения стратегии, с помощью которой значения атрибутов блока извлекаются из сохраненного содержимого публикации. Они предоставляют механизм для отображения из сохраненной разметки в представление блока в JavaScript.

Если источник атрибута не указан, атрибут будет сохранен (и считан) из разделителя комментариев блока .

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

Под капотом источники атрибутов представляют собой расширенный набор функций, предоставляемых hpq , небольшой библиотекой, используемой для анализа и запроса разметки HTML в форму объекта. В объекте источников атрибутов вы можете называть ключи по своему усмотрению. Результирующий объект назначит в качестве значения каждому ключу результат его источника атрибута.

attribute

Используется attributeдля извлечения значения атрибута из разметки.

Пример : извлечь srcатрибут из изображения, найденного в разметке блока.

{
    url: {
        type: 'string',
        source: 'attribute',
        selector: 'img',
        attribute: 'src',
    }
}
// { "url": "https://lorempixel.com/1200/800/" }

text

Используйте textдля извлечения внутреннего текста из разметки.

{
    content: {
        type: 'string',
        source: 'text',
        selector: 'figcaption',
    }
}
// { "content": "The inner text of the figcaption element" }

html

Используйте htmlдля извлечения внутреннего HTML из разметки.

{
    content: {
        type: 'string',
        source: 'html',
        selector: 'figcaption',
    }
}
// { "content": "The inner text of the <strong>figcaption</strong> element" }

Используйте multilineсвойство для извлечения внутреннего HTML соответствующих названий тегов для использования в RichTextс multilineопорой.

{
    content: {
        type: 'string',
        source: 'html',
        multiline: 'p',
        selector: 'blockquote',
    }
}
// { "content": "<p>First line</p><p>Second line</p>" }

query

Используется queryдля извлечения массива значений из разметки. Записи массива определяются аргументом селектора, где каждый соответствующий элемент в блоке будет иметь структурированную запись, соответствующую второму аргументу, объекту источников атрибутов.

Пример : Извлечь srcи altиз каждого элемента изображения в разметку блока.

{
    images: {
        type: 'array',
        source: 'query'
        selector: 'img',
        query: {
            url: {
                type: 'string',
                source: 'attribute',
                attribute: 'src',
            },
            alt: {
                type: 'string',
                source: 'attribute',
                attribute: 'alt',
            },
        }
    }
}
// {
//   "images": [
//     { "url": "https://lorempixel.com/1200/800/", "alt": "large image" },
//     { "url": "https://lorempixel.com/50/50/", "alt": "small image" }
//   ]
// }

Мета

Атрибуты могут быть получены из мета поста, а не из представления блока в сохраненном контенте поста. Для этого атрибуту необходимо указать соответствующий метаключ под metaключом:

attributes: {
    author: {
        type: 'string',
        source: 'meta',
        meta: 'author'
    },
},

Отсюда мета-атрибуты могут быть прочитаны и записаны блоком с использованием того же интерфейса, что и любой атрибут:

edit: function( props ) {
    function onChange( event ) {
        props.setAttributes( { author: event.target.value } );
    }

    return el( 'input', {
        value: props.attributes.author,
        onChange: onChange,
    } );
},

edit( { attributes, setAttributes } ) {
    function onChange( event ) {
        setAttributes( { author: event.target.value } );
    }

    return <input value={ attributes.author } onChange={ onChange } type="text" />;
},

Соображения

По умолчанию мета-поле будет исключено из мета-объекта поста. Это можно обойти, явно сделав поле видимым:

function gutenberg_my_block_init() {
    register_meta( 'post', 'author', array(
        'show_in_rest' => true,
    ) );
}
add_action( 'init', 'gutenberg_my_block_init' );

Кроме того, имейте в виду, что WordPress по умолчанию:

• не трактовать метаданные как уникальные, вместо этого возвращая массив значений;
• рассматривая этот элемент как строку.

Если register_metaкакое- либо поведение нежелательно, один и тот же вызов может быть дополнен параметрами singleи / или typeследующим образом:

function gutenberg_my_block_init() {
    register_meta( 'post', 'author_count', array(
        'show_in_rest' => true,
        'single' => true,
        'type' => 'integer',
    ) );
}
add_action( 'init', 'gutenberg_my_block_init' );

Если вы хотите использовать объект или массив в атрибуте, вы можете зарегистрировать stringтип атрибута и использовать JSON в качестве посредника. Сериализовать структурированные данные в JSON перед сохранением, а затем десериализовать строку JSON на сервере. Имейте в виду, что вы несете ответственность за целостность данных; удостоверьтесь в правильной дезинфекции, размещении недостающих данных и т. д.

Наконец, убедитесь, что вы уважаете тип данных при установке атрибутов, так как платформа не выполняет автоматическое приведение типов к мета. Неправильная печать в атрибутах блока приведет к тому, что сообщение останется грязным даже после сохранения ( ср. isEditedPostDirty , hasEditedAttributes). Например, если authorCountцелое число, помните, что обработчики событий могут передавать данные другого типа, поэтому значение должно быть приведено явно:

function onChange( event ) {
    props.setAttributes( { authorCount: Number( event.target.value ) } );
}