时间戳

首页 > 解决方案 > WordPress：使用自定义 Gutenberg 块嵌入代码

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

问题描述

我正在尝试在我的 Gutenberg 块中包含自定义 HTML 嵌入输入，但不知道该怎么做。

我想知道在块内添加 HTML 的最佳方法是什么，就像使用自定义 HTML 块一样。有没有我错过的古腾堡元素？

我尝试了以下方法

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

然后我在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() } />
                    }
....

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

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

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

标签： wordpressreactjswordpress-gutenberggutenberg-blockscreate-guten-block

解决方案

您可以在 Gutenberg 的 github 存储库中查看自定义 HTML 块是如何执行此操作的。

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

大概这是因为您使用的是 RichText。您可以改用TextareaControl吗，也许它不会转义内容？

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

我想这是因为 HTML 无效

推荐阅读