web-dev-qa-db-fra.com

Gutenberg comment faire attribut pour enregistrer en méta

Je joue avec Gutenberg et je suis un peu confus sur la façon dont il faut économiser en méta. Voici mon post personnalisé et méta:

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'
    ] );
} );

Et mon fichier 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,
);

J'ai repris l’idée source de WP Manuel de Gutenberg . L'attribut est créé, etc., mais les valeurs sont vides et le champ méta n'est pas enregistré. Et le journal de la console dans la fonction d'édition renvoie toujours null car il n'y a pas d'attribut méta. Qu'est-ce que je fais mal? Si je change l'attribut source en attribute, le champ est correctement enregistré.

custom-post-typespost-metablock-editor
4
Gasim

La méta-valeur est lue lors du chargement du bloc et affectée à son attribut. Les modifications apportées au bloc mettront à jour l'attribut. Lorsque la publication enregistrera, la valeur sera sauvegardée dans la méta. Donc, autant que je sache, il n’est pas nécessaire de sauvegarder quoi que ce soit dans la fonction registerBlockType js. Le bloc enregistre uniquement dans la méta, de sorte que rien ne sera rendu au début (contrairement aux blocs non méta).

Donc dans votre cas:

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'
    ] );
} );

Notez que j’ai utilisé register_post_meta qui était inclus dans la version 4.9.8 et permet d’utiliser le nom du type de message ("jeu" dans ce cas). Comme @LABCAT l’a remarqué dans l’autre réponse, utiliser register_meta exige que le type soit "post" même pour les types de post personnalisés.

Puis dans le fichier JavaScript:

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

J'espère que ça aide.

1
Alvaro

J'essaie d'apprendre comment faire cela aussi. Vous avez mal enregistré votre méta-valeur, cela devrait être:

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

Voir la documentation du paramètre $ object_type ici: https://codex.wordpress.org/Function_Reference/register_meta

Je ne pense pas que votre code JS fonctionnera bien.

0
LABCAT