Gutenberg Custom Block

时间：2019-05-06 作者：DimChtz

我正在尝试为古腾堡创建一个自定义块。所以我尝试了一些简单的方法：

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文件。问题是它甚至没有在古腾堡编辑器中显示为块选项。所以我的问题是：

我当前的代码有什么问题

1 个回复
最合适的回答,由SO网友:moped 整理而成

至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。你可以在古腾堡手册中找到一些元素here. 请注意顶部的搜索字段
至3。您想在哪里为什么设置多个字段
至4。如果该块是一个插件，则很容易加载和扩展文件。您还可以为您的块注册编辑器和前端css文件，这些文件都在框中；o）

标签： custom-field   block-editor   小码农  

相关推荐

如何让`wp-list-table`显示我在Custom-Post中的`Custom-Fields`

一切都好吗<我需要wp-list-table 也要显示custom-fields 在每个custom-post 我有，但我不知道如何做到这一点，在这幅图中，它显示了带有字段的表格：Title, Author and Publication Date: 我想要的是能够选择custom-fields 将出现，例如以下示例Title, Carta, Naipe, Author, and Date of Publication: