Question

我试图在我的Gutenberg块中包含一个自定义HTML嵌入输入，但不知道如何实现。

我想知道与在Custom HTML块中添加HTML相同的最佳方法是在块中添加HTML。我错过了古腾堡元素吗？

我尝试了

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

然后我在edit()上创建了RichText

   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 } ) }
                    />

最后在save（）上再次结束

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

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

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

我的第一个问题是，例如，该属性另存为<iframe src="https://www.w3schools.com"></iframe>。第二个问题是在前端我只看到一个空的div。

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

您有更好的方法还是知道我的代码出了什么问题？

Answer 1

您可以查看“自定义HTML”块如何进行in the github repository for Gutenberg。

我的第一个问题是该属性另存为。

大概是因为您正在使用RichText。您可以使用TextareaControl代替它吗，也许它不会转义内容？

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

我想这是因为HTML无效

WordPress：使用自定义古腾堡块嵌入代码

1 个答案: