Actualités WEB et WordPress, thèmes, plugins. Ici, nous partageons des conseils et les meilleures solutions de sites Web.

Tutoriel : créer un curseur en tant que bloc Gutenberg dynamique

16

Ce tutoriel expliquera comment créer un bloc dynamique WordPress Gutenberg. Le résultat final est un curseur montrant l’image sélectionnée à partir des publications de la catégorie sélectionnée. Le code inclut l’utilisation d’un composant d’ordre supérieur (withSelect) pour récupérer toutes les catégories dans l’éditeur de blocs.

Ce que nous ferons

Le bloc affichera un simple curseur à l’aide du script jQuery Cycle2. Mais vous pouvez utiliser n’importe quel autre script de curseur. Le bloc affichera dans l’éditeur une liste de toutes les catégories permettant à l’utilisateur de sélectionner une catégorie. Lors de l’affichage du bloc dans le frontend, il récupèrera dynamiquement les publications de la catégorie choisie et affichera leurs images en vedette sous forme de diapositives. Ce didacticiel restera assez simple, vous permettant d’étendre et d’ajuster votre curseur comme vous le souhaitez.

J’ai choisi de ne pas afficher le diaporama dans l’éditeur. Habituellement, vous vous assurez que le rendu dans l’éditeur et le frontend sont les mêmes. Mais dans le cas d’un curseur, j’aime rester simple pour ne pas exploser l’utilisateur avec des animations constantes dans l’éditeur.

Le bloc n’aura que deux paramètres ; le choix de la catégorie et le nombre de slides (posts). Je recommande d’ajouter plus de paramètres tels que la vitesse de glissement, les paramètres d’affichage des pilules, des flèches, du texte et d’autres paramètres de curseur typiques. Il devrait être assez simple d’ajouter ces paramètres vous-même.

Tout le code est écrit en Javascript ES6 / ES2015+. Gardez à l’esprit que ce code a besoin de Babel pour transformer et construire les fichiers Javascript finaux. Consultez le guide ci-dessous si vous ne savez pas comment faire.

Configurer les fichiers

Dans cet exemple, nous créons le bloc à l’intérieur d’un thème. Dans le dossier du thème, j’ai un sous-dossier ‘ gutenberg/‘ où j’ai placé mon package.jsonet webpack-config.js. Dans le sous-dossier ‘ src/‘ de ce dossier se trouve l’endroit où je place tous mes fichiers de construction. Ma configuration webpack est configurée pour placer les fichiers de construction dans mon sous-dossier de thème ‘ assets/js/‘.

Créez un nouveau fichier source vide dans theme-folder/gutenberg/src/block-slider.jset configurez Webpack pour créer le fichier de construction dans theme-folder/assets/js/block-slider.js. Vous pouvez modifier les emplacements et/ou les noms de fichiers comme vous le souhaitez, n’oubliez pas d’ajuster le code ci-dessous.

Nous devons également télécharger le script de curseur nécessaire. Vous pouvez télécharger Cycle2 sur ce lien, ou vous pouvez utiliser n’importe quel autre script de diapositive et ajuster le code ci-dessous. Je place le jquery.cycle2.min.jsfichier dans mon dossier de dossier de thème /assets/js/.

Je vais également préparer un petit fichier CSS qui sera chargé uniquement dans l’éditeur. Nous avons juste un petit morceau de style pour rendre la sélection de catégorie optimale. Je crée un fichier vide editor-block-slider.csset le place dans theme-folder/assets/css/.

Enfin, nous allons dans un fichier PHP qui est chargé dans le thème. Par souci de simplicité, je fais la partie PHP dans le thème functions.php.

Enregistrez le bloc Gutenberg en PHP

Tous les blocs Gutenberg doivent être enregistrés avec [register_block_type](https://developer.wordpress.org/reference/functions/register_block_type/)(). Je préfère l’appeler à l’intérieur d’une fonction accrochée à init. Le premier paramètre est le nom de votre bloc, y compris l’espace de noms. J’ai décidé d’appeler mon script de curseur awp/slider(ajustez comme vous le souhaitez). Le deuxième argument est un tableau d’arguments.

Dans la même fonction, je vais enregistrer le script de construction avec [wp_register_script](https://developer.wordpress.org/reference/functions/wp_register_script/)()et enregistrer mon fichier CSS d’éditeur avec [wp_register_style](https://developer.wordpress.org/reference/functions/wp_register_style/)(). Ces deux poignées seront ajoutées en tant qu’arguments à ‘ editor_script‘ et ‘ editor_style‘, respectivement. En ce qui concerne les dépendances, j’ai ajouté certains des packages les plus élémentaires pour le script afin de garantir que notre script de bloc est chargé dans le bon ordre. En ce qui concerne le style de l’éditeur, l’utilisation de ‘ wp-edit-blocks‘ est une bonne dépendance pour éviter que vos styles ne soient remplacés.

Et enfin parce qu’il s’agit d’un bloc dynamique, nous devons également ajouter l’ render_callbackargument ‘ ‘, pointant vers une fonction responsable du rendu du bloc en frontend.

Enfin, nous définissons la fonction de rendu. Nous obtenons deux paramètres pour le rappel de la fonction ; un tableau d’attributs du bloc et le contenu interne (non utilisé dans ce bloc). Je vais simplement retourner une chaîne factice. Nous reviendrons et étofferons la fonction de rendu plus tard. N’oubliez pas de renvoyer une chaîne, pas d’écho.

function awp_gutenberg_slider_render($attributes, $content) { return 'Slider render comes here.'; }

Nous reviendrons sur la fonction de rendu PHP à la toute fin de ce tutoriel. Il est maintenant temps de passer à Javascript !

Enregistrer un bloc Gutenberg personnalisé en Javascript

Ouvrons notre block-slider.jsfichier source. À ce stade, je vais démarrer le script (npm run start) pour transformer tout ce que nous faisons dans ce fichier dans le fichier de construction au fur et à mesure. Nous devons enregistrer le bloc en utilisant [registerBlockType](https://developer.wordpress.org/block-editor/developers/block-api/block-registration/)(). Consultez le lien pour voir tous les arguments possibles.

Comme nous l’avons décidé en register_block_type()PHP, notre bloc est nommé awp/slider. Nous souhaitons également ajouter deux attributs au bloc, comme mentionné précédemment : un pour l’ID de terme sélectionné et un pour le nombre de diapositives.

J’aime également ajouter la fonctionnalité d’alignement des blocs. Il sera ajouté automatiquement en ajoutant ‘ align‘ à l’ supportsobjet. Si vous voulez tous les alignements de blocs, vous pouvez simplement définir alignsur vrai. Cependant, un curseur aligné à gauche ou à droite n’a pas beaucoup de sens, je vais donc définir les types spécifiques d’alignement de blocs pris en charge par ce bloc : "Aligner le centre" (‘ center‘), "Large largeur" ​​(‘ wide‘) et " Pleine largeur" ​​(‘ full‘). De plus, afin de définir un alignement par défaut et de le rendre accessible depuis PHP, j’ajoute ‘ align‘ comme attribut à notre bloc.

J’ai défini l’argument du bloc editsur un composant séparé que nous créerons ensuite. Et enfin la savefonction renvoie simplement null, car il s’agit d’un bloc dynamique.

Nous devons définir le composant de la editpropriété. Avant le code d’enregistrement, je définis un composant de fonction BlockEditqui rend simplement a divet a Placeholderavec du texte factice.

[Placeholder](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/placeholder)est un bon composant pour rendre une zone pour les paramètres – et pas nécessairement pour le rendu réel d’un bloc. À l’intérieur du Placeholdercomposant, nous affichons une liste de termes parmi lesquels choisir.

À ce stade, notre bloc devrait être disponible dans WordPress Gutenberg! Créons un nouveau message, ajoutons un nouveau bloc et trouvons notre bloc dans la catégorie Commun. Voici à quoi ressemble actuellement notre bloc :

Tutoriel : créer un curseur en tant que bloc Gutenberg dynamiqueTutoriel : créer un curseur en tant que bloc Gutenberg dynamique

Ajout de paramètres d’inspecteur

Ajoutons quelques paramètres à l’inspecteur (barre latérale droite de l’éditeur). Comme mentionné, notre bloc n’a qu’un seul paramètre ; nombre de diapositives. C’est là que je vous recommande d’ajouter plus de paramètres pour votre bloc curseur. N’oubliez pas d’enregistrer des attributs pour chaque paramètre que vous ajoutez.

Afin d’ajouter quelque chose à l’inspecteur, nous utilisons le composant [InspectorControls](https://github.com/WordPress/gutenberg/tree/master/packages/block-editor/src/components/inspector-controls)( wp.blockEditor). À l’ intérieur, nous rendons un [PanelBody](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/panel#panelbody)( wp.components) afin d’ajouter une nouvelle section pliable. Ensuite, nous rendons simplement un [RangeControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/range-control)( wp.components) pour créer un paramètre d’entrée pour choisir le nombre de diapositives. Nous fixons le minimum à 1 et le maximum à 10. Nous connectons l’ événement valueet onChangeà l’attribut numSlides.

Avec le code ci-dessus, nous devrions maintenant obtenir une belle section avec un curseur de plage pour définir le nombre de diapositives.

Tutoriel : créer un curseur en tant que bloc Gutenberg dynamique

Encore une fois, je vous recommande de jouer en ajoutant plus de paramètres à votre curseur. L’étape suivante consiste à créer l’élément pour afficher une liste de catégories parmi lesquelles choisir.

Création d’un composant de sélection de catégorie

Pour garder notre code bien rangé et réutilisable, créons le composant sélecteur de catégorie dans un fichier séparé. Dans le dossier de construction, je crée un nouveau fichier awp-category-picker.js.

Dans ce fichier, nous définissons un composant qui parcourra toutes les catégories actuellement dans WordPress et les restituera d’une manière ou d’une autre. Afin d’obtenir des catégories, nous devons les encapsuler dans un soi-disant composant d’ordre supérieur, qui fournira à notre composant ce dont nous avons besoin via des accessoires. Pour ce faire, nous utiliserons [withSelect](https://developer.wordpress.org/block-editor/packages/packages-data/#withSelect). À l’ intérieur withSelect, nous pouvons faire une demande pour récupérer toutes les catégories dans WordPress en utilisant le sélecteur de magasin [select](https://developer.wordpress.org/block-editor/packages/packages-data/#select)(). On peut utiliser:

pour récupérer tous les termes dans le slug de taxonomie fourni. Si vous n’êtes pas familier avec les composants et les sélecteurs d’ordre supérieur dans WordPress Gutenberg, j’ai un article qui explique ce concept plus en détail: Créer un bloc Gutenberg personnalisé – Partie 10: Récupération des articles et des composants d’ordre supérieur.

Comme nous devons exporter un composant à partir de ce fichier, nous plaçons la combinaison de withSelectet de notre composant défini dans l’ export defaultinstruction. Notre CategorySelectcomposant renvoie simplement un div avec du texte factice afin que nous puissions voir que cela fonctionne. Le withSelectdevrait fournir le prop ‘ terms‘ à CategorySelect. J’ai ajouté un console.log()sur cet accessoire pour que nous puissions voir que cela fonctionne.

La dernière chose que nous devons faire est d’importer et d’utiliser ce composant de sélecteur de catégorie dans notre bloc personnalisé.

De retour, block-slider.jsnous devons d’abord importer le composant en haut du fichier. Et à l’intérieur de notre Placeholdercomposant, nous rendons simplement le composant.

Avec le code ci-dessus, votre bloc devrait maintenant rendre la div du CategorySelectcomposant. Si vous ouvrez la console dans votre navigateur, vous devriez également voir des journaux. N’oubliez pas qu’il withSelects’agit d’une requête asynchrone, ce qui signifie qu’elle peut s’afficher plusieurs fois. La ou les premières fois, les termes de prop sont null. Mais le ou les derniers journaux devraient se retrouver avec un tableau de termes de catégorie.

Super! Continuons à travailler avec notre CategorySelectcomposant et faisons en sorte qu’il affiche la liste des termes permettant à l’utilisateur d’en sélectionner un !

Affichage d’une liste de termes parmi lesquels choisir

Il existe de nombreuses façons de rendre une liste de choix où l’utilisateur peut sélectionner un élément. Si vous voulez quelque chose de vraiment simple, vous pouvez afficher une liste déroulante de sélection standard ([SelectControl](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/select-control)). Cela dépend entièrement de vous. J’ai opté pour une approche plus propre et plus agréable en utilisant [MenuGroup](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-group)( wp.components) et [MenuItem](https://github.com/WordPress/gutenberg/tree/master/packages/components/src/menu-item)( wp.components).

À l’ intérieur d’un MenuGroupcomposant, nous devons parcourir le props.termstableau et, pour chaque élément, nous souhaitons afficher un MenuItemcomposant affichant le nom du terme. Et bien sûr, nous ne voulons rendre ceci que s’il props.termscontient réellement quelque chose (requête asynchrone, vous vous souvenez ?).

J’ai donné au MenuGroupcomposant une classe personnalisée, car nous devrons le cibler avec CSS. Et j’ai réglé l’accessoire rolesur MenuItemmenuitemradio‘ pour m’assurer qu’un seul peut être choisi à la fois. Par défaut, ils fonctionnent comme des cases à cocher, permettant ainsi de choisir plusieurs éléments.

Avec le code ci-dessus, notre bloc devrait maintenant (après une petite seconde) afficher une belle liste de toutes les catégories de votre instance WordPress.

Vous remarquerez peut-être que notre bloc se développera pour contenir toutes les catégories. Si on est dans une instance WordPress avec beaucoup de catégories, cela devient vite un problème. Nous voulons nous assurer que le sélecteur est un conteneur de hauteur maximale qui obtient une barre de défilement verticale s’il existe de nombreuses catégories. C’est là qu’intervient notre fichier CSS.

Dans notre editor-block-slider.cssdossier ajoutez :

.awp-categoryselect div { max-height: 200px; overflow: hidden scroll; border: 1px solid #b3bcc0; }

Ce CSS cible l’intérieur de divnotre MenuGroupet s’assure qu’il ne dépasse jamais 200px. Si le contenu du MenuGroupdevient plus grand (plus de catégories), il affichera une barre de défilement verticale. C’est le strict minimum de CSS pour notre bloc, mais vous pouvez bien sûr ajouter plus de CSS si vous le souhaitez.

La dernière chose que nous devons corriger dans notre sélecteur de catégorie est la fonctionnalité permettant d’afficher l’élément actuellement sélectionné et permettant à l’utilisateur de sélectionner un terme dans la liste. Pour cela, nous devons transmettre des accessoires à ce composant à partir de notre bloc.

Dans block-slider.jsnous devons transmettre le terme actuellement sélectionné (valeur de l’attribut termId) et une fonction pour mettre à jour le terme sélectionné (setAttributes) en tant qu’accessoires à notre composant de sélecteur de catégorie.

Dans le code ci-dessus à la ligne, #6nous définissons une fonction qui met simplement à jour l’attribut termId. Nous passons ce nom de fonction comme accessoire CategorySelectà la ligne #17. Et à la ligne, #16nous passons la valeur actuelle de termId. Avec, nous pouvons mettre à jour notre CategorySelectcomposant pour refléter l’élément choisi et permettre à l’utilisateur de choisir un terme.

De retour, awp-category-picker.jsnous ajoutons de nouveaux accessoires sur MenuItem. Nous renvoyons trueou falsepour la prop isSelectedsi l’identifiant du terme actuel est le même que celui actuellement sélectionné. On initie la selectTermfonction dans l’ onClickévénement, en passant le terme ID. Et pour rendre visuel l’élément sélectionné, nous ajoutons conditionnellement une icône avant chaque élément.

Avec cela, notre sélecteur de catégorie devrait ressembler à ceci :

Tutoriel : créer un curseur en tant que bloc Gutenberg dynamique

La liste doit clairement marquer le terme sélectionné avec une icône de contrôle, et vous pouvez cliquer sur n’importe quel terme pour sélectionner ce terme à la place.

C’était tout pour l’éditeur et la partie Javascript ! Ce qui reste maintenant est le rendu frontal, que nous ferons en PHP.

Rendre le bloc dynamique en PHP

Avant de plonger dans la fonction de rendu, occupons-nous d’abord de certaines choses.

Nous devons d’abord mettre en file d’attente le script cycle2 dans l’interface afin que notre code de curseur se transforme réellement en un curseur. Nous le faisons avec une simple fonction accrochée à wp_enqueue_scripts. Ajustez ci-dessous si vous avez opté pour un autre script de curseur.

add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'cycle2-slider-js', get_template_directory_uri(). '/assets/js/jquery.cycle2.min.js', ['jquery'], '', true ); });

Deuxièmement, nous voulons revenir à l’ register_block_type()appel de fonction. Lorsque nous manipulons des blocs dynamiques, nous devons absolument ajouter un nouvel argument ; attributes. Dans cet argument, nous définissons tous les attributs que nous avons définis registerBlockTypeen Javascript, y compris leurs valeurs par défaut. Si nous ne le faisons pas, tous les attributs ne seront pas disponibles dans notre rappel de rendu. Si un attribut est resté inchangé dans l’éditeur de blocs, l’attribut et sa valeur ne seront pas disponibles dans le tableau des attributs en PHP. Je vous recommande donc de toujours prendre soin d’ajouter le attributestableau à la register_block_type()fonction PHP lorsque vous travaillez avec des blocs dynamiques. Pour notre bloc, cela ressemblerait à ceci :

Revenons maintenant à notre fonction de rendu de rappel awp_gutenberg_slider_render(). La sortie dépend entièrement de vous, surtout si vous avez choisi d’utiliser un autre script de curseur. Ce qui suit est un exemple simple.

L’idée principale est de vérifier si un terme a été choisi ou non ($attributes['termId']). S’il est rempli, nous créons un [WP_Query](https://developer.wordpress.org/reference/classes/wp_query/)()avec des arguments pour le nombre de publications ($attributes['numSlides']) et l’ID de catégorie sélectionnée. Ensuite, il s’agit de générer le code HTML approprié pour que cycle2 fonctionne, de boucler les publications et d’afficher leurs images en vedette sous forme de diapositives.

Notez comment j’ajoute la classe d’alignement de bloc appropriée dans line #12. Le résultat devrait être un curseur des images présentées. Gardez à l’esprit qu’il s’agit d’un exemple de base qui a quelques défauts. Par exemple, nous récupérons les trois derniers messages de la catégorie sélectionnée. Mais en supposant que l’un d’eux n’a pas d’image en vedette, le curseur n’affichera que deux messages.

La chose importante à retenir est de renvoyer une chaîne et de ne pas l’écho. Je recommande également d’utiliser une sorte de fonctionnalité de modèle dans votre thème pour les rendus de blocs dynamiques comme ceux-ci. Il peut rapidement devenir désordonné de réparer et de construire du HTML sous forme de chaîne.

Derniers mots

Ce didacticiel vous a montré comment créer un bloc WordPress Gutenberg dynamique personnalisé dans lequel vous rendez son contenu frontal en PHP. Et vous avez vu comment utiliser le composant d’ordre supérieur withSelectpour rechercher tous les termes de catégorie et une méthode pour afficher une liste sélectionnable.

Tout le code ci-dessus est écrit aussi simple que possible. Je n’ai ajouté que le minimum absolu de paramètres. Le curseur fonctionne, mais vous en voulez généralement plus – par exemple, créer des liens vers les diapositives, afficher les titres des publications, les flèches du curseur ou la possibilité de personnaliser la vitesse ou d’autres paramètres du curseur. L’idée est de vous montrer les bases et de vous permettre d’étendre, de développer et de modifier facilement les besoins de votre projet.

Source d’enregistrement: awhitepixel.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More