Gutenberg vous laisse-t-il encore perplexe ? Ou faites-vous partie de ceux qui croient fermement au potentiel de l’éditeur de blocs et qui veulent découvrir jusqu’où ils peuvent pousser leur créativité en utilisant l’éditeur de blocs ?
Quelle que soit la catégorie d’utilisateurs à laquelle vous appartenez, Gutenberg est là pour rester et cet article vous donnera un aperçu approfondi de ce qui se passe dans les coulisses de l’éditeur de bloc WordPress. Mais ce n’est pas tout !
Suite à notre précédent tutoriel où nous avons fourni une introduction générale au développement de blocs Gutenberg, cet article va au-delà des bases, en présentant des types de blocs plus avancés. Ces blocs sont désignés sous le nom de blocs dynamiques.
Aujourd’hui, vous allez apprendre ce que sont les blocs dynamiques, comment ils fonctionnent et tout ce que vous devez savoir pour créer des blocs dynamiques à partir de zéro.
Alors, que sont les blocs dynamiques de Gutenberg, et quelles sont les principales différences entre les blocs statiques et dynamiques ?
Que sont les blocs dynamiques ? Un exemple
Alors qu’avec les blocs statiques, le contenu est ajouté manuellement par l’utilisateur lors de la moficiation d’un article ou d’une page, avec les blocs dynamiques, le contenu est chargé et traité à la volée lors du chargement de la page. Avec les blocs dynamiques, le contenu du bloc est récupéré dans la base de données et affiché tel quel ou résultant de toute sorte de manipulation de données.
Expliquons cela à l’aide d’un exemple. Supposons que vous souhaitiez créer un groupe de blocs imbriqués affichant les détails de l’auteur de l’article avec une sélection des derniers articles du même auteur.
En tant qu’utilisateurs de Gutenberg, vous pourriez utiliser les blocs suivants :
- Le bloc central Titre
- Le bloc central Auteur de l’article
- Le bloc central Derniers articles
Vous pourriez également créer un groupe incluant ces blocs et ajouter le groupe aux blocs réutilisables pour une utilisation future.
C’est assez simple, n’est-ce pas ? Vous pouvez créer un bloc dynamique et l’ajouter à vos articles et pages en un clin d’œil.
À partir de WordPress 5.9, l’éditeur de blocs propose plus de 90 blocs différents, et il y a de fortes chances que vous trouviez le bloc qui vous convient dès le départ. Et, si vous avez besoin de plus, faites une recherche rapide dans le répertoire des extensions WordPress et vous trouverez de nombreuses extensions gratuites fournissant des blocs supplémentaires.
Mais qu’en est-il si vous êtes un développeur WordPress – ou si vous envisagez une carrière de développeur WordPress? Peut-être avez-vous des besoins très spécifiques et ne trouvez pas le bloc que vous recherchez, ou vous voulez simplement acquérir de nouvelles compétences professionnelles. Dans de telles situations, vous pourriez vouloir apprendre à créer vos blocs dynamiques.
Les blocs dynamiques de Gutenberg du point de vue d’un développeur
Les blocs dynamiques ont deux cas d’utilisation principaux.
Le premier cas d’utilisation est lorsque vous devez mettre à jour le contenu d’un bloc alors que la page contenant le bloc n’a pas été mise à jour. Par exemple, cela se produit lorsque le bloc comprend une liste des derniers articles ou commentaires, et en général chaque fois que le contenu du bloc est généré dynamiquement à l’aide de données extraites de la base de données.
Le deuxième cas d’utilisation est lorsqu’une mise à jour du code du bloc doit être immédiatement affichée sur l’interface publique. En utilisant un bloc dynamique au lieu d’un bloc statique, les modifications sont immédiatement appliquées à toutes les occurrences du bloc.
En revanche, si vous modifiez le HTML produit par un bloc statique, l’utilisateur verra une boîte de dialogue d’invalidation jusqu’à ce que chaque instance de la version précédente du bloc soit supprimée et remplacée par la nouvelle version, ou que vous marquiez l’ancienne version comme étant dépréciée (voir également Dépréciation et validation du bloc, Dépréciation et expérience de migration).
Ceci étant dit, il y a quelques concepts que vous devez comprendre avant de pouvoir commencer à construire des blocs dynamiques.
État de l’application et stockage de données
Gutenberg est une application SPA React, et tout dans Gutenberg est un composant React. Le titre de l’article, les en-têtes, les paragraphes, les images et tout bloc de contenu HTML dans l’éditeur est un composant React, de même que les contrôles de la colonne d’outils latérale et des blocs.
Dans notre article précédent, nous avons uniquement utilisé les propriétés pour stocker des données. Dans cet article, nous allons aller un peu plus loin en introduisant le concept de state.
Pour faire simple, l’objet state est un objet JavaScript ordinaire utilisé pour contenir des informations sur un composant. Le state du composant peut changer au fil du temps, et chaque fois qu’il change, le composant se présente à nouveau.
Tout comme l’objet state, les propriétés sont des objets JavaScript ordinaires utilisés pour contenir des informations sur le composant. Mais il y a une différence essentielle entre les propriétés et state:
propssont transmises au composant (similaires aux paramètres de fonction) alors questateest géré au sein du composant (similaire aux variables déclarées dans une fonction).
Vous pouvez considérer l’état comme un instantané des données prises à un moment donné qu’une application stocke pour contrôler le comportement d’un composant. Par exemple, si la colonne latérale des réglages de l’éditeur de blocs est ouverte, une information sera stockée quelque part dans l’objet state.
Lorsque l’information est partagée au sein d’un seul composant, nous l’appelons état local. Lorsque l’information est partagée entre plusieurs composants au sein d’une application, nous l’appelons état d’application.
L’Application State est étroitement lié au concept de stockage. Selon la documentation de Redux:
Un stockage contient l’ensemble de l’arbre d’état de votre application. La seule façon de changer l’état à l’intérieur de celui-ci est de distribuer une action sur celui-ci.
Ainsi, Redux stocke l’état d’une application dans un seul arbre d’objets immuable (à savoir un stockage). L’arbre d’objets ne peut être modifié qu’en créant un nouvel objet à l’aide d’actions et de réducteurs.
Dans WordPress, les stockages sont gérés par le module de données de WordPress.
Modularité, paquets et stockages de données dans Gutenberg
Le référentiel de Gutenberg est construit de A à Z sur plusieurs modules réutilisables et indépendants qui, combinés ensemble, construisent l’interface d’édition. Ces modules sont également appelés paquets ou packages.
La documentation officielle répertorie deux types de paquets différents :
- Les paquets de production constituent le code de production qui s’exécute dans le navigateur. Il existe deux types de paquets de production dans WordPress :
- Les paquets avec des feuilles de style fournissent des feuilles de style pour fonctionner correctement.
- Les paquets avec stockage de données définissent les stockages de données pour gérer leur état. Les paquets avec stockage de données peuvent être utilisés par des extensions et des thèmes tiers pour récupérer et manipuler des données.
- Les paquets de développement sont utilisés en mode développement. Ces paquets comprennent des outils de linting, de test, de construction, etc.
Ici, nous nous intéressons surtout aux paquets avec des stockages de données, utilisés pour récupérer et manipuler des données.
Le stockage de données de WordPress
Le module de données de WordPress est construit sur Redux et partage les trois principes fondamentaux de Redux, avec toutefois quelques différences essentielles.
La documentation officielle fournit la définition suivante:
Le module de données de WordPress sert de hub pour gérer l’état de l’application à la fois pour les extensions et pour WordPress lui-même, en fournissant des outils pour gérer les données au sein et entre les modules distincts. Il est conçu comme un modèle modulaire d’organisation et de partage des données : suffisamment simple pour satisfaire les besoins d’une petite extension, tout en étant évolutif pour répondre aux exigences d’une application complexe à page unique.
Par défaut, Gutenberg enregistre plusieurs stockages de données dans l’état de l’application. Chacun de ces stockages a un nom et un but spécifiques :
core: Données du cœur de WordPresscore/annotations: Annotationscore/blocks: Données sur les types de blocscore/block-editor: Données de l’éditeur de blocscore/editor: Données de l’éditeur de publicationcore/edit-post: Les données de l’interface utilisateur de l’éditeurcore/notices: Données de notificationscore/nux: Données NUX (New User Experience)core/viewport: Les données de la fenêtre d’affichage
Grâce à ces stockages, vous pourrez accéder à tout un tas de données :
- Données relatives à l’article actuel, telles que le titre de l’article, l’extrait, les catégories et les étiquettes, les blocs, etc.
- Données relatives à l’interface utilisateur, par exemple si une bascule est activée ou désactivée.
- Données relatives à l’ensemble de l’installation WordPress, telles que les taxonomies enregistrées, les types d’articles, le titre du blog, les auteurs, etc.
Ces stockages vivent dans l’objet global wp. Pour accéder à l’état d’un stockage, vous utiliserez la fonction select.
Pour voir comment cela fonctionne, créez un nouvel article ou une nouvelle page et lancez l’inspecteur de votre navigateur. Trouvez la console et saisissez la ligne de code suivante :
wp.data.select("core")Le résultat sera un objet comprenant une liste de fonctions que vous pouvez utiliser pour obtenir des données du stockage de données core. Ces fonctions sont appelées sélecteurs et agissent comme des interfaces pour accéder aux valeurs d’état.
Le stockage de données de WordPress comprend des informations sur WordPress en général et les sélecteurs sont le moyen d’obtenir ces informations. Par exemple, getCurrentUser() renvoie les détails de l’utilisateur actuel :
wp.data.select("core").getCurrentUser()
Un autre sélecteur que vous pouvez utiliser pour récupérer les détails de l’utilisateur à partir du stockage de données est getUsers() :
wp.data.select("core").getUsers()L’image suivante montre l’objet de la réponse :
Pour obtenir les détails d’un seul utilisateur, vous pouvez simplement saisir la ligne suivante :
wp.data.select("core").getUsers()[0]En utilisant le même sélecteur, vous pouvez également récupérer les utilisateurs du site avec le rôle author attribué :
wp.data.select( 'core' ).getUsers({ who: 'authors' })Vous pouvez également récupérer les taxonomies enregistrées :
wp.data.select("core").getTaxonomies()
Une liste des types de publications enregistrés :
wp.data.select("core").getPostTypes()Ou une liste des extensions :
wp.data.select("core").getPlugins()Essayons maintenant d’accéder à un stockage de données différent. Pour cela, vous utiliserez toujours la fonction select, mais en fournissant un espace de noms différent. Essayons ce qui suit :
wp.data.select("core/edit-post")Maintenant, vous obtiendrez l’objet de réponse suivant.
Si vous voulez savoir si la colonne latérale des réglages est ouverte ou non, vous utiliserez le sélecteur isEditorSidebarOpened:
wp.data.select("core/edit-post").isEditorSidebarOpened()Cette fonction renvoie true si la colonne latérale est ouverte :
Comment accéder aux données de l’article
Vous devriez maintenant avoir une compréhension de base de la façon d’accéder aux données. Nous allons maintenant nous intéresser de plus près à un sélecteur spécifique, la fonctiongetEntityRecords , qui est le sélecteur qui donne accès aux données de l’article.
Dans l’éditeur de bloc, faites un clic droit et sélectionnez Inspecter. Dans l’onglet Console, copiez et collez la ligne suivante :
wp.data.select("core").getEntityRecords('postType', 'post')Ceci envoie une requête à l’API Rest et renvoie un tableau d’enregistrements correspondant aux derniers articles de blog publiés.
getEntityRecords accepte trois paramètres:
kindchaîne de caractères : Type d’entité (par exemple,postType).namechaîne de caractères : Nom de l’entité (c.-à-d.post).query?objet : Requête de termes facultatifs (par exemple,{author: 0}).
Vous pouvez construire des demandes plus spécifiques en utilisant un objet d’arguments.
Par exemple, vous pouvez décider que la réponse ne doit contenir que les articles d’une catégorie spécifique :
wp.data.select("core").getEntityRecords('postType', 'post', {categories: 3})Vous pouvez également demander uniquement les articles d’un auteur donné :
wp.data.select("core").getEntityRecords('postType', 'post', {author: 2})Si vous cliquez sur l’un des enregistrements renvoyés par getEntityRecords, vous obtenez une liste de propriétés pour l’enregistrement sélectionné :
Si vous voulez que la réponse inclue l’image mise en avant, vous devrez ajouter un argument supplémentaire à votre requête précédente :
wp.data.select("core").getEntityRecords('postType', 'post', {author: 2, _embed: true})
Maintenant, vous devriez avoir une meilleure compréhension de la façon d’accéder au stockage de données de WordPress et de récupérer les détails des articles. Pour voir de plus près le sélecteur getEntityRecords, voir aussi Demander des données dans Gutenberg avec getEntityRecords.
Comment créer un bloc dynamique : Un exemple de projet
Après notre long préambule théorique, nous pouvons passer à la pratique et créer un bloc dynamique à l’aide des outils que nous avons présentés dans notre précédent tutoriel sur le développement de blocs.
Dans cet article, nous avons abordé les points suivants
- Comment configurer un environnement de développement WordPress
- Qu’est-ce qu’un échafaudage de bloc
- Comment construire un bloc statique Gutenberg
C’est pourquoi nous ne couvrirons pas ces sujets en profondeur dans le présent article, mais n’hésitez pas à vous référer à notre guide précédent pour toute information complémentaire, ou simplement pour vous rafraîchir la mémoire.
Configuration d’un environnement de développement JavaScript
Commençons par configurer un environnement de développement JavaScript.
Installez ou mettez à jour Node.js
Tout d’abord, installez ou mettez à jour Node.js. Une fois que vous avez terminé, lancez votre outil de ligne de commande et exécutez la commande suivante :
node -vVous devriez voir votre version de node.
Configurez votre environnement de développement
Ensuite, vous aurez besoin d’un environnement de développement pour WordPress. Pour nos exemples, nous avons utilisé DevKinsta, notre outil de développement WordPress gratuit qui vous permet de lancer un site WordPress local en un rien de temps.
Mais vous êtes toujours libre de choisir l’environnement de développement local WordPress de votre choix, comme MAMP ou XAMPP, ou même la solution officielle wp-env.
Si vous utilisez DevKinsta, cliquez sur Nouveau site WordPress ou sur Site personnalisé, remplissez les champs du formulaire et appuyez sur Créer un site.
Le processus d’installation prend une minute ou deux. Lorsqu’il est terminé, lancez votre site de développement WordPress local.
Configurez votre plugin de bloc
Ce dont vous avez besoin maintenant, c’est d’un extension de bloc de démarrage. Pour éviter tous les tracas d’une configuration manuelle, l’équipe de développeurs du cœur de WordPress a publié l’outil @wordpress/create-block, qui est l’outil officiel de configuration zéro pour la création de blocs Gutenberg.
Nous avons couvert @wordpress/create-block en profondeur dans notre article précédent, donc ici nous pouvons commencer la configuration tout de suite.
Dans votre outil de ligne de commande, allez dans le dossier /wp-content/plugins:
Une fois là, exécutez la commande suivante :
npx @wordpress/create-blockVous êtes maintenant prêt à installer le paquet @wordpress/create-block:
Pour confirmer, saisissez y et appuyez sur Entrée.
Cela génère les fichiers PHP, SCSS et JS de l’extension en mode interactif.
Vous trouverez ci-dessous les détails que nous utiliserons dans notre exemple. N’hésitez pas à modifier ces détails en fonction de vos préférences :
Une fois que vous avez appuyé sur Entrée, l’extension est téléchargée et configurée.
Le processus peut prendre quelques minutes. Lorsqu’il est terminé, vous devriez voir l’écran suivant :
Vous verrez une liste des commandes que vous pouvez exécuter à partir du répertoire de l’extension :
$ npm start– Lancez la construction pour le développement.$ npm run build– Construire le code pour la production.$ npm run format– Formater les fichiers.$ npm run lint:css– Lint les fichiers CSS.$ npm run lint:js– Lint les fichiers JavaScript.$ npm run packages-update– Mise à jour des paquets WordPress à la dernière version.
Ok, maintenant déplacez-vous dans le répertoire des extensions avec la commande suivante :
cd author-pluginEt démarrez votre build de développement :
npm startEnsuite, allez vers l’écran des extensions dans votre tableau de bord WordPress et activez l’extension Author box:
Vous pouvez maintenant vérifier si l’extension fonctionne correctement. Créez un nouvel article et commencez à saisir / pour lancer l’outil d’insertion rapide :
Vous trouverez également le bloc Boîte d’auteur dans l’outil d’insertion de blocs, sous la catégorie Widgets. Sélectionnez le bloc pour l’ajouter au canevas de l’éditeur :
Vous avez terminé. Maintenant, enregistrez l’article et prévisualisez la page pour vérifier si le bloc s’affiche correctement.
L’échafaudage de blocs
Nous avons couvert l’échafaudage de bloc dans notre article précédent. Nous ne ferons donc ici qu’un survol rapide des fichiers que nous allons modifier pour nos exemples.
Le dossier racine
Le dossier racine est l’endroit où vous trouverez le fichier PHP principal et plusieurs sous-dossiers.
author-plugin.php
Par défaut, le paquetage @wordpress/create-block fournit le fichier PHP suivant :
/**
* Plugin Name: Author box
* Description: An example block for Kinsta readers
* Requires at least: 5.8
* Requires PHP: 7.0
* Version: 0.1.0
* Author: Carlo
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: author-plugin
*
* @package author-box
*/
/**
* Registers the block using the metadata loaded from the `block.json` file.
* Behind the scenes, it registers also all assets so they can be enqueued
* through the block editor in the corresponding context.
*
* @see https://developer.wordpress.org/reference/functions/register_block_type/
*/
function author_box_author_plugin_block_init() {
register_block_type( __DIR__ . '/build' );
}
add_action( 'init', 'author_box_author_plugin_block_init' );Dans l’en-tête, vous remarquerez les détails que nous avons saisis lors de la configuration.
Avec les blocs statiques, vous travaillerez la plupart du temps sur les fichiers JavaScript situés dans le dossier src. Avec les blocs dynamiques, vous écrirez du code PHP pour afficher le contenu du bloc sur l’interface publique.
Le dossier src
Le dossier src est votre dossier de développement. Vous y trouverez les fichiers suivants :
- block.json
- index.js
- edit.js
- save.js
- editor.scss
- style.scss
block.json
block.json est votre fichier de métadonnées. @wordpress/create-block génère le fichier block.json suivant :
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "author-box/author-plugin",
"version": "0.1.0",
"title": "Author box",
"category": "widgets",
"icon": "businessperson",
"description": "An example block for Kinsta readers",
"supports": {
"html": false
},
"textdomain": "author-plugin",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css"
}Pour une vue plus détaillée du fichier block.json en général, veuillez vous reporter à notre précédent article de blog.
index.js
Le fichier index.js est l’endroit où vous enregistrez le type de bloc sur le client :
import { registerBlockType } from '@wordpress/blocks';
import './style.scss';
import Edit from './edit';
import save from './save';
registerBlockType('author-box/author-plugin', {
edit: Edit,
save,
});edit.js
Le fichier edit.js est l’endroit où vous construirez l’interface de bloc rendue dans l’éditeur :
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
import './editor.scss';
export default function Edit() {
return (
<p {...useBlockProps()}>
{__('Author box – hello from the editor!', 'author-plugin')}
</p>
);
}save.js
Le fichier save.js contient le script qui construit le contenu du bloc à enregistrer dans la base de données. Nous n’utiliserons pas ce fichier dans ce tutoriel :
import { __ } from '@wordpress/i18n';
import { useBlockProps } from '@wordpress/block-editor';
export default function save() {
return (
<p {...useBlockProps.save()}>
{__('Author box – hello from the saved content!', 'author-plugin')}
</p>
);
}Construire le bloc pour le rendre dans l’éditeur
Ouvrez votre projet dans Visual Studio Code ou tout autre éditeur de code que vous souhaitez.
Si vous utilisez Visual Studio Code, allez dans Terminal -> Nouveau terminal. Cela lancera une fenêtre de terminal sur le dossier racine de votre projet.
Dans le terminal (ou dans votre outil de ligne de commande préféré), saisissez la commande suivante :
npm startVous exécutez maintenant l’environnement node en mode développement.
À partir de maintenant, vous allez suivre deux voies différentes. Pour rendre le bloc dans l’éditeur, vous travaillerez dans le fichier edit.js. Pour rendre le bloc sur l’interface publique, vous devrez écrire du code PHP dans le fichier principal de l’extension.
Maintenant, retroussez vos manches car le codage commence :
Enregistrer le bloc sur le serveur
Tout d’abord, vous devez enregistrer le bloc sur le serveur et écrire le code PHP pour récupérer les données de la base de données.
Dans le fichier author-plugin.php, vous devrez passer un deuxième argument à la fonctionregister_block_type :
function author_box_author_plugin_block_init() {
register_block_type( __DIR__ . '/build', array(
'render_callback' => 'author_box_author_plugin_render_author_content'
) );
}
add_action( 'init', 'author_box_author_plugin_block_init' );Le deuxième argument est un tableau d’arguments pour l’enregistrement d’un type de bloc (voir la liste complète des arguments disponibles ici). Dans le code ci-dessus, nous avons uniquement fourni render_callback, qui détermine la fonction de rappel qui rend le bloc à l’écran.
Ensuite, vous allez déclarer la fonction :
function author_box_author_plugin_render_author_content() {
return 'Hello World!';
}Enregistrez le fichier, créez un nouvel article ou une nouvelle page, et ajoutez le bloc Author Box au canevas de l’éditeur.
L’éditeur de blocs affiche toujours le bloc de démarrage, car nous n’avons pas encore modifié le fichier edit.js.
Mais si vous prévisualisez l’article dans l’interface publique, vous verrez que le contenu du bloc d’origine a maintenant été remplacé par la chaîne « Hello World ».
Maintenant, puisque le HTML rendu sur l’interface publique est généré par le fichier PHP, il ne sera pas nécessaire que la fonction save renvoie quoi que ce soit. Passons donc directement au fichier save.js et modifions le code comme indiqué ci-dessous :
export default function save() {
return null;
}Définir les attributs du bloc
Vous avez maintenant besoin d’un endroit pour stocker les réglages de l’utilisateur. Par exemple, le nombre d’éléments de publication à récupérer dans la base de données, l’affichage ou non d’un champ spécifique, etc. Pour cela, vous allez définir un certain nombre d’attributes dans le fichier block.json.
Par exemple, vous pouvez donner à l’utilisateur la possibilité de déterminer le nombre d’articles à inclure dans le bloc, l’option d’afficher l’image mise en avant, la date, l’extrait, et/ou de masquer/afficher la photo de profil de l’auteur.
Voici la liste complète des attributs que nous utiliserons pour construire notre bloc d’exemple :
{
...
"attributes": {
"numberOfItems": {
"type": "number",
"default": 3
},
"columns": {
"type": "number",
"default": 1
},
"displayDate": {
"type": "boolean",
"default": true
},
"displayExcerpt": {
"type": "boolean",
"default": true
},
"displayThumbnail": {
"type": "boolean",
"default": true
},
"displayAuthorInfo": {
"type": "boolean",
"default": true
},
"showAvatar": {
"type": "boolean",
"default": true
},
"avatarSize": {
"type": "number",
"default": 48
},
"showBio": {
"type": "boolean",
"default": true
}
}
}Construire le bloc à rendre dans l’éditeur
Le sélecteur getEntityRecords est inclus dans le paquetage @wordpress/data. Pour l’utiliser, vous devez importer le hook useSelect de ce paquet dans votre fichier edit.js:
import { useSelect } from '@wordpress/data';Ensuite, ajoutez le code suivant à la fonction Edit():
const posts = useSelect( ( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': 3
});
});Dans le code ci-dessus, nous avons codé en dur le nombre d’articles. Mais vous voudrez peut-être donner aux utilisateurs la possibilité de définir un nombre différent d’articles. Vous pouvez utiliser un attribut pour cela.
Dans votre block.json, vous devriez avoir défini un attribut numberOfItems. Vous pouvez l’utiliser dans votre fonction Edit comme indiqué ci-dessous :
export default function Edit( { attributes } ) {
const { numberOfItems } = attributes;
const posts = useSelect( ( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': numberOfItems
});
});
console.log( posts );
return (
...
);
}Vous ne verrez pas encore les articles à l’écran, mais exécutez une console.log et voyez ce qui se passe dans la console de l’inspecteur de votre navigateur :
useSelect peut prendre deux arguments : un callback en ligne et un tableau de dépendances. Les deux renvoient une version mémorisée de la callback qui ne change que lorsqu’une des dépendances change.
Ainsi, pour récupérer à nouveau les articles à chaque modification de l’attribut numberOfItems, vous devez modifier la fonction Edit comme indiqué ci-dessous :
export default function Edit( { attributes } ) {
const { numberOfItems } = attributes;
const posts = useSelect(
( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': numberOfItems
});
},
[ numberOfItems ]
);
console.log(posts);
return (
...
);
}Ensuite, vous devez rendre votre liste d’articles. Pour cela, vous pouvez utiliser la méthode JavaScript intégrée map:
export default function Edit( { attributes } ) {
const { numberOfItems } = attributes;
const posts = useSelect(
( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': numberOfItems
});
},
[ numberOfItems ]
);
console.log(posts);
return (
<div { ...useBlockProps() }>
<ul>
{ posts && posts.map( ( post ) => {
return (
<li key={ post.id }>
<h5>
<a href={ post.link }>
{
post.title.rendered ?
post.title.rendered :
__( 'Default title', 'author-plugin' )
}
</a>
</h5>
</li>
)
})}
</ul>
</div>
);
}Tout d’abord, elle vérifie si vous avez au moins un article dans le tableau, puis exécute la boucle.
Notez que, comme nous utilisons la méthode map avec un composant React, nous utilisons également un attribut key pour attribuer l’ID de l’article à l’élément de liste actuel.
post.link et post.title.rendered rendent respectivement l’URL et le titre de l’article.
L’image ci-dessous montre la liste complète des propriétés de l’objet post.
Le code ci-dessus n’est qu’un exemple de base de l’utilisation de getEntityRecords. Il est maintenant temps de mettre nos connaissances en pratique.
Disons que vous voulez empêcher votre bloc d’afficher les balises HTML que l’utilisateur a pu ajouter au titre de l’article. WordPress fournit un composantRawHTML pour cela.
Tout d’abord, vous allez importer le composant du paquetage @wordpress/element:
import { RawHTML } from '@wordpress/element';Ensuite, vous allez envelopper le titre de l’article dans un élément RawHTML:
<div { ...useBlockProps() }>
<ul>
{ posts && posts.map((post) => {
return (
<li key={ post.id }>
<h5>
<a href={ post.link }>
{ post.title.rendered ? (
<RawHTML>
{ post.title.rendered }
</RawHTML>
) : (
__( 'Default title', 'author-plugin' )
)}
</a>
</h5>
</li>
)
})}
</ul>
</div>Et c’est tout. Maintenant, ajoutez une balise HTML au titre de votre article et enregistrez l’article. Testez ensuite votre code avec et sans RawHTML et voyez comment le contenu de votre bloc change à l’écran.
Ajouter la date
WordPress fournit un certain nombre de fonctions JavaScript pour gérer et formater les dates. Pour utiliser ces fonctions, vous devrez d’abord les importer du paquet@wordpress/date dans votre fichier edit.js:
import { dateI18n, format, __experimentalGetSettings } from '@wordpress/date';dateI18n: Formate une date, en la traduisant dans la locale du site.format: Formate une date.__experimentalGetSettings: Affiche la date dans le format défini dans les réglages généraux de WordPress.
Ces fonctions ne sont pas documentées, mais vous trouverez des exemples utiles dans le code source de plusieurs blocs. Voir par exemple les fichiers latest-posts et post-date edit.js.
Ajoutez maintenant l’attribut displayDate:
const { numberOfItems, displayDate } = attributes;Ajoutez ensuite le code suivant dans l’élément <li>:
{
displayDate && (
<time
className='wp-block-author-box-author-plugin__post-date'
dateTime={ format( 'c', post.date_gmt ) }
>
{ dateI18n(
__experimentalGetSettings().formats.date,
post.date_gmt
)}
</time>
)
}Que se passe-t-il ici ?
- Si
displayDateesttrue, alors affichez la date en utilisant un élémenttime. - L’attribut
dateTimefournit l’heure et/ou la date de l’élément dans l’un des formats autorisés. dateI18nrécupère la date dans un format localisé. Cette fonction fonctionne de manière similaire à la fonction PHPdate_i18nde WordPress.
Ajouter l’extrait
Il devrait maintenant être facile d’ajouter l’extrait de l’article. Tout d’abord, jetez un coup d’œil à la propriété excerpt dans l’inspecteur du navigateur. Vous verrez que le contenu réel est stocké dans excerpt.rendered.
Ensuite, ajoutez l’attribut displayExcerpt à l’objet attributes:
const { numberOfItems, displayDate, displayExcerpt } = attributes;Puis ajoutez le code suivant avant la balise de fermeture </li> dans la fonction Edit:
{
displayExcerpt &&
post.excerpt.rendered && (
<p>
<RawHTML>
{ post.excerpt.rendered }
</RawHTML>
</p>
)
}Si vous n’êtes pas familier avec JavaScript, ici et ci-dessus, nous avons utilisé l’évaluation en circuit court, par laquelle, si toutes les conditions sont vraies, alors la valeur du dernier opérande est renvoyée (pour en savoir plus, lisez Inline If avec l’opérateur logique && et l’opérateur logique AND (&&)).
Enfin, vous pouvez tester votre code à nouveau. Changez la valeur de l’attribut dans le fichier block.json et voyez ce qui se passe dans l’éditeur.
Ajouter l’image vedette
Vous devez maintenant ajouter le code qui rend les images vedettes. Commencez par ajouter l’attribut displayThumbnail à attributes:
const {
numberOfItems,
displayDate,
displayExcerpt,
displayThumbnail
} = attributes;Vous devez maintenant déterminer où est stockée l’image mise en avant. Comme nous l’avons mentionné ci-dessus, pour obtenir l’image mise en avant, vous devez ajouter un nouvel argument _embed à votre requête. De retour à votre code, changez les arguments de la requête comme suit :
const posts = useSelect(
( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': numberOfItems,
'_embed': true
});
},
[ numberOfItems ]
);Ici, nous avons simplement ajouté '_embed': true au tableau des arguments. Cela donne un objet post contenant la propriété _embedded, qui fournit les détails de l’image dont vous avez besoin pour distribuer les images mises en avant.
Vous devriez maintenant savoir où trouver les détails de l’image.
Il vous suffit d’ajouter le code qui rend l’image à l’écran :
{
displayThumbnail &&
post._embedded &&
post._embedded['wp:featuredmedia'] &&
post._embedded['wp:featuredmedia'][0] &&
<img
className='wp-block-author-box-author-plugin__post-thumbnail'
src={ post._embedded['wp:featuredmedia'][0].media_details.sizes.medium.source_url }
alt={ post._embedded['wp:featuredmedia'][0].alt_text }
/>
}Enregistrez le fichier, passez à l’éditeur de blocs, et vérifiez si l’image s’affiche correctement lorsque l’attribut displayThumbnail est défini sur true.
Ajouter des contrôles de colonne latérale
Jusqu’à présent, nous avons utilisé les valeurs par défaut des attributs définies dans le block.json. Mais grâce à notre article précédent, nous savons que nous pouvons définir des gestionnaires d’événements pour donner aux utilisateurs la possibilité d’attribuer des valeurs personnalisées à chaque attribut.
Pour ce faire, vous allez ajouter un ensemble de contrôles à la colonne latérale des réglages du bloc. Dans edit.js, importez les composants suivants depuis les paquets correspondants :
import {
useBlockProps,
InspectorControls
} from '@wordpress/block-editor';
import {
PanelBody,
PanelRow,
QueryControls,
ToggleControl,
RangeControl
} from '@wordpress/components';InspectorControls: Contient les réglages de la colonne latérale qui affectent l’ensemble du bloc (voir sur GitHub)PanelBody: Ajoute un conteneur pliable à la colonne latérale des réglages (voir sur GitHub)PanelRow: Produit un conteneur générique pour les contrôles de la colonne latérale (voir sur GitHub)QueryControls: Fournit des contrôles de réglages pour construire une requête (voir sur GitHub)ToggleControl: Fournit un bouton à bascule pour que les utilisateurs puissent activer/désactiver une option spécifique (voir sur GitHub)RangeControl: Est utilisé pour effectuer des sélections dans une gamme de valeurs incrémentielles (voir sur GitHub)
Ensuite, vous devez mettre à jour la fonction Edit pour utiliser les contrôles désormais disponibles. Tout d’abord, modifiez la fonction Edit comme suit :
export default function Edit( { attributes, setAttributes } ) {
const {
numberOfItems,
columns,
displayExcerpt,
displayDate,
displayThumbnail
} = attributes;
const posts = useSelect(
( select ) => {
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'per_page': numberOfItems,
'_embed': true
});
},
[ numberOfItems ]
);
...
}Notez la propriété setAttributes transmise à la fonction Edit.
Vous pouvez maintenant ajouter les éléments correspondants à votre code JSX :
return (
<>
<InspectorControls>
<PanelBody title={ __( 'Content Settings', 'author-plugin' ) }>
<PanelRow>
<QueryControls
numberOfItems={ numberOfItems }
onNumberOfItemsChange={ ( value ) =>
setAttributes( { numberOfItems: value } )
}
minItems={ 1 }
maxItems={ 10 }
/>
</PanelRow>
<PanelRow>
<RangeControl
label={ __( 'Number of Columns', 'author-plugin' ) }
value={ columns }
onChange={ ( value ) =>
setAttributes( { columns: value } )
}
min={ 1 }
max={ 4 }
required
/>
</PanelRow>
<PanelRow>
<ToggleControl
label={ __( 'Show Featured Image', 'author-plugin' ) }
checked={ displayThumbnail }
onChange={ () =>
setAttributes( { displayThumbnail: ! displayThumbnail } )
}
/>
</PanelRow>
<PanelRow>
<ToggleControl
label={ __( 'Show Date', 'author-plugin' ) }
checked={ displayDate }
onChange={ () =>
setAttributes( { displayDate: ! displayDate } )
}
/>
</PanelRow>
<PanelRow>
<ToggleControl
label={ __( 'Display Excerpt', 'author-plugin' ) }
checked={ displayExcerpt }
onChange={ () =>
setAttributes( { displayExcerpt: ! displayExcerpt } )
}
/>
</PanelRow>
</PanelBody>
</InspectorControls>
<div { ...useBlockProps() }>
...
</div>
</>
);C’est beaucoup de code, n’est-ce pas ? Mais c’est assez facile à comprendre.
Les attributs d’élément qui méritent le plus votre attention ici sont onNumberOfItemsChange dans QueryControls et onChange dans RangeControl et ToggleControl. Ces attributs définissent les gestionnaires d’événements nécessaires pour permettre à l’utilisateur de personnaliser l’apparence et/ou le comportement d’un bloc.
Vous remarquerez également que nous avons utilisé les balises <> et </>, qui sont la syntaxe courte pour déclarer les fragments React.
Maintenant, enregistrez votre fichier, passez dans l’éditeur et rafraîchissez la page :
Tout est là ? Alors passons à autre chose et ajoutons les détails de l’auteur du post.
Trouver l’auteur de l’article
Comme nous l’avons mentionné ci-dessus, notre bloc affichera une liste d’articles écrits par le même auteur que l’article actuel.
Pour obtenir l’ID de l’auteur de l’article, vous allez importer le sélecteurgetCurrentPostAttribute depuis le stockage de données core/editor:
wp.data.select( 'core/editor' ).getCurrentPostAttribute( 'author' )getCurrentPostAttribute renvoie une valeur d’attribut pour l’article enregistré.
Une fois que vous avez obtenu l’ID de l’auteur, vous pouvez modifier la requête comme indiqué ci-dessous :
const posts = useSelect(
( select ) => {
const _authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' );
return select( 'core' ).getEntityRecords( 'postType', 'post', {
'author': _authorId,
'per_page': numberOfItems,
'_embed': true
});
},
[ numberOfItems ]
);Avec ce code, vous obtiendrez une liste des articles n du même auteur que l’article actuel.
Maintenant que vous avez l’ID de l’auteur, vous pouvez également l’utiliser pour récupérer des données supplémentaires dans la base de données.
Afficher les détails de l’auteur
Comme nous ne disposons d’aucune documentation, nous avons utilisé le code du bloc du cœur Auteur de l’article comme référence.
Pour afficher les détails de l’auteur, vous devez d’abord importer une nouvelle dépendance :
import { forEach } from 'lodash';Ensuite, dans la fonction Edit, mettez à jour l’objet attributes comme suit :
const {
numberOfItems,
columns,
displayExcerpt,
displayDate,
displayThumbnail,
displayAuthorInfo,
showAvatar,
avatarSize,
showBio
} = attributes;Une fois cela fait, vous modifierez le code vu dans la section précédente pour récupérer les détails de l’auteur :
const { authorDetails, posts } = useSelect(
( select ) => {
const _authorId = select( 'core/editor' ).getCurrentPostAttribute( 'author' );
const authorDetails = _authorId ? select( 'core' ).getUser( _authorId ) : null;
const posts = select( 'core' ).getEntityRecords( 'postType', 'post', {
'author': _authorId,
'per_page': numberOfItems,
'_embed': true
});
return {
authorDetails: authorDetails,
posts: posts
};
},
[ numberOfItems ]
);Notez que nous avons utilisé le sélecteurgetUser pour obtenir les détails de l’auteur.
Ensuite, vous voudrez peut-être obtenir l’avatar de l’auteur. Le code ci-dessous construit un tableau d’éléments stockant les URL et les tailles des avatars :
const avatarSizes = [];
if ( authorDetails ) {
forEach( authorDetails.avatar_urls, ( url, size ) => {
avatarSizes.push( {
value: size,
label: `${ size } x ${ size }`,
} );
} );
}Ensuite, vous ajouterez les panneaux et les contrôles de la barre latérale pour permettre aux utilisateurs de personnaliser la zone de l’auteur dans le bloc :
return (
<>
<InspectorControls>
<PanelBody title={ __( 'Author Info', 'author-plugin' ) }>
<PanelRow>
<ToggleControl
label={ __( 'Display Author Info', 'author-plugin' ) }
checked={ displayAuthorInfo }
onChange={ () =>
setAttributes( { displayAuthorInfo: ! displayAuthorInfo } )
}
/>
</PanelRow>
{ displayAuthorInfo && (
<>
<PanelRow>
<ToggleControl
label={ __( 'Show avatar' ) }
checked={ showAvatar }
onChange={ () =>
setAttributes( { showAvatar: ! showAvatar } )
}
/>
{ showAvatar && (
<SelectControl
label={ __( 'Avatar size' ) }
value={ avatarSize }
options={ avatarSizes }
onChange={ ( size ) => {
setAttributes( {
avatarSize: Number( size ),
} );
} }
/>
) }
</PanelRow>
<PanelRow>
<ToggleControl
label={ __( 'Show Bio', 'author-plugin' ) }
checked={ showBio }
onChange={ () =>
setAttributes( { showBio: ! showBio } )
}
/>
</PanelRow>
</>
) }
</PanelBody>
...
</InspectorControls>
...
</>
);L’image ci-dessous montre la colonne latérale de réglages mise à jour :
Enfin, vous pouvez ajouter la section de l’auteur à votre bloc :
return (
<>
<InspectorControls>
...
</InspectorControls>
<div { ...useBlockProps() }>
{ displayAuthorInfo && authorDetails && (
<div className="wp-block-author-box-author-plugin__author">
{ showAvatar && (
<div className="wp-block-author-box-author-plugin__avatar">
<img
width={ avatarSize }
src={
authorDetails.avatar_urls[
avatarSize
]
}
alt={ authorDetails.name }
/>
</div>
) }
<div className='wp-block-author-box-author-plugin__author-content'>
<p className='wp-block-author-box-author-plugin__name'>
{ authorDetails.name }
</p>
{ showBio &&
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
authorDetails?.description &&
authorDetails.description.length > 0 && (
<p className='wp-block-author-box-author-plugin__description'>{ authorDetails.description }</p>
) }
</div>
</div>
)}
<ul>
...
</ul>
</div>
</>
);L’image suivante montre le rendu à l’écran.
Enregistrez maintenant votre fichier edit.js et exécutez vos tests. Votre bloc devrait inclure différents éléments en fonction des réglages du bloc.
Il manque encore une dernière chose : le nombre de colonnes pour afficher les articles.
Modifiez le nombre de colonnes
Pour donner à l’utilisateur la possibilité d’afficher les aperçus d’articles en colonnes, nous avons défini l’attribut columns dans le fichier block.json. Nous avons également inclus un attribut columns dans le script et créé un contrôle des réglages pour permettre aux utilisateurs de modifier le nombre de colonnes, bien que ce changement n’ait aucun effet pour le moment.
Dans le code JSX ci-dessus, vous devriez avoir remarqué que nous avons ajouté des classes CSS à plusieurs éléments :
Classes attribuées aux éléments de la section Auteur :
wp-block-author-box-author-plugin__authorwp-block-author-box-author-plugin__avatarwp-block-author-box-author-plugin__author-contentwp-block-author-box-author-plugin__namewp-block-author-box-author-plugin__description
Classes attribuées aux éléments de la section du contenu :
wp-block-author-box-author-plugin__post-itemswp-block-author-box-author-plugin__post-thumbnailwp-block-author-box-author-plugin__post-titlewp-block-author-box-author-plugin__post-datewp-block-author-box-author-plugin__post-excerpt
Une classe est encore manquante. Le nom de cette classe sera généré dynamiquement pour refléter le nombre de colonnes défini par l’utilisateur.
Retournez au fichier Edit.js et modifiez l’élément ul comme suit :
<ul className={ `wp-block-author-box-author-plugin__post-items columns-${ columns }` }>
...
</ul>Nous avons ajouté une nouvelle classe columns-${ columns } selon la syntaxe Template literals pour insérer une expression à l’intérieur d’une chaîne de caractères. De cette façon, l’attribut attaché à l’élément ul dépendra des réglages de l’utilisateur (par exemple, columns-1, columns-2, etc.).
Ouvrez maintenant le fichier style.scss et remplacez le code existant par le suivant :
.wp-block-author-box-author-plugin {
background-color: #21759b;
color: #fff;
padding: .6em;
ul.wp-block-author-box-author-plugin__post-items {
padding: 0;
list-style-type: none;
display: grid;
gap: .5em;
@for $i from 2 through 4 {
&.columns-#{ $i } {
grid-template-columns: repeat(#{ $i }, 1fr);
}
}
li {
list-style: none;
img.wp-block-author-box-author-plugin__post-thumbnail {
height: auto;
max-width: 100%;
}
}
}
}
.wp-block-author-box-author-plugin__author {
display: flex;
flex-wrap: wrap;
}
.wp-block-author-box-author-plugin__avatar {
margin-right: 1em;
}
.wp-block-author-box-author-plugin__author-content {
flex-basis: 0;
flex-grow: 1;
}Nous n’irons pas en profondeur dans ce code, étant au-delà de la portée de cet article. Mais si vous souhaitez plonger plus profondément, vous pouvez vous référer aux ressources suivantes :
- Disposition de la grille CSS
- Apprendre la grille CSS
- La règle @for dans Sass
- L’imbrication dans Sass
Et c’est tout pour le rendu du bloc dans l’éditeur.
Construire le bloc pour le rendre sur la page
Maintenant que le code qui assure le rendu du bloc dans l’éditeur est complet, nous pouvons passer à la construction du bloc pour le rendu sur l’interface publique.
Comme nous l’avons mentionné précédemment, lorsqu’il s’agit de blocs dynamiques, le fichier de l’extension est responsable de la génération du HTML à rendre sur l’interface publique.
Ouvrez donc le fichier principal de votre extension(author-plugin.php dans notre exemple).
La première chose à faire est de mettre les attributs du bloc à la disposition de la fonction PHP de WordPress. Dans votre fichier PHP, modifiez la définition de la fonction comme suit :
function author_box_author_plugin_render_author_content( $attr ) {
...
}Vous pouvez maintenant utiliser les fonctions WordPress pour récupérer et manipuler des données. Par exemple, vous pouvez utiliser get_posts pour récupérer les derniers articles du blog (pour en savoir plus, lisez notre article détaillé sur la fonctionget_posts ) :
function author_box_author_plugin_render_author_content( $attr ) {
$args = array(
'numberposts' => $attr['numberOfItems'],
);
$my_posts = get_posts( $args );
if( ! empty( $my_posts ) ){
$output = '<ul>';
foreach ( $my_posts as $p ){
$output .= '<li><a href="' . esc_url( get_permalink( $p->ID ) ) . '">'
. $p->post_title . '</a></li>';
}
$output .= '</ul>';
}
return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>';
}La fonction ci-dessus récupère les derniers articles de blog numberOfItems de votre base de données WordPress (par défaut, post_type est défini sur post) et renvoie un tableau d’objets $post. Ensuite, elle itère sur le tableau pour construire les éléments de la liste.
Si vous inspectez la sortie HTML, vous remarquerez qu’il s’agit d’une simple liste d’articles, comme celle présentée dans l’image suivante :
Dans notre article précédent, nous avons mentionné que vous utiliserez le hook React useBlockProps pour marquer l’élément wrapper du bloc dans votre code JSX. Vous devrez faire de même dans votre fonction PHP.
WordPress fournit la fonctionget_block_wrapper_attributes pour cela.
Donc, modifiez votre code PHP comme suit :
function author_box_author_plugin_render_author_content( $attr ) {
$args = array(
'numberposts' => $attr['numberOfItems']
);
$my_posts = get_posts( $args );
if( ! empty( $my_posts ) ){
$output = '<div ' . get_block_wrapper_attributes() . '>';
$output .= '<ul>';
foreach ( $my_posts as $p ){
$title = $p->post_title ? $p->post_title : 'Default title';
$url = esc_url( get_permalink( $p->ID ) );
$output .= '<li>';
$output .= '<a href="' . $url . '">' . $title . '</a>';
$output .= '</li>';
}
$output .= '</ul>';
$output .= '</div>';
}
return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>';
}Maintenant, une classewp-block-author-box-author-plugin a été attribuée à l’élément conteneur et le bloc a une couleur d’arrière-plan différente.
Ensuite, la fonction get_posts obtient les données WP_Posts et le cycle foreach construit les éléments de la liste (voir aussi Comment afficher les données retournées par get_posts).
Ajouter l’image mise en avant, la date et l’extrait
Ensuite, vous devrez ajouter les images mises en avant, les dates et les extraits des messages. Dans le même fichier, modifiez votre code PHP comme suit :
function author_box_author_plugin_render_author_content( $attr ) {
$args = array(
'numberposts' => $attr['numberOfItems']
);
$my_posts = get_posts( $args );
if( ! empty( $my_posts ) ){
$output = '<div ' . get_block_wrapper_attributes() . '>';
$output .= '<ul class="wp-block-author-box-author-plugin__post-items columns-">';
foreach ( $my_posts as $p ){
$title = $p->post_title ? $p->post_title : 'Default title';
$url = esc_url( get_permalink( $p->ID ) );
$thumbnail = has_post_thumbnail( $p->ID ) ? get_the_post_thumbnail( $p->ID, 'medium' ) : '';
$output .= '<li>';
if( ! empty( $thumbnail ) && $attr['displayThumbnail'] ){
$output .= $thumbnail;
}
$output .= '<h5><a href="' . $url . '">' . $title . '</a></h5>';
if( $attr['displayDate'] ){
$output .= '<time datetime="' . esc_attr( get_the_date( 'c', $p ) ) . '">' . esc_html( get_the_date( '', $p ) ) . '</time>';
}
if( get_the_excerpt( $p ) && $attr['displayExcerpt'] ){
$output .= '<p>' . get_the_excerpt( $p ) . '</p>';
}
$output .= '</li>';
}
$output .= '</ul>';
$output .= '</div>';
}
return $output ?? '<strong>Sorry. No posts matching your criteria!</strong>';
}La boucle foreach itère sur le tableau $my_posts. À chaque itération, plusieurs conditions vérifient les valeurs des attributs et construisent la sortie en conséquence.
Regardez maintenant la sortie à l’écran :
Vous pouvez maintenant exécuter vos tests. Modifiez les réglages de date, d’extrait et de miniature et vérifiez comment le contenu du bloc change sur l’interface publique.
Afficher les articles en colonnes
Dans notre code JavaScript, nous avons utilisé une classe columns-${ columns } pour afficher les aperçus des articles en colonnes. Nous devons maintenant faire la même chose en PHP.
Pour ce faire, il suffit d’ajouter ces deux lignes de code :
$num_cols = $attr['columns'] > 1 ? strval( $attr['columns'] ) : '1';
$output .= '<ul class="wp-block-author-box-author-plugin__post-items columns-' . $num_cols . '">';Cela ajoutera une classe columns-n à l’élément ul contenant les aperçus des articles. Maintenant, le nombre de colonnes affichées sur la page devrait correspondre au nombre de colonnes défini dans les réglages du bloc.
Construire la boîte de l’auteur
Enfin, vous devez créer la boîte contenant les détails de l’auteur, notamment son avatar, son nom et sa description.
Dans la fonction de rappel, vous devrez ajouter un ensemble de conditions pour vérifier la valeur actuelle de chaque attribut :
if( $attr['displayAuthorInfo'] ){
$output .= '<div class="wp-block-author-box-author-plugin__author">';
if( $attr['showAvatar'] ){
$output .= '<div class="wp-block-author-box-author-plugin__avatar">'
. get_avatar( get_the_author_meta( 'ID' ), $attr['avatarSize'] )
. '</div>';
}
$output .= '<div class="wp-block-author-box-author-plugin__author-content">';
$output .= '<div class="wp-block-author-box-author-plugin__name">'
. get_the_author_meta( 'display_name' )
. '</div>';
if( $attr['showBio'] ){
$output .= '<div class="wp-block-author-box-author-plugin__description">'
. get_the_author_meta( 'description' )
. '</div>';
}
$output .= '</div>';
$output .= '</div>';
}Le code est assez simple. Il vérifie la valeur actuelle de chaque attribut, et s’il s’agit de true, il génère le HTML nécessaire.
Maintenant, enregistrez votre fichier PHP et comparez le bloc dans l’éditeur par rapport au même bloc sur l’interface publique.
Vous trouverez le code complet du bloc d’exemple dans ce Gist public.
Ressources recommandées pour le développement de blocs dynamiques
Si vous avez dressé l’oreille en lisant cet article et commencé à reconnaître les opportunités de développement professionnel qui découlent de l’apprentissage de la création de blocs Gutenberg, eh bien, notre conseil est de continuer à explorer et à acquérir de nouvelles compétences dans les technologies derrière le développement de blocs.
Bien qu’une documentation officielle fiable fasse toujours défaut, il existe néanmoins d’excellentes ressources, gratuites ou payantes, que nous avons consultées lors de la rédaction de cet article. Parmi les nombreuses ressources disponibles, nous vous recommandons les suivantes :
Ressources officielles
- Données
- Données du cœur
- Création de blocs dynamiques
- Introduction au développement de blocs Gutenberg
- WordPress Social Learning sur MeetUp
Tutoriels recommandés par les contributeurs du cœur de WordPress
- Demander des données dans Gutenberg avec getEntityRecords par Ryan Welcher (@ryanwelcher)
- Un aperçu pratique de l’API @wordpress/data par Darren Ethier (@nerrad)
Ressources JavaScript, React et Redux
- Tutoriels JavaScript par MDN
- Getting Started with React (officiel)
- Tutoriel Redux (officiel)
Ressources similaires Kinsta
- Qu’est-ce que JavaScript ? Un regard sur le langage de script le plus populaire du Web
- Un guide définitif de la gestion des erreurs en JavaScript
- Qu’est-ce que Node.js et pourquoi l’utiliser ?
- Comment installer Node.js et npm sur Windows, macOS et Linux ?
- Comment déboguer du code Node.js en utilisant plusieurs outils
- Node.js vs PHP : Une comparaison tête à tête
- les 10 types d’applications Node.js les plus populaires en 2022
- Angular vs React : Une comparaison détaillée côte à côte
Résumé
Nous sommes arrivés à la fin de ce (deuxième) long voyage dans le développement des blocs Gutenberg.
Dans cet article, nous avons abordé quelques sujets avancés, comme l’Application State et les stockages Redux. Mais avec un peu de chance, vous devriez maintenant avoir une meilleure compréhension du développement de blocs en général.
Oui, des compétences en Node.js, Webpack, Babel, React et Redux sont essentielles lorsqu’il s’agit de construire des blocs Gutenberg avancés, mais vous n’avez pas besoin d’être un ninja de React pour vous lancer. Apprendre à développer des blocs Gutenberg n’est pas forcément compliqué. Il suffit de le faire avec la bonne motivation et en suivant le parcours d’apprentissage approprié.
Et nous espérons que cet article – et le précédent – vous fourniront la bonne carte pour trouver votre chemin et vous lancer dans le développement de Gutenberg dès maintenant.
À vous de jouer maintenant ! Avez-vous déjà créé des blocs dynamiques ? Avez-vous des exemples à partager avec nous ? Et quels ont été les plus grands obstacles dans votre expérience ? N’hésitez pas à laisser un commentaire ci-dessous.
Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.
Laisser un commentaire