web-dev-qa-db-ja.com

Gutenbergがメタに保存する属性を作成する方法

私はグーテンベルクと遊んでいます、そしてそれがどのようにメタに保存するべきかについて少し混乱しています。これが私のカスタム投稿とメタです。

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が返されます。何がおかしいのですか？属性のソースをattributeに変更すると、フィールドは正しく保存されます。

custom-post-typespost-metablock-editor
4
Gasim

メタ値は、ブロックが読み込まれてブロック属性に割り当てられたときに読み取られます。ブロックを変更すると属性が更新され、投稿を保存するときに値がメタに保存されます。したがって、私が理解している限りでは、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'
    ] );
} );

バージョン4.9.8に含まれていて、ポストタイプ名（この場合は "game"）を使用できるregister_post_metaを使用したことに注意してください。 @LABCATがregister_metaを使った他の答えで気づいたように、カスタム投稿タイプであってもタイプが "投稿"であることを必要とします。

それからJavaScriptファイルで：

registerBlockType( 'game-post/meta', {
    //...
    save: () => null,
});

これが役に立つことを願っています。

1
Alvaro

私もこれを行う方法を学ぼうとしています。あなたはあなたのメタ値を誤って登録しました。

register_meta( 'post', 'logo', [
    'single' => true,
    'show_in_rest' => true,
    'description'  => 'A meta key associated with a string meta value.',
    'type' => 'string'
] );

ここで$ object_typeパラメータのドキュメントを参照してください。 https://codex.wordpress.org/Function_Reference/register_meta

私のJSコードがうまくいくとは思わない。

0
LABCAT