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

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

0 голосов
/ 20 апреля 2019

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

Мне было интересно, как лучше всего добавить HTML внутри блока?так, как вы делаете это с помощью пользовательского блока 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() } />
                    }
....

Моя первая проблема - например, атрибут сохраняется как &lt;iframe src="https://www.w3schools.com">&lt;/iframe>.Вторая проблема заключается в том, что во внешнем интерфейсе я вижу только пустой элемент div.

Третья проблема заключается в том, что даже если мне удастся отобразить код, он будет выглядеть как текст, а не как реальный код во внешнем интерфейсе

Есть ли у вас лучший подход или вы знаете, что не так с моим кодом?

1 Ответ

1 голос
/ 23 апреля 2019

Вы можете посмотреть, как это делает пользовательский блок HTML в репозитории github для Gutenberg .

Моя первая проблема: атрибут сохраняется как например.

Предположительно, это потому, что вы используете RichText. Не могли бы вы вместо этого использовать TextareaControl и, возможно, он не сможет избежать содержимого?

Вторая проблема заключается в том, что во внешнем интерфейсе я вижу только пустой div.

Я полагаю, это потому, что HTML-код недействителен

...