WordPress: встроить код с пользовательским блоком Гутенберга

Question

Я пытаюсь включить пользовательский HTML-код для вставки в мой блок Гутенберга, но не могу понять, как это сделать.

Мне было интересно, что является лучшим способом добавить HTML внутри блока так же, как вы делаете это с блоком Custom HTML. Есть ли элемент Гутенберга, который я пропустил?

Я попробовал подход

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

Затем я создал RichText на 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 } ) }
                    />

и наконец снова на 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-блок делает это в репозитории github для Gutenberg.

Моя первая проблема заключается в том, что атрибут сохраняется как