WordPress：使用自定义Gutenberg块嵌入代码

Question

我试图在我的Gutenberg块上包含一个自定义HTML嵌入输入，但无法弄清楚如何做到这一点。

我想知道在块中添加HTML的最佳方法是什么，就像使用自定义HTML块一样。我错过了Gutenberg元素吗？

我尝试过的方法

attributes:{
        embed: {
            type: 'string',
            default: null,
        },
        ....
        }

然后我在qazxsw poi上创建了一个Rich Text

edit()

最后再次保存（）

   let {  embed, ..... } = attributes;

<label>Embed HTML code here</label>
                    <RichText
                        tagName="div"
                        className="rich-text-holder"
                        placeholder= "Add the HTML"
                        value={ embed }
                        onChange={ ( embed ) => setAttributes( { embed } ) }
                    />

我的第一个问题是该属性被保存为例如

let { embed, .... } = attributes;

        function createMarkup() {
            return {__html: { embed } };
          }

 return().....
                    { embed &&
                    //<RawHTML className="listing-embed" >{ embed }</RawHTML>
                    <div dangerouslySetInnerHTML={ createMarkup() } />
                    }
....

。第二个问题是，在前端，我看到一个空div。

第三个问题是，即使我设法使代码出现，它也显示为文本，而不是前端的实际代码

你有更好的方法或知道我的代码有什么问题吗？

Answer 1

您可以查看自定义HTML块如何执行<iframe src="https://www.w3schools.com"></iframe>。

我的第一个问题是该属性保存为<iframe src =“https://www.w3schools.com”> </ iframe>。

大概这是因为您使用的是RichText。你可以使用in the github repository for Gutenberg而且也许它不会逃避内容吗？

第二个问题是，在前端，我看到一个空div。

我想这是因为HTML无效