У меня есть требование, где мне нужно разместить InnerBlocks
рядом с RichText
компонентом.Вот так:
edit: function( props ) {
var textContent = props.attributes.textContent;
function onChangeTextContent( content ) {
props.setAttributes( { textContent: content } );
}
return (
<div className={ props.className }>
<label class="editor-content-section-label">Content for gray section</label>
<RichText
className={props.className}
onChange={onChangeTextContent}
value={textContent}
placeholder="Add content"
/>
<InnerBlocks allowedBlocks={'hallmark/white-content-container'}/>
</div>
);
},
save: function( props ) {
return null;
},
Я новичок в разработке Гутенберга.У меня три вопроса.
- Это правильный способ сделать это?Требование
white-content
должно входить в контейнер RichText
. - Как я могу сохранить весь контент, используя
render_callback
.Функция обратного вызова прекрасно сохраняет содержимое RichText
, но я не знаю, как сохранить содержимое InnerBlock
с помощью render_callback
.
Окончательный вывод будет выглядеть следующим образом:
<div class="gray-content">
Content of RichText
<div class="white-content">
Content of InnerBlock
</div>
</div>
- Хотя я ограничил
InnerBlocks
сеять только один блок (<InnerBlocks allowedBlocks={'hallmark/white-content-container'}/>
), в диалоге вставки отображаются все доступные блоки, как основные, так и пользовательские.
Пожалуйста, дайте мне знать, как я могу это сделать!