Utilisation des champs post-méta pour stocker les attributs dans l’éditeur de blocs WordPress (Gutenberg)

Lorsque vous enregistrez et stockez des attributs dans l’éditeur de blocs WordPress (Gutenberg), vous avez la possibilité de les stocker en tant que méta post, au lieu des attributs de bloc habituels.

En utilisant cette méthode, vous pourriez avoir un paramètre dans votre bloc qui peut contrôler quelque chose à l’échelle de la publication ou sur le modèle.

Une note importante sur le rendu des méta-attributs de publication

Vous ne pouvez pas afficher les méta-attributs de publication à l’aide d’une méthode d’enregistrement JavaScript. Une décision a été prise par l’équipe de Gutenberg pour empêcher cela, car les blocs qui rendent les champs méta post peuvent facilement être cassés en raison du changement de méta post ailleurs sur le post.

Dans ce guide, nous allons développer ce que nous avons déjà construit dans notre guide du plugin WordPress Gutenberg, ainsi que dans le guide Dynamic Block.

Conditions préalables

• Se familiariser avec la création de plugins pour WordPress Gutenberg
• Familiarisez-vous avec les blocs dynamiques et le rendu côté serveur

Enregistrement du Post Meta en PHP

Avant de pouvoir utiliser un champ post meta en JavaScript, nous devons nous assurer que nous l’avons enregistré dans PHP en utilisant register_metaet que l’ show_in_restargument a été défini sur true.

Suite au guide Dynamic Block, ouvrez le fichier PHP racine du plugin (dans ce cas wholesome-plugin.php) et ajoutez le code suivant au bas de ce fichier après toutes les autres fonctions :

function wholesomecode_wholesome_plugin_register_post_meta() {
    register_meta(
        'post',
        '_wholesomecode_wholesome_plugin_block_text',
        [
            'auth_callback' => '__return_true',
            'default'       => __( 'Wholesome Plugin – hello from the editor!', 'wholesome-plugin' ),
            'show_in_rest'  => true,
            'single'        => true,
            'type'          => 'string',
        ]
    );
}
add_action( 'init', 'wholesomecode_wholesome_plugin_register_post_meta' );

Ce code enregistre un champ méta appelé _wholesomecode_wholesome_plugin_block_textpour le posttype de publication. Cela garantit également que l’API REST peut accéder à ce champ méta avec la show_in_restvaleur définie sur true.

Nous transmettons également la fonction __return_trueà l’ auth_callbackargument pour nous assurer que nous avons les autorisations nécessaires pour accéder à ce paramètre. Si nous voulions une meilleure sécurité pour ce paramètre, nous le modifierions en une fonction personnalisée qui vérifie un certain rôle d’utilisateur.

Enregistrement des méta-attributs de publication en JavaScript

Encore une fois, à la suite du guide précédent, ouvrez /src/index.jset remplacez le attributespar ce qui suit :

attributes: {
  blockText: {
    meta: '_wholesomecode_wholesome_plugin_block_text',
    source: 'meta',
  },
},

Au lieu d’indiquer le type d’attribut et d’attribuer une valeur par défaut, nous définissons à la place la méta-clé d’où proviendra l’attribut de données et indiquons que le sourcede l’attribut est meta.

Comme indiqué dans l’avertissement en haut de ce guide, vous n’êtes pas en mesure d’accéder aux attributs de champ méta post via la saveméthode JavaScript, alors compilez le plugin avec npm startet voyons comment nous pouvons sortir le méta.

Rendu du Post Meta

Parce que nous avons enregistré notre attribut en tant que post meta, nous pourrions le sortir n’importe où dans WordPress en utilisant get_post_meta(à condition que nous ayons le $post_id):

get_post_meta( $post_id, '_wholesomecode_wholesome_plugin_block_text', true );

En continuant le guide Dynamic Block, voyons comment accéder à cet attribut côté serveur en PHP.

La méta n’est pas disponible via le $attributesparamètre de render_callback, car les attributs post-meta ne transmettent pas leur valeur à ce paramètre, mais nous pouvons accéder à l’ $postobjet global pour obtenir l’ID de publication.

Gardant cela à l’esprit, mettons à jour notre register_block_typepour générer la méta post :

register_block_type(
  'wholesomecode/wholesome-plugin',
  array(
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      global $post;
      $block_text = get_post_meta( $post->ID, '_wholesomecode_wholesome_plugin_block_text', true );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',) );

Notez que nous n’avons plus besoin d’enregistrer le attributesici, car nous accédons uniquement au champ méta post via la get_post_metafonction.

Utilisation du bloc

Ce n’est pas le meilleur cas d’utilisation de ce type de méta, mais lorsque nous utilisons le bloc, nous pouvons voir que parce que nous stockons les attributs en tant que méta post, si nous mettons à jour l’attribut dans un bloc, il met à jour tous les blocs, comme la méta de la publication est stockée contre la publication, pas le bloc individuel :

Publier les méta-attributs en action

• Découvrez comment créer des blocs enfants imbriqués avec le InnerBlockscomposant
• Allez plus loin dans l’utilisation de la post-méta dans Gutenberg en créant des méta-boîtes personnalisées dans Gutenberg
• Jetez un œil à l’utilisation des paramètres pour stocker des données dans le tableau des options de Gutenberg