Question

我正在使用过滤器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>

BAD段落的示例（换行符）

TokenRelayGatewayFilterFactory

Answer 1

正如@niklas在评论中指出的那样，该弯引号来自试图重新格式化的浏览器，并且不在源代码中。

真正的问题是元素未在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

Answer 2

错误很可能来自“ BAD段落”的第一行。它说：

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

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

用自定义HTML包装段落块会中断HTML

2 个答案: