使用自定义 HTML 换行段落块 HTML

Question

我正在使用过滤器 blocks.getSaveElement 将内置块包装在 bootstrap 容器中。当 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>

Answer 1

错误很可能来自 "BAD paragraph" 的第一行。它说：

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

至少这是 " 变成 ” 的地方。您的 html 输出中的属性似乎太多了。当我检查我的块编辑器 html 或前端 html 时，没有 content equal_height_columns ... 属性。我没有仔细阅读您的代码，但似乎您正在将所有块属性写入 html 属性。这可能不是你应该做的。

Answer 2

正如在评论中指出的那样，卷曲引号来自试图重新格式化的浏览器，不在源代码中。

真正的问题是元素没有在 content 属性中编码 HTML。因此，为了解决这个问题，我需要自己对该值进行编码，将 html 转换为 This one<br>is bad.:

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

element.props.content = content

使用自定义 HTML 换行段落块 HTML

Wrapping paragraph block with custom HTML breaks HTML

wordpress

wordpress-gutenberg

gutenberg-blocks