Style personnalisé pour les blocs WordPress Gutenberg : Partie 1

C’est une période passionnante pour être un développeur WordPress, avec la sortie officielle de la version 5.0 qui approche à grands pas. Cela marquera les débuts d’un nouvel éditeur nommé Gutenberg. Si vous travaillez régulièrement avec WordPress, que ce soit en tant que développeur ou en tant qu’utilisateur, vous comprenez probablement pourquoi il s’agit d’une grande nouvelle.

Tout le monde n’attend pas avec impatience la nouvelle version, car elle apporte une expérience d’édition très différente à WordPress. Il existe une certaine incertitude quant à l’impact que cela aura sur l’écosystème WordPress au sens large. Cependant, le nouvel éditeur a le potentiel de révolutionner la façon dont vous créez du contenu pour votre site WordPress. Bien qu'il puisse rencontrer une résistance initiale pour attirer les utilisateurs dans l'ensemble, je pense qu'il peut finalement créer une connexion plus tangible avec votre contenu d'une manière que l'éditeur TinyMCE classique ne peut pas

.

Vous pouvez essayer le nouvel éditeur avant la sortie prévue de WordPress 5.0 en installant le plugin Gutenberg à partir du référentiel de plugins WordPress. Si vous n’avez pas encore eu l’occasion de l’essayer, je vous recommande vivement de le faire pour avoir un aperçu de votre future expérience d’édition dans WordPress !

La création de contenu dans le nouvel éditeur est entièrement basée sur des blocs. Chaque élément de contenu que vous ajoutez à l'éditeur est un bloc. Cela inclut tous vos éléments préférés tels que des curseurs, des paragraphes, des boutons, des listes, des images, des témoignages, etc. Après avoir ajouté un bloc à l'éditeur, vous pouvez configurer les paramètres qui contrôlent son apparence et son comportement. Ceux-ci peuvent être modifiés sur le bloc lui-même ou via le panneau Inspecteur (situé sur le côté droit de l'écran de l'éditeur). Les paramètres de bloc sont parfois répétés à deux endroits, mais cela varie d'un bloc à l'autre.

Cependant, presque tous les blocs offrent une option dans le panneau de l'inspecteur permettant d'ajouter manuellement un ou plusieurs noms de classe CSS afin de permettre une personnalisation plus poussée du bloc. Cela peut être utile si vous souhaitez remplacer le style d'un bloc principal ou d'un bloc tiers.

Bien que cela fonctionne bien, il serait avantageux d'étendre ce comportement et de permettre l'ajout d'options de personnalisation de bloc via un ensemble de sélections de style prédéfinies. C'est exactement ce que nous apportent les changements de style de bloc, et nous nous concentrerons spécifiquement sur eux dans ce didacticiel.

Prérequis

Nous verrons également comment ajouter des variations de style de bloc à vos propres blocs et comment étendre les blocs existants. Ainsi, pour continuer, vous devrez idéalement vous familiariser avec les bases du développement de plugins WordPress et comment créer des blocs.

Ne paniquez pas, cependant – si vous avez besoin d’un cours intensif, consultez mon didacticiel en quatre parties sur la création de blocs personnalisés. Il couvre à peu près tout ce que vous devez savoir dans ce didacticiel - à l'exception des modifications de style de bloc, qui sont au centre de ce didacticiel particulier !

De plus, si vous souhaitez suivre le code et l'essayer par vous-même, vous aurez besoin d'un serveur de développement local pour exécuter WordPress (par exemple WAMP, MAMP, etc.) et d'un éditeur de code.

Contexte

L'API Block Style Variants a été introduite dans le projet Gutenberg dans le plugin v3.2 et vous permet d'appliquer des styles de bloc alternatifs directement via l'interface de l'éditeur.

Pour obtenir les mêmes résultats avant que le style de bloc ne change, vous devez saisir manuellement la classe CSS personnalisée dans le champ de texte Autres classes CSS du panneau Inspecteur de bloc, qui se trouve dans la section Avancé.

Si vous êtes intéressé par la proposition originale de modifications du style de bloc, vous pouvez lire tous les détails dans la pull request dans le référentiel officiel Gutenberg.

Toute variante de style définie pour un bloc est accessible directement dans la barre d'outils du bloc. Sélectionnez le bloc et cliquez sur l'icône dans le coin supérieur gauche de la barre d'outils pour afficher le volet Styles de bloc.

Vous vous souvenez plus tôt lorsque j'ai dit que certains paramètres de bloc et groupes d'inspection étaient accessibles directement dans le bloc ? Eh bien, c'est exactement ce qui se passe avec les changements de style de bloc ! Assurez-vous que le bloc est sélectionné et affiché dans le panneau Inspecteur.

C'est pour plus de commodité et vous pouvez choisir la variante de style parmi celle qui vous convient le mieux. Par exemple, sur des écrans plus grands, vous pouvez choisir de modifier les styles de bloc via le panneau Inspecteur, car il vous permet de basculer entre les styles d'un simple clic de souris. Cependant, sur les appareils plus petits, vous souhaiterez peut-être masquer le panneau de l'inspecteur et simplement modifier les styles via la barre d'outils des blocs.

Support du bloc de base

Certains blocs de base prennent actuellement en charge des variantes de style de bloc, notamment :

• Bouton
• Tirer un devis
• Citation
• Séparateur
• Table

Je suis sûr que la prise en charge d'autres blocs de base sera ajoutée à l'avenir à mesure que cette fonctionnalité sera plus largement adoptée. C'est très flexible et je suis sûr que de nombreux utilisateurs auront hâte de choisir parmi les options de style prédéfinies pour la plupart des blocs. Une fois que vous utilisez des variantes de style de bloc, il est facile de comprendre pourquoi cela se produit.

Bien sûr, vous pouvez également ajouter des variations de style de bloc à vos propres blocs. Nous discuterons ensuite des détails spécifiques de mise en œuvre.

Implémenter les changements de style de bloc

Il existe deux manières d'implémenter des modifications de style de bloc personnalisées. Si vous avez accès à la définition du bloc, vous pouvez spécifier des variantes de style de bloc directement dans la fonction registerBlockType() via l'attribut style.

Par exemple, voici à quoi ressemble la définition de l'attribut de style de bloc de base du bouton.

styles: [
	{ name: 'default', label: _x( 'Rounded', 'block style' ), isDefault: true },
	{ name: 'outline', label: __( 'Outline' ) },
	{ name: 'squared', label: _x( 'Squared', 'block style' ) },
],

Ici, trois nouvelles variantes de style de bloc sont enregistrées. Notez que le style Coins arrondis est également défini comme style par défaut.

Cependant, si vous n'avez pas accès au code source du bloc, vous pouvez adopter une autre approche. Dans Gutenberg 3.4, deux nouvelles fonctions ont été ajoutées pour enregistrer et désenregistrer des variantes de style de bloc en dehors de la définition de bloc.

Pour enregistrer une variante de style de bloc personnalisée, utilisez la fonction registerBlockStyle() comme suit :

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'custom-button-style',
    label: 'My Button Style'
} );

Cela ajoute une nouvelle variante de style de bloc appelée custom-button-style au bloc de boutons principal. Désormais, lors de l'insertion d'un bloc de boutons dans l'éditeur, vous verrez les nouvelles variantes de style de bloc disponibles.

Une fois sélectionnée, la variante de style de bloc ajoute la is-style-custom-将 Button-style classe CSS au champ de texte autre classe CSS dans le panneau de l'inspecteur de bloc.

Cela déclenchera à son tour une mise à jour de la sortie du bloc et la classe sera ajoutée au balisage HTML.

Vous vous demandez peut-être où ajouter la fonction registerBlockStyle() dans votre propre code. Ne vous inquiétez pas, nous couvrirons l'exemple complet dans le prochain article et vous pourrez télécharger le code final du plugin afin de pouvoir le tester vous-même.

Une petite question !

Lorsque vous insérez pour la première fois un bloc prenant en charge les variantes de style de bloc, il convient de noter que jusqu'à ce que vous cliquiez spécifiquement sur les variantes de style de bloc, aucune classe CSS n'est réellement ajoutée à la balise de bloc, même si l'une d'elles apparaît comme sélectionnée par défaut.

Essayez-le vous-même.

Insérez votre nouveau bloc de boutons dans l'éditeur et activez les options de variation de style de bloc. Vous devriez voir l'option Coins arrondis sélectionnée par défaut. Si vous ouvrez la section Avancé dans l'inspecteur de blocs, la classe CSS n'a pas été ajoutée au champ de texte. Par conséquent, les classes CSS ne sont pas insérées dans les balises de bloc. Affichez la sortie HTML du bloc de boutons dans l'éditeur pour confirmer par vous-même.

Revenez maintenant aux paramètres de variante de style de bloc du bloc Bouton et cliquez sur l'option Par défaut (option sélectionnée) ou sur toute autre option de style de bloc. Vous verrez immédiatement que la classe CSS a été ajoutée au champ de texte Autres classes CSS et aux balises wrapper de bloc. Après avoir sélectionné une variante de style de bloc, toutes les règles CSS personnalisées définies pour la classe personnalisée seront également appliquées immédiatement.

Ce comportement est un peu déroutant lors de la première rencontre car, intuitivement, vous vous attendriez à ce que les classes CSS soient ajoutées automatiquement pour la variante de style de bloc sélectionnée par défaut.

Conclusion

Nous avons appris ce que sont les variantes de style de bloc et pourquoi elles constituent un ajout utile à l'expérience d'édition de blocs. Je démontre également une implémentation de base d'une variante de style bloc.

Dans le prochain article, nous détaillerons comment enregistrer vos propres styles de blocs et connecter CSS via des plugins ainsi que des thèmes enfants.

Nous apprendrons également comment désenregistrer les styles de bloc et comment définir quelle variante de style est sélectionnée par défaut lorsqu'un bloc est inséré pour la première fois dans l'éditeur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!