Пользовательский блок Гутенберга
Я пытаюсь создать пользовательский блок для Гутенберга. Поэтому я попробовал что-то простое, как это:
JS-файл:
var el = wp.element.createElement;
wp.blocks.registerBlockType('test/blocks', {
title: 'Test Blocks',
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'}
}
},
edit: function(props) {
return
el( 'div', {},
el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
);
},
save: function(props) {
return
el( 'div', {},
el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
);
})
Файл js является частью плагина, который я создал, и он загружается файлом .php. Проблема в том, что он даже не отображается как опция блокировки в редакторе Гутенберга. Итак, мои вопросы таковы:
- Что не так с моим текущим кодом?
- Как я могу добавить некоторые поля? Текстовое редактирование, кнопка и т. Д.?
- Возможно ли иметь несколько поля, похожие на ретранслятор?
- Почему все делают для этого плагин? Почему бы просто не загрузить файл js из functions.php ?
1 answers
К 1. Вы закрыли registerBlockType слишком рано и, чтобы избежать дальнейших ошибок, вы должны напечатать свой возврат в той же строке, что и return в ваших функциях редактирования/сохранения.
var el = wp.element.createElement;
wp.blocks.registerBlockType('test/blocks', {
title: 'Test Blocks',
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'}
},
edit: function(props) {
return el( 'div', {},
el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
)
},
save: function(props) {
return el( 'div', {},
el( 'p', {}, window.wp.i18n.__( 'Hello World!!!' ) )
);
}
});
До 2. Вы можете найти элементы в Справочнике Гутенберга здесь. Обратите внимание на поле поиска вверху.
до 3. Где вы хотите иметь несколько полей для чего?
до 4. Если блок является плагином, его легко загружать и расширять файлы. Вы также можете зарегистрировать редактор и интерфейс css файлы для вашего блока, и все это в коробке.;o)