Utilisation de PHP pour rendre un bloc dans l’éditeur WordPress (Gutenberg)

Lors de la création d’un bloc dans l’éditeur de blocs WordPress (Gutenberg), vous avez probablement utilisé JavaScript pour rendre le bloc dans le contenu de votre message. Dans ce guide, nous allons examiner l’utilisation de PHP pour rendre le bloc, en créant ce que l’on appelle un "bloc dynamique".

Nous allons rester simple dans ce guide et développer ce que nous avons déjà construit dans notre guide du plugin WordPress Gutenberg. Cependant, les blocs dynamiques sont super utiles pour présenter des informations plus complexes dans un bloc, comme une post-boucle.

Conditions préalables

• Se familiariser avec la création de plugins pour WordPress Gutenberg

Créer PHP pour le bloc dynamique

Si vous ne l’avez pas déjà fait, suivez les étapes du guide du plugin WordPress Gutenberg, afin d’avoir une zone RichText modifiable.

Ajoutez le PHP suivant dans votre plugin (dans cet exemple wholesome-plugin.php), en remplaçant le bloc de code commençant par register_block_type:

register_block_type(
  'wholesomecode/wholesome-plugin',
  [
    'attributes'      => [
      'blockText' => [
        'default' => 'Wholesome Plugin – hello from the editor!',
        'type'    => 'string',
      ],
    ],
    'editor_script'   => 'wholesomecode-wholesome-plugin-block-editor',
    'editor_style'    => 'wholesomecode-wholesome-plugin-block-editor',
    'render_callback' => function( $attributes, $content) {
      $block_text = esc_html( $attributes['blockText'] );
      return "<p class='wp-block-wholesomecode-wholesome-plugin'>$block_text</p>";
    },
    'style'           => 'wholesomecode-wholesome-plugin-block',
  ]
);

Les attributs

La première chose que vous remarquerez est que nous avons redéfini les attributs dans ce fichier, et ce sont les mêmes que ceux que nous avons définis dans le /src/index.jsfichier de notre guide précédent.

La raison pour laquelle nous devons le faire est que notre sortie puisse accéder aux types d’attributs et à leur contenu par défaut.

Rappel de rendu

Dans le code ci-dessus, nous avons également ajouté l’argument render_callbackà la register_block_typefonction. Ceci gère la sortie du bloc, remplaçant la savefonction dans le /src/index.jsfichier.

La render_callbackfonction prend deux paramètres. Ceux-ci sont:

• $attributes– cela reçoit les attributs que nous avons définis à la fois dans l’ attributesargument de cette fonction et ceux du /src/index.jsfichier
• $content– cela reçoit tout ce qui a été enregistré via la saveméthode dans le /src/save.jsfichier. C’est pratique si nous rendons InnerBlocks, qui autrement ne serait pas transmis à la méthode de rendu PHP.

Dans cet exemple, nous avons utilisé une fonction anonyme pour le render_callback, mais nous aurions pu assez facilement passer une référence à une fonction ici à la place, et la définir ailleurs.

Notez que nous n’avons pas la possibilité d’accéder aux props dans PHP render_callback, nous avons donc dû ajouter manuellement la classe HTML à la <p>balise afin que nos styles fonctionnent toujours (en théorie, nous pourrions tirer parti du $contentparamètre et faire un peu de trouver et remplacer la supercherie si nous les voulions, mais c’est quelque chose pour un autre guide).

Supprimer la méthode d’enregistrement JavaScript

Comme mentionné précédemment, le $contentparamètre de la render_callbackfonction stocke la sortie de la saveméthode JavaScript, mais notez que nous ne l’utilisons pas dans notre code.

Dans le fichier, /src/index.jsremplacez la saveméthode par la suivante :

Cela indique à la méthode save de ne rien renvoyer.

Supprimer l’ saveimportation

Pendant que nous y sommes, supprimez également la ligne suivante de /src/index.js:

import save from './save';

Vous pouvez maintenant également supprimer le /src/save.jsfichier.

Compilation du plugin

Ouvrez le terminal, assurez-vous d’être dans le répertoire racine de votre plugin et lancez la commande suivante :

Le script compilera. Si vous avez des erreurs, le terminal devrait vous en informer.

Utiliser le bloc dynamique

Vous devriez maintenant pouvoir insérer le bloc dans une page, modifier son contenu et l’afficher sur le front-end.

Le bloc dynamique en action

Dans cet exemple de base, le bloc aura le même aspect et se comportera que si vous aviez utilisé une méthode de rendu JavaScript.

• Découvrez comment créer des blocs enfants imbriqués avec le InnerBlockscomposant
• Explorez le stockage des attributs Gutenberg en tant que champs post-méta