块验证失败-内容保存中转义的HTML

我正在尝试使用两个富格文本区域（描述和自定义cta按钮）创建一个超级简单的块。按钮保存在SVG中，看起来一切正常，但当我刷新编辑后的帖子时，它显示以下内容：

Content generated by `save` function:

<div class="wp-block-avmc-cta"><p class="wp-block-avmc-cta_label">test</p><button class="wp-block-avmc-cta_button button">tlačítko s ikonou&lt;svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20" class="ico ico__envelope button_ico" role="img" aria-hidden="true">&lt;g>&lt;g>&lt;path d="M13.78 10.188l-1.483 1.329a.593.593 0 0 1-.793.004l-1.444-1.29-5.324 4.978a.596.596 0 0 1-.814-.87L9.166 9.43 3.9 4.725a.592.592 0 0 1-.048-.84.593.593 0 0 1 .84-.049l5.698 5.097a.96.96 0 0 1 .097.083c0 .005.005.01.01.014l1.399 1.25 7.177-6.44a.598.598 0 0 1 .841.045.599.599 0 0 1-.043.84l-5.205 4.666 5.226 4.96a.597.597 0 0 1-.41 1.026.595.595 0 0 1-.409-.163l-5.292-5.026zm10.19 7.258v-15.5c0-1.103-.898-2-2.001-2h-20c-1.103 0-2 .897-2 2v15.5c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2z">&lt;/path>&lt;/g>&lt;/g>&lt;/svg></button></div>

Content retrieved from post body:

<div class="wp-block-avmc-cta"><p class="wp-block-avmc-cta_label">test</p><button class="wp-block-avmc-cta_button button">tlačítko s ikonou<svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewbox="0 0 24 20" class="ico ico__envelope button_ico" role="img" aria-hidden="true"><g><g><path d="M13.78 10.188l-1.483 1.329a.593.593 0 0 1-.793.004l-1.444-1.29-5.324 4.978a.596.596 0 0 1-.814-.87L9.166 9.43 3.9 4.725a.592.592 0 0 1-.048-.84.593.593 0 0 1 .84-.049l5.698 5.097a.96.96 0 0 1 .097.083c0 .005.005.01.01.014l1.399 1.25 7.177-6.44a.598.598 0 0 1 .841.045.599.599 0 0 1-.043.84l-5.205 4.666 5.226 4.96a.597.597 0 0 1-.41 1.026.595.595 0 0 1-.409-.163l-5.292-5.026zm10.19 7.258v-15.5c0-1.103-.898-2-2.001-2h-20c-1.103 0-2 .897-2 2v15.5c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2z"></path></g></g></svg></button></div>

SVG内容得到HTML编码，这应该是。这让我发疯，我已经测试了我能做什么，我错过了什么？

以下是我的属性：

attributes: {
    label: {
        type: \'string\',
        source: \'html\',
        selector: \'p\',
    },
    button: {
        type: \'text\',
        source: \'html\',
        selector: \'button\',
    }
},

这里是save函数

export default function save({ attributes }) {
const className = getBlockDefaultClassName(\'avmc/cta\'); //https://github.com/WordPress/gutenberg/issues/7308
return <div className={className}>
    <p className={className + "_label"}>{attributes.label}</p>
    <button className={className + "_button button"}>
        {attributes.button}
        <RawHTML>
            <SVG className="ico ico__envelope button_ico" xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><G><G><Path d="M13.78 10.188l-1.483 1.329a.593.593 0 0 1-.793.004l-1.444-1.29-5.324 4.978a.596.596 0 0 1-.814-.87L9.166 9.43 3.9 4.725a.592.592 0 0 1-.048-.84.593.593 0 0 1 .84-.049l5.698 5.097a.96.96 0 0 1 .097.083c0 .005.005.01.01.014l1.399 1.25 7.177-6.44a.598.598 0 0 1 .841.045.599.599 0 0 1-.043.84l-5.205 4.666 5.226 4.96a.597.597 0 0 1-.41 1.026.595.595 0 0 1-.409-.163l-5.292-5.026zm10.19 7.258v-15.5c0-1.103-.898-2-2.001-2h-20c-1.103 0-2 .897-2 2v15.5c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2z" /></G></G></SVG>
        </RawHTML>
    </button>
</div >;
}

我已经测试过了

使用<Icon /> 元素

在save函数中使用简单的svg

使用<SVG> 组件<RawHTML>

I\'ve solved the issue, but a more general and "right" solution is really appreciated, see my answer for details.

// edit.js <RichText tagName="div" className={className + "_button button"} onChange={(val) => setAttributes({ button: val })} value={attributes.button ? attributes.button.replace(/<[^>]*>?/gm, \'\') : \'\'} placeholder={__(\'Add button title\', \'avmc-mat\')} allowedFormats={ } />

// save.js export default function save({ attributes }) { const className = getBlockDefaultClassName(\'avmc/cta\'); //https://github.com/WordPress/gutenberg/issues/7308 return <div className={className}> <p className={className + "_label"}>{attributes.label}</p> <button className={className + "_button button"}> {attributes.button ? attributes.button.replace(/<[^>]*>?/gm, \'\') : \'\'} <svg className="ico ico__envelope button_ico" xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><path d="M13.78 10.188l-1.483 1.329a.593.593 0 0 1-.793.004l-1.444-1.29-5.324 4.978a.596.596 0 0 1-.814-.87L9.166 9.43 3.9 4.725a.592.592 0 0 1-.048-.84.593.593 0 0 1 .84-.049l5.698 5.097a.96.96 0 0 1 .097.083c0 .005.005.01.01.014l1.399 1.25 7.177-6.44a.598.598 0 0 1 .841.045.599.599 0 0 1-.043.84l-5.205 4.666 5.226 4.96a.597.597 0 0 1-.41 1.026.595.595 0 0 1-.409-.163l-5.292-5.026zm10.19 7.258v-15.5c0-1.103-.898-2-2.001-2h-20c-1.103 0-2 .897-2 2v15.5c0 1.103.897 2 2 2h20c1.103 0 2-.897 2-2z" /></g></g></svg> </button> </div >; }

相关推荐