API WordPress Gutenberg Block Bloquer l'apparence

Le nouvel éditeur WordPress (nom de code Gutenberg) doit sortir dans la version 5.0. C’est le moment idéal pour le maîtriser avant d’atteindre le noyau WordPress. Dans cette série, je vais vous montrer comment utiliser l'API Block et créer vos propres blocs de contenu que vous pouvez utiliser pour créer vos publications et vos pages..

Dans le premier article de cette série, nous avions un aperçu de l'API Block et créé un bloc simple à tester. Nous allons examiner de plus près l'API de bloc sous peu, mais commençons par éditer le bloc par défaut que nous avons créé dans l'article précédent pour avoir une idée de la facilité avec laquelle il est possible de modifier un bloc existant..

Si vous vous en souvenez, notre bloc personnalisé a été rendu différemment au recto et au verso pour démontrer que vous avez un contrôle total sur le rendu du bloc dans l'éditeur et la manière dont les visiteurs du site voient le bloc..

Si vous avez suivi, ouvrez le / wp-content / plugins / my-custom-block / src / block dossier où se trouve le code source du bloc. Ce dossier contient un fichier JavaScript et deux fichiers Sass, qui contrôlent le comportement du bloc et son rendu dans l'éditeur et sur le front-end..

le block.js Le fichier JavaScript contient JSX, qui est transpilé au cours du processus de construction en JavaScript valide. De même, les deux fichiers Sass sont convertis en CSS standard.

Pendant le processus de construction, ces fichiers nécessitent un traitement pour créer les fichiers de distribution à l'intérieur du plugin. dist / dossier. Ce sont les fichiers réels mis en file d'attente par WordPress car ils contiennent du code JavaScript et CSS valide que tous les navigateurs peuvent comprendre..

Heureusement, le créer-guten-block toolkit gère la construction et la transcription pour nous en surveillant les modifications apportées à nos fichiers de blocage. C’est une fonctionnalité vraiment intéressante car c’est une chose de moins à nous préoccuper. Nous pouvons simplement nous concentrer sur l'écriture de notre code de bloc (et de nos styles), et les fichiers du plugin seront tous mis à jour automatiquement. Agréable!

Assurez-vous que vous exécutez le npm start commande depuis le dossier racine du plugin pour déclencher le visionnage de fichiers.

Il est temps d'éditer du code!

Ne vous inquiétez pas des détails du code JSX dans block.js pour l'instant, nous verrons cela plus en détail plus tard. Pour l'instant, concentrons-nous sur quelques modifications simples apportées à la sortie de bloc pour les vues de face et de dos.

S'ouvrir block.js, trouvez le modifier méthode pour l'objet qui est le deuxième argument passé à registerBlockType (), et le remplacer par ce qui suit:

edit: function (props) return ( 
 
Vue de l'éditeur
 
Ceci est notre bloc personnalisé dans l'éditeur.
 
Ajoutons une liste non ordonnée!
 
 
Pomme
 
Orange
 
Poire
 
prune
 
 
 ) ,

Cette méthode contrôle le rendu du bloc dans la fenêtre de l'éditeur. Maintenant trouver le enregistrer méthode et le remplacer par:

save: function (props) return ( 
 
Vue frontale
 
Ceci est notre bloc personnalisé vu par les visiteurs du site.
 
Ajoutons une liste ordonnée!
 
 
rouge
 
Bleu
 
Rose
 
marron
 
 
 ) ,

Cette méthode est utilisée pour rendre la sortie du bloc sur le front-end.

Dans style.scss, remplace tous les styles par:

.wp-block-cgb-block-my-custom-block background: # a7d9f1; couleur: #ffffff; bordure: solide 1px # 62afd4; border-radius: 15px; marge: 0 auto; largeur maximale: 740px; rembourrage: 1.5rem; ol, ul margin-left: 20px! important;  li margin-bottom: 0;  h3 color: #ffffff; marge supérieure: 0; 

Puis dans editor.scss, remplace tous les styles par:

.wp-block-cgb-block-my-custom-block background: # cba7f1; bordure: 1px solide # a170d6; 

Vous pouvez voir dans les captures d'écran ci-dessous comment ces modifications affectent le rendu de notre bloc, selon que nous le visualisons dans la fenêtre de l'éditeur ou dans l'interface frontale..

Nous ne couvrirons pas encore les scripts de bloc de mise en file d'attente, mais il suffit pour l'instant de savoir que editor.scss les styles ne sont appliqués qu'à la fenêtre de l'éditeur et style.scssest ajouté à tous les deux la fenêtre de l'éditeur et le front-end. Par conséquent, les styles utilisés à la fois dans l'éditeur et au début peuvent être omis de style.scss.

Remarquez comment dans les fichiers Sass nous référons un long sélecteur CSS pour cibler nos éléments de bloc.

.wp-block-cgb-block-my-custom-block

Cette classe est automatiquement ajoutée par Gutenberg à l’élément conteneur dans le bloc, mais nous devons l’appliquer manuellement dans la fenêtre de l’éditeur pour obtenir la même classe, comme vous pouvez le voir dans modifier méthode ci-dessous.

Le nom de classe généré par Gutenberg est déterminé comme suit: wp-block- [espace de nom de bloc] - [nom de bloc.

Dans notre cas, nous avons utilisé le créer-guten-block boîte à outils pour créer notre bloc, qui utilise cgb pour l'espace de noms par défaut, et block-my-custom-block est basé sur le nom de bloc que nous avons spécifié. Cela se traduit par le nom de la classe CSS wp-block-cgb-block-my-custom-block être ajouté au conteneur de bloc. L’espace de noms et le nom du bloc sont utilisés par Gutenberg en interne pour identifier les blocs de manière unique..

Lors de la modification des fichiers de blocage, j’ai trouvé quelques points de douleur dignes d’être mentionnés..

Tout d’abord, lorsqu’on apporte des modifications au modifier méthode, je me suis retrouvé à effacer le cache du navigateur avant d'actualiser la fenêtre de l'éditeur afin de voir les dernières modifications. Cela n'arrivait pas tout le temps, mais c'était assez souvent le cas. Si vous constatez la même chose, effacez simplement le cache de votre navigateur et essayez à nouveau..

Deuxièmement, lors de l’édition du contenu de la enregistrer méthode, quelque chose d'étrange semble se produire dans la fenêtre de l'éditeur lors de son prochain rafraîchissement.

Pour illustrer cela, j’ai ajouté un nouvel élément de liste (

Indigo

) dans le enregistrer méthode, puis a actualisé l’éditeur de publications (après avoir effacé le cache à nouveau, bien sûr!). Voici le résultat:

Si vous choisissez soit Convertir en blocs ou Modifier en HTML alors vous êtes présenté avec le contenu de la enregistrer méthode, destinée à être visualisée au début et non dans l'éditeur.

C'est très déroutant et le seul moyen évident de ramener les choses à la normale était de supprimer le bloc de la fenêtre de l'éditeur et de le réinsérer. Comme je l'ai mentionné dans le post précédent, Gutenberg est toujours un travail en cours, et c'est un bon exemple de cela!

Espérons que cela deviendra plus intuitif dans les versions futures, mais pour le moment, c'est juste quelque chose à surveiller. Lorsque vous modifiez le enregistrer être prêt à supprimer les blocs associés dans la fenêtre de l'éditeur et à les rajouter.

Comme mentionné précédemment, la sortie du enregistrer et modifier les méthodes peuvent être complètement différentes. Cependant, dans la plupart des cas, vous souhaiterez probablement que la sortie frontale corresponde à la sortie de l'éditeur, de sorte que l'expérience d'édition soit la plus cohérente possible avec le rendu frontal..

Dans l'exemple ci-dessus, j'ai uniquement ajouté du contenu et des styles différents dans l'éditeur et la vue frontale à des fins de démonstration..

Bloquer l'API

L’API Block est composée d’un ensemble d’objets JavaScript ajoutés à la liste globale. wp objet admin. Et parce que wp est global, nous n'avons pas besoin de l'importer spécifiquement dans notre code source, il est disponible à la demande.

Les objets disponibles dans wp dépend de la page d'administration que vous consultez actuellement. Par exemple, si vous personnalisez votre site, alors wp inclut l'objet API principal du personnalisateur. 

Actuellement, toutefois, l'API Gutenberg Block n'est disponible que dans l'éditeur de publication. Je prévois que cela changera à l'avenir lorsque l'intégration entre l'éditeur de publication et le personnaliseur de site se rapprochera.

Vous pouvez voir la structure de wp en ouvrant l'éditeur Gutenberg et en entrant wp dans la console du navigateur.

Comme vous pouvez le voir, wp contient de nombreux objets, mais ceux qui nous intéressent le plus sont:

• wp.elements
• wp.blocks
• wp.components
• wp.data
• wp.i18n

Ces objets vous donnent accès à tous les outils nécessaires pour créer des blocs très complexes. Essayez de taper leurs noms d'objet complets dans la console du navigateur pour explorer plus en profondeur ces objets..

Par exemple, si vous tapez wp.blocks et développez l'objet, vous verrez l'une des fonctions disponibles est registerBlockType (). C’est une fonction très importante que nous traiterons en profondeur dans le prochain article.

le wp.elements Objet

Cet objet est la couche d'abstraction au-dessus de React (et ReactDom), qui expose la fonctionnalité de React de manière prévisible et cohérente. Cela reste vrai même si l'implémentation sous-jacente est modifiée complètement.

Tant que l'interface reste la même, les plugins qui interagissent avec l'API de blocage ne seront pas affectés à l'avenir.

le wp.blocks Objet

La fonction principale pour créer un bloc (registerBlockType ()) est contenu dans wp.blocks ainsi que d'autres fonctions nécessaires à la gestion générale des blocs, telles que:

• getBlockType ()
• getBlockContent ()
• getBlockAttributes ()
• hasBlockSupport ()
• isValidBlock ()

Cet objet contient également un ensemble de blocs réutilisables que vous pouvez inclure dans vos propres blocs afin de fournir une fonctionnalité sans surcharge. Ces blocs prêts à l'emploi peuvent accélérer considérablement le développement de blocs, et nous en utiliserons certains dans le prochain article à mesure que nous approfondissons la création de blocs..

Certains des disponibles sont:

• barre d'outils d'alignement
• autocomplete
• téléchargeur de média
• palette de couleurs
• éditeur de texte enrichi

le wp.components Objet

le wp.components L'objet contient également des composants réutilisables, mais ils sont plus génériques et servent généralement à créer des éléments d'interface utilisateur supplémentaires dans la fenêtre d'édition, tels que les panneaux de configuration pour les paramètres de bloc..

Ceux-ci inclus:

• bouton
• case à cocher
• éditeur de code
• icône tiret
• date / heure
• menu déroulant
• élément du menu
• bouton radio
• contrôle de la portée

le wp.data Objet

Le module de données gère l’état de l’application dans l’éditeur Gutenberg, qui comprend le stockage des paramètres pour chaque bloc. Nous allons examiner différentes manières d’ajouter des paramètres à un bloc dans le dernier post de cette série..

wp.data est implémenté au-dessus de Redux. Ainsi, lorsque Gutenberg est fusionné avec core, nous n’avons pas seulement accès à React, mais également à un magasin de données centralisé complet alimenté par Redux.! 

L'objet wp.i18n

Les plugins et les thèmes sont capables de traduire facilement des chaînes PHP depuis des années. Une méthode similaire est également disponible pour la traduction de chaînes en JavaScript grâce au wp.i18n objet. Cela signifie que toutes les chaînes contenues dans votre bloc, y compris le nom du bloc, les mots-clés et les étiquettes, peuvent être traduites dans n'importe quelle langue..

Si vous avez déjà utilisé les fonctions de traduction standard de PHP, vous vous sentirez comme à la maison, car le processus est à peu près le même. Je pense que c'est un choix judicieux, car cela encouragera les développeurs à autoriser dès le départ les traductions de chaînes dans leurs blocs..

Dans votre code de bloc, la traduction d'une chaîne est aussi simple que:

wp.i18n .__ ('Cette chaîne est traduisible', 'text-domain');

Conclusion

Dans ce tutoriel, nous avons implémenté un bloc de base et modifié le code. Nous avons également constaté que nous avions un contrôle total sur le rendu des blocs et que nous pouvions avoir différentes vues de blocs dans l'éditeur par rapport à l'interface frontale..

L'éditeur a encore des problèmes qui peuvent vous surprendre de temps en temps. Cela rappelle que Gutenberg est encore en développement et peut ne pas être prêt à être utilisé sur les sites de production..

Enfin, nous avons terminé avec une vue d’ensemble de l’API de bloc, qui introduit plusieurs nouveaux objets sur le système global. wp Objet JavaScript pour créer et gérer des blocs.

Dans le prochain post, nous allons accélérer le rythme et créer un bloc plus complet. Pour ce faire, nous explorerons les registerBlockType () fonctionner en profondeur. Nous examinerons également de plus près la mise en file d'attente correcte de vos scripts de bloc.