Обтекание блока абзаца пользовательским HTML прерывает HTML

Я использую фильтр blocks.getSaveElement, чтобы обернуть встроенные блоки в контейнер начальной загрузки. Это работает почти для всего, кроме блока Paragraph, когда эти блоки содержат <br> (с использованием SHIFT+ENTER)

Если в абзаце нет разрывов строки, все компилируется и отображается, как ожидалось.

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

Что вызывает это?

Фильтр для добавления элементов упаковки:

wp.hooks.addFilter('blocks.getSaveElement', 'themes/wisnet/bs-core-blocks', function (element, blockType, attributes) {

    // add the defaults to the attributes if they do not exist
    const defaults = getBlockConfig(blockType.name).attributes;
    for (let key in defaults) {
        if (defaults.hasOwnProperty(key) && typeof attributes[key] === 'undefined') {
            attributes[key] = defaults[key].default;
        }
    }

    if (isValidBlockType(blockType.name) && wp.element.isValidElement(element)) {
        const col = wp.element.createElement('div', assign({
            'class': ['col', (attributes.columns > 0 ? 'col-sm-' + attributes.columns : '')].join(' ')
        }, {}), element);
        const row = wp.element.createElement('div', assign({
            'class': ['row', attributes.equal_height_columns, attributes.alignment_vertical, attributes.alignment_horizontal].join(' ')
        }, {}), col);
        element = wp.element.createElement('div', assign({
            'class': ['wp-block-wrapper', attributes.gutters, (
                typeof element.props.className === 'string' && element.props.className.match(/(^|\s+)wp-block-/) ?
                    element.props.className.replace(/wp-block-/, 'wp-block-wrapper-') :
                    'wp-block-wrapper-' + blockType.name.replace(/\//, '-').replace(/^core-/, '')
            ), attributes.container].join(' '),
            'data-type': blockType.name
        }, attributes), row);

        console.log({element, attributes, row, col});
    }


    return element;
}, 999);

Образец хорошего абзаца (без разрывов строк)

<div class="wp-block-wrapper md-gutters wp-block-wrapper-paragraph container" data-type="core/paragraph" content="This one is good!" container="container" equal_height_columns="" gutters="md-gutters" alignment_horizontal="justify-content-start" alignment_vertical="align-items-start" fluid_items="true" columns="0" items_break_point="col-sm">
    <div class="row  align-items-start justify-content-start">
        <div class="col ">
            <p container="container" equal_height_columns="" gutters="md-gutters" alignment_horizontal="justify-content-start" alignment_vertical="align-items-start" fluid_items="true" items_break_point="col-sm">This one is good!</p>
        </div>
    </div>
</div>

Образец ПЛОХОГО абзаца (разрыв строки)

<div class="wp-block-wrapper md-gutters wp-block-wrapper-paragraph container" data-type="core/paragraph" content="This one<br>is bad.” container=”container” equal_height_columns=”” gutters=”md-gutters” alignment_horizontal=”justify-content-start” alignment_vertical=”align-items-start” fluid_items=”true” columns=”0″ items_break_point=”col-sm”>
<div class=" row="" align-items-start="" justify-content-start"="">
<div class="col ">
    <p container="container" equal_height_columns="" gutters="md-gutters" alignment_horizontal="justify-content-start" alignment_vertical="align-items-start" fluid_items="true" items_break_point="col-sm">This one<br>is bad.</p>
</div>
</div>

wordpress wordpress-gutenberg gutenberg-blocks
person Michael    schedule 18.06.2019    source источник
comment
откуда взялся html? инструменты разработчика браузера? пожалуйста, проверьте исходный код html и вставьте его сюда. иногда они отличаются, так как браузеры пытаются переформатировать html с ошибками.   -  person niklas    schedule 18.06.2019
comment
Хороший звонок, никлас. Так что источник в порядке. Я думаю, проблема в том, что это не кодирование, а просто HTML в значении атрибута (his one<br>is bad.). Спасибо!   -  person Michael    schedule 18.06.2019
comment
Я рекомендую вам использовать синтаксис ES6, так как он значительно упростит ваш код. Для ES6 всякий раз, когда вы видите какой-либо код в документации WordPress, вы можете выбрать вкладку ESNEXT в верхней части фрагмента, которая затем покажет вам код ES6.   -  person Mehmood Ahmad    schedule 13.07.2019

Ответы (2)


arrow_upward
1
arrow_downward

Как указано в @niklas в комментарий, фигурная цитата исходила из браузера, пытающегося переформатировать, и не была в исходном коде.

Настоящая проблема заключается в том, что элемент не кодирует HTML в атрибуте content. Итак, чтобы позаботиться об этом, мне нужно было самому закодировать это значение, которое преобразует html в This one&lt;br&gt;is bad.:

let content = (() => {
    let elt = document.createElement('span');
    elt.textContent = element.props.content;
    return elt.innerHTML;
})();

element.props.content = content
person Michael    schedule 18.06.2019

arrow_upward
0
arrow_downward

Ошибка, скорее всего, исходит из первой строки «ПЛОХОГО абзаца». Он говорит:

content="This one<br>is bad.”

По крайней мере, здесь " становится ”. Кажется, у вас слишком много атрибутов в вашем html-выводе. Когда я проверяю свой HTML-код в редакторе блоков или интерфейсный HTML-код, атрибуты content equal_height_columns ... отсутствуют. Я не слишком внимательно читал ваш код, но похоже, что вы записываете все атрибуты блока в атрибуты html. Вероятно, это не то, что вам следует делать.

person niklas    schedule 18.06.2019