Атрибуты настраиваемого блока Gutenberg RichText. Массив и дочерние элементы или Строка и HTML?

Я пытаюсь создать динамический настраиваемый блок, используя RichText, и задаюсь вопросом, как установить его атрибуты. Проверяя примеры в Интернете, некоторые люди устанавливают его атрибуты на «Массив и дочерние элементы», но я также нашел примеры с «HTML и имя класса».

Я пробовал оба паттерна (паттерн A и B ниже), но их результаты во внешнем интерфейсе точно такие же. Хотелось бы узнать разницу между ними и какой способ лучше.

Образец А

attributes: {
    message: {
        type: 'array',
        source: 'children',
        selector: '.message',
    }
},

Образец B

attributes: {
    message: {
        type: 'string',
        source: 'html',
        selector: '.message',
    }
},

редактировать и сохранять функции

edit: props => {
    const {attributes:{message}, className, setAttributes} = props;
    const onChangeMessage = message => {
        setAttributes({message});
    }
    return(
        <div className={ className }>
            <RichText
                tagName = "div"
                multiline = "p"
                onChange = {onChangeMessage}
                value = {message}
            />
        </div>
    );
},
save: props => {
    const {attributes:{message}} = props;
    return (
        <div>
            <div class="message">
                <RichText.Content
                    value = {message}
                />
            </div>
        </div>
    );

},


person abms    schedule 03.12.2019    source источник


Ответы (1)


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

Гутенберг использует атрибуты и источники атрибутов для анализа этого HTML и извлечения из него данных. Для этого Гутенберг использует hpq library, который выполняет именно такие парсинга. Каждый исходный атрибут описывает отличную от hpq функцию, используемую для синтаксического анализа блока HTML.

Атрибуты передаются функции сохранения и редактирования.

Источник атрибутов зависит от вашего варианта использования:

html: источник HTML вернет вам innerHTML из разметки.

дочерние элементы: использование дочернего атрибута источника возвращает вам узлы DOM в виде массива дочерних элементов.

Атрибут children более гибок для извлечения сложного HTML из вашего блока и его редактирования, и в большинстве случаев это то, что вы должны использовать.

Вы можете посмотреть другие list of attributes provided by RichText here, а также сослаться на этот действительно подробный блог по атрибутам

person Shubham Khatri    schedule 21.05.2020
comment
Я до сих пор не понимаю, когда использовать массив типов и строку типа - person borayeris; 27.05.2020
comment
с дочерними атрибутами использовать массив типов - person Shubham Khatri; 27.05.2020