Gutenberg如何制作属性以保存为元数据

时间:2018-04-13 作者:Gasim

我在和古腾堡比赛,我有点困惑它应该如何保存给梅塔。这是我的自定义帖子和元数据:

add_action( \'init\', function() {
    register_post_type( \'game\', [
        \'label\' => \'Games\',
        \'public\' => true,
        \'supports\' => [ \'editor\', \'custom-fields\' ],
        \'show_in_rest\' => true,
    ] );

    register_meta( \'game\', \'logo\', [
        \'single\' => true,
        \'show_in_rest\' => true,
        \'description\'  => \'A meta key associated with a string meta value.\',
        \'type\' => \'string\'
    ] );
} );
和我的Block JS文件:

( function( blocks, i18n, element ) {

    var el = element.createElement;
    var MediaUploadButton = wp.blocks.MediaUploadButton;
    var BlockControls = wp.blocks.BlockControls;

    blocks.registerBlockType( \'game-post/meta\', {
        title: i18n.__( \'Game\' ),
        description: i18n.__( \'Meta Box for Game\' ),
        icon: \'businessman\',
        category: \'common\',
        attributes: { 
            logo: {
                type: \'string\',
                source: \'meta\',
                meta: \'logo\'
            }   
        },
        edit: function(props) {
            console.log(props.attributes);
            var mediaURL = props.attributes.logo;
            return el(\'div\', {
                classname: mediaURL ? \'image-active\' : \'image-inactive\'
            }, el(\'input\', {
                defaultValue: mediaURL,
                type: \'text\',
                onChange: function(e) {
                    props.setAttributes({ logo: e.target.value });
                }  
            }));
        },
        save: function(props) {
            return el( \'img\', { src: props.attributes.logo } );
        }
    } );

} )(
    window.wp.blocks,
    window.wp.i18n,
    window.wp.element,
);
我从WP Gutenberg Handbook. 已创建属性等,但值为空,且未保存元字段。控制台登录编辑函数总是返回null,因为没有meta属性。我做错了什么?如果我将属性源更改为attribute, 该字段已正确保存。

3 个回复
SO网友:Alvaro

加载块并将其指定给块属性时,将读取元值。对块的更改将更新属性,当post保存时,值将保存到元。因此,据我所知,没有必要在registerBlockType js函数。块仅保存到元,因此在前端不会渲染任何内容(与非元块不同)。

因此,在您的情况下:

add_action( \'init\', function() {
    register_post_type( \'game\', [
        \'label\' => \'Games\',
        \'public\' => true,
        \'supports\' => [ \'editor\', \'custom-fields\' ],
        \'show_in_rest\' => true,
    ] );

    register_post_meta( \'game\', \'logo\', [
        \'single\' => true,
        \'show_in_rest\' => true,
        \'description\'  => \'A meta key associated with a string meta value.\',
        \'type\' => \'string\'
    ] );
} );
注意,我使用register_post_meta 它包含在版本4.9.8中,允许使用帖子类型名称(本例中为“游戏”)。正如@LABCAT在另一个答案中注意到的,使用register_meta 要求类型为“post”,即使对于自定义post类型也是如此。

然后在JavaScript文件中:

registerBlockType( \'game-post/meta\', {
    //...
    save: () => null,
});
我希望这有帮助。

SO网友:LABCAT

我也在努力学习如何做到这一点。您注册的元值不正确,应该是:

register_meta( \'post\', \'logo\', [
    \'single\' => true,
    \'show_in_rest\' => true,
    \'description\'  => \'A meta key associated with a string meta value.\',
    \'type\' => \'string\'
] );
请参见此处的$object\\u type参数文档:https://codex.wordpress.org/Function_Reference/register_meta

但我认为这不会让你的JS代码正常工作。

SO网友:Dale de Silva

除了其他人指出的代码中可能存在的任何其他错误外,我发现访问定义为“em”的属性;“元”有问题。

我已经发布了我自己的问题here.还有一份关于它的bug报告here.

基本上,虽然文档中说"meta attributes can be read and written by a block using the same interface as any attribute"。。。在save函数中似乎不是这样。

我发现属性(source“meta”的属性)不会出现在save函数中,直到edit函数使用setAttribute 在编辑器页面上的特定会话期间。

(这意味着在返回编辑页面时很难在保存和编辑功能输出之间保持一致)

如果您需要的话,我上面链接的bug报告会提供更多关于我发现的内容的详细信息。

结束

相关推荐

列出分类法:如果分类法没有POST,就不要列出分类法--取决于定制的POST-META?

这可能很难解释,我不知道是否有解决办法!?我有一个名为“wr\\u event”的自定义帖子类型和一个名为“event\\u type”的分层自定义分类法。自定义帖子类型有一个元框,用于event_date 并且与此帖子类型关联的所有帖子都按以下方式排序event_date. 我在循环中有一个特殊的条件来查询event_date 已经发生了-在这种情况下,它没有显示,但只列在我的档案中。就像你可以使用wp_list_categories() 我编写了一个自定义函数,它以完全相同的方式列出所有分类术语。现在