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

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

1 голос
/ 18 июня 2019

Я использую фильтр 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>

Пример абзаца BAD (разрыв строки) 

<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>

Ответы [ 2 ]

1 голос
/ 18 июня 2019

Как указывалось в комментарии @ 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
0 голосов
/ 18 июня 2019

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

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

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

...