Share
Bienvenue dans notre série sur la création de blocs personnalisés avec l'API WordPress Gutenberg Block. Ce tutoriel concerne l’extension du bloc d’image aléatoire créé précédemment. Nous sommes allés jusqu'à ajouter un contrôle déroulant pour sélectionner une catégorie d'image. Nous allons continuer avec cela en ajoutant plus d'options de blocage pour permettre une personnalisation plus poussée..
Plus précisément, nous verrons comment ajouter des paramètres de bloc dans différentes parties de l'éditeur. C'est vrai, vous n'êtes pas seulement limité à ajouter des contrôles de bloc directement sur le bloc lui-même.!
Le final mon bloc personnalisé Le code plugin est disponible au téléchargement. Cliquez simplement sur le lien dans la barre latérale à droite et téléchargez le fichier zip sur votre ordinateur, puis installez-le comme n'importe quel autre plugin WordPress. Vous pouvez également trouver le code source dans notre rapport GitHub.
Le développement de Gutenberg se poursuit à un rythme raisonnable, et une nouvelle version significative a été publiée depuis la publication du dernier tutoriel. La version de Gutenberg utilisée dans ce tutoriel a été mise à jour à la version 3.0.1, et l'interface utilisateur de l'éditeur peut sembler légèrement différente des captures d'écran présentées dans les tutoriels précédents de cette série..
Le contrôle déroulant que nous avons ajouté au didacticiel précédent se trouvait dans l'éditeur, directement sous le balisage de l'image aléatoire. C'était pratique, mais nous avons aussi d'autres choix.
Nous pouvons également ajouter des contrôles de bloc à une barre d’outils contextuelle (qui apparaît lorsqu’un bloc est sélectionné) et à un panneau d’inspecteur de bloc..
Dans la capture d'écran ci-dessus, nous pouvons voir les contrôles de la barre d'outils pour le bloc de paragraphe [1], ainsi que les contrôles associés dans l'inspecteur de panneaux [3]. Emplacement [2] affiche le contrôle déroulant de notre bloc d'image aléatoire..
Vous pensez peut-être déjà quel emplacement choisir pour vos propres paramètres de blocage, mais vous n'êtes pas obligé de choisir un seul de ces emplacements. Ils ne sont pas mutuellement exclusifs. Par exemple, pour le bloc de paragraphe (illustré ci-dessus), vous pouvez voir que les paramètres sont partagés entre le panneau de l'inspecteur de blocs et la barre d'outils..
De plus, il est parfaitement correct d’avoir deux contrôles distincts à des emplacements différents dans l’éditeur qui affectent la même réglage. Vous ne voudrez peut-être pas le faire trop souvent, mais il est utile de savoir comment le mettre en œuvre. Nous verrons comment le faire un peu plus tard..
Commençons par le moyen le plus simple d’ajouter des fonctionnalités à votre bloc, directement à l’intérieur du bloc. modifier une fonction. Nous avons déjà utilisé cette approche pour ajouter notre contrôle de liste déroulante d'images aléatoires, car elle nécessite très peu d'effort supplémentaire..
Nous n'allons pas ajouter de nouveaux contrôles au bloc lui-même, mais nous pouvons modifier le comportement du contrôle déroulant pour qu'il soit un peu plus intuitif. Pour que le rendu soit aussi proche que possible du début, nous pouvons empêcher le menu déroulant d'apparaître à moins que le bloc ne soit sélectionné..
Faisons ce changement maintenant. Si vous suivez ce tutoriel de la dernière fois, ouvrez /my-custom-block/src/random-image/index.js dans votre éditeur préféré. C'est le fichier JavaScript principal de notre bloc d'images aléatoires.
Un des accessoires transmis à tous les blocs est est sélectionné, qui détient le statut de la visibilité du bloc. Nous pouvons l'utiliser pour afficher de manière conditionnelle le contrôle déroulant de la catégorie.
Tout d'abord, sortez est sélectionné du les accessoires objet et l'ajouter à la liste des constantes à l'intérieur du modifier une fonction. Ceci est utile afin que nous puissions le référencer par un nom abrégé (i.e. est sélectionné plutôt que props.isSélectionné).
const attributs: category, setAttributes, isSelected = props;
Ensuite, nous pouvons utiliser cette propriété pour déterminer si le contrôle déroulant doit être affiché:
est sélectionné && ()
C’est une façon abrégée de tester que est sélectionné est vrai, car nous ne pouvons pas utiliser un JavaScript complet si déclaration dans le code JSX.
Assurez-vous que vous surveillez toujours les fichiers pour connaître les modifications afin que tout code source de bloc (JSX, ES6 +, Sass, etc.) soit transpilé en JavaScript et CSS valides. Si vous ne surveillez pas actuellement les fichiers pour y rechercher des modifications, ouvrez une fenêtre de ligne de commande à l'intérieur du dossier. mon bloc personnalisé dossier racine du plugin et entrez npm start.
Ouvrez l'éditeur Gutenberg et ajoutez le bloc d'image aléatoire. Cette fois, le contrôle déroulant n'est pas visible si le bloc n'a pas encore été cliqué..
Cela donne au bloc une sensation beaucoup plus interactive.
Si vous avez utilisé l'un des blocs principaux de Gutenberg (comme le bloc de paragraphe), vous serez familiarisé avec les paramètres de la barre d'outils. Dès que le bloc Paragraphe est sélectionné, une barre d'outils contextuelle contenant des boutons vous permet de formater le texte. Ce type de contrôle convient parfaitement aux paramètres de bloc dont l'état est activé / désactivé, par exemple l'alignement du texte ou la mise en forme, tels que gras ou italique..
Nous utiliserons le contrôle de barre d'outils d'alignement intégré pour permettre au contrôle de catégorie d'image déroulant d'être aligné à gauche (par défaut), à droite ou aligné au centre..
Premièrement, nous devons sortir le Barre d'outils d'alignement et BlockControls composants de wp.blocks. Celles-ci nous permettent d'afficher les contrôles d'alignement dans une barre d'outils flottante au-dessus de notre bloc lorsqu'il est sélectionné. Ils font partie des composants de base que nous pouvons utiliser dans nos propres blocs..
const AlignmentToolbar, BlockControls, registerBlockType = wp.blocks;
le BlockControls composant agit comme conteneur de la barre d’outils, et Barre d'outils d'alignement est placé à l'intérieur.
Nous devons encore connecter manuellement le comportement de la barre d’alignement, ce que nous pouvons faire en ajoutant un nouveau catégorieAlign attribut pour stocker le statut d'alignement de bloc (gauche, droite ou centre).
Notre les attributs objet contient maintenant deux paramètres.
attributs: catégorie: type: 'chaîne', par défaut: 'nature', catégorieAligne: type: 'chaîne' par défaut: "
La valeur par défaut pour le catégorieAlign attribut est une chaîne vide, aucun alignement ne sera appliqué par défaut.
Pour référencer le nouvel attribut, nous pouvons extraire cette valeur dans sa propre variable constante de la même manière que pour la liste déroulante. Catégorie attribut.
const attributs: category, categoryAlign, setAttributes, isSelected = props;
Il ne reste plus qu’à déposer les deux nouveaux composants dans le modifier fonctionner et configurer les propriétés.
setAttributes (categoryAlign: valeur) />
Comme vous pouvez le constater, tout ce que nous devions faire était d’affecter le valeur attribut de Barre d'outils d'alignement à catégorieAlign attribuer et appeler le setAttributes fonctionne chaque fois qu'un nouveau bouton de la barre d'outils a été cliqué. Cette fonction met à jour la catégorieAlign attribue et maintient tout synchronisé.
Pour appliquer le style d'alignement du contrôle déroulant, nous devons ajouter une propriété de style à notre élément de formulaire..
)Cette fonction peut ensuite être référencée chaque fois que nous avons besoin de rendre le contrôle de la liste déroulante des catégories. Le balisage du panneau d’inspecteur de bloc doit être en dehors du balisage de bloc afin que nous puissions utiliser le
Ensuite, nous devons ajouter les composants de l'inspecteur de blocs pour les listes déroulantes de filtres de catégories et d'images. Ceux-ci doivent être définis à l'intérieur sur le changement un événement. Ceci est très similaire au code déroulant de la catégorie du dernier tutoriel, il devrait donc vous être familier maintenant..
En réunissant tout cela, le modifier la méthode revenir La fonction ressemble maintenant à ceci:
revenir () showForm () setAttributes (categoryAlign: valeur) /> isSelected && (showForm ())
Et le setFilter callback est défini comme:
Accentsconagua
function setFilter (event) const sélectionné = event.target.querySelector ('# option de filtre d'image: coché'); setAttributes (imageFilter: selected.value); event.preventDefault (); Pour obtenir l'image filtrée, nous devons mettre à jour le Image aléatoire composant pour accepter la nouvelle valeur de filtre chaque fois que la liste déroulante est modifiée.
fonction RandomImage (category, filter) if (filtre) filtre = '/' + filtre; const src = 'https://placeimg.com/320/220/' + category + filter; revenir;
Notez comment nous utilisons cette nouvelle propriété de composant dans le modifier méthode pour envoyer la nouvelle valeur de filtre à PlaceIMG.
Toutes ces modifications de code donnent lieu à la création d’un nouveau panneau d’inspecteur de blocs avec deux commandes déroulantes permettant de modifier la catégorie et le filtre de l’image..
Pour que la nouvelle propriété de filtre fonctionne également pour le serveur frontal, il suffit de mettre à jour la enregistrer méthode.
save: function (props) const attributs: category, imageFilter = props; revenir ()
Dans cet article, nous avons présenté trois méthodes différentes pour ajouter des paramètres à un bloc:
Nous n’avons ajouté que des paramètres de base pour chaque bloc, mais nous pourrions facilement aller plus loin en ajoutant la prise en charge de plusieurs images, en ajoutant des légendes d’image et en contrôlant les styles tels que la couleur de la bordure, le rayon ou la taille aléatoire de l’image..
Je suis sûr que vous avez probablement déjà des idées pour créer vos propres blocs personnalisés. J'aimerais entendre quel genre de bloc vous trouveriez utile dans vos propres projets!
Nous commençons tout juste à commencer avec Gutenberg ici à Envato Tuts +. Par conséquent, si vous souhaitez voir des aspects particuliers du développement de blocs de Gutenberg que vous voudriez voir approfondis dans les prochains tutoriels, veuillez nous en informer via les commentaires..
