Boutons de style dans les thèmes de blocs WordPress

Un peu en arrière, Ganesh Dahal a écrit un article ici sur CSS-Tricks répondant à un tweet qui posait des questions sur l'ajout d'ombres de boîte CSS sur les blocs et éléments WordPress. Il y a beaucoup de choses intéressantes qui exploitent les nouvelles fonctionnalités fournies dans WordPress 6.1 qui fournissent des contrôles pour appliquer des ombres aux choses directement dans l'interface utilisateur de l'éditeur de blocs et de l'éditeur de site.

Ganesh a brièvement abordé les éléments de bouton dans ce message. Je veux reprendre cela et approfondir les approches de style des boutons dans les thèmes de blocs WordPress. Plus précisément, nous allons ouvrir une nouvelle theme.json fichier et décomposer les différentes approches de style des boutons dans le schéma.

Pourquoi des boutons, demandez-vous ? C'est une bonne question, alors commençons par là.

Les différents types de boutons

Lorsque nous parlons de boutons dans le contexte de l'éditeur de blocs WordPress, nous devons distinguer deux types différents :

1. Blocs enfants à l'intérieur du bloc Boutons
2. Boutons imbriqués dans un autre bloc (par exemple, le bloc Formulaire de publication de commentaires)

Si nous ajoutons ces deux blocs à un modèle, ils ont le même aspect par défaut.

Mais le balisage est très différent :

<div class="wp-block-button"> <a class="wp-block-button__link wp-element-button">Button 1</a>
</div>
<p class="form-submit wp-block-button"> <input name="submit" type="submit" id="submit" class="wp-block-button__link wp-element-button" value="Post Comment"> </p>

Comme nous pouvons le voir, les noms des balises HTML sont différents. Ce sont les classes communes - .wp-block-button ainsi que .wp-element-button — qui garantissent un style cohérent entre les deux boutons.

Si nous écrivions du CSS, nous ciblerions ces deux classes. Mais comme nous le savons, les thèmes de blocs WordPress ont une manière différente de gérer les styles, et c'est à travers le theme.json fichier. Ganesh a également couvert cela en détail, et vous feriez bien de lire son article.

Alors, comment définissons-nous les styles de bouton dans theme.json sans écrire de vrai CSS ? Faisons le ensemble.

Création des styles de base

theme.json est un ensemble structuré de schémas écrits dans des paires propriété:valeur. Les propriétés de niveau supérieur sont appelées "sections", et nous allons travailler avec les styles section. C'est là que vont toutes les instructions de style.

Nous nous concentrerons spécifiquement sur la elements dans le styles. Ce sélecteur cible les éléments HTML partagés entre les blocs. Voici le shell de base avec lequel nous travaillons :

// theme.json
{ "version": 2, "styles": { "elements": { // etc. } }
}

Donc, ce que nous devons faire, c'est définir un button .

={ "version": 2, "styles": { "elements": { "button": { // etc. } } }
}

Ceci button correspond aux éléments HTML utilisés pour baliser les éléments de bouton sur le front-end. Ces boutons contiennent des balises HTML qui peuvent être l'un ou l'autre de nos deux types de boutons : un composant autonome (c'est-à-dire le bloc Bouton) ou un composant imbriqué dans un autre bloc (par exemple, le bloc Publier un commentaire).

Plutôt que d'avoir à styliser chaque bloc individuellement, nous créons des styles partagés. Continuons et changeons l'arrière-plan par défaut et la couleur du texte pour les deux types de boutons dans notre thème. Il y a un color objet là-dedans qui, à son tour, prend en charge background ainsi que text properties où nous définissons les valeurs que nous voulons :

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } } } }
}

Cela change la couleur des deux types de boutons :

Si vous ouvrez DevTools et regardez le CSS que WordPress génère pour les boutons, nous voyons que le .wp-element-button classe ajoute les styles que nous avons définis dans theme.json:

.wp-element-button { background-color: #17a2b8; color: #ffffff;
}

Ce sont nos couleurs par défaut ! Ensuite, nous voulons donner aux utilisateurs un retour visuel lorsqu'ils interagissent avec le bouton.

Implémentation de styles de boutons interactifs

Comme il s'agit d'un site entièrement consacré au CSS, je parie que beaucoup d'entre vous connaissent déjà les états interactifs des liens et des boutons. Nous pouvons :hover le curseur de la souris dessus, tabulez-les dans :focus, cliquez dessus pour les rendre :active. Zut, il y a même un :visited state pour donner aux utilisateurs une indication visuelle qu'ils ont déjà cliqué dessus.

Ce sont Pseudo-classes CSS ainsi que nous les utilisons pour cibler les interactions d'un lien ou d'un bouton.

En CSS, nous pourrions styliser un :hover énoncer comme ceci :

a:hover { /* Styles */
}

In theme.json, nous allons étendre notre déclaration de bouton existante avec ces pseudo-classes.

{ "version": 2, "styles": { "elements": { "button": { "color": { "background": "#17a2b8", "text": "#ffffff" } ":hover": { "color": { "background": "#138496" } }, ":focus": { "color": { "background": "#138496" } }, ":active": { "color": { "background": "#138496" } } } } }
}

Remarquez la nature "structurée" de cela. Nous suivons essentiellement un schéma :

Nous avons maintenant une définition complète des styles par défaut et interactifs de notre bouton. Mais que se passe-t-il si nous voulons styliser certains boutons qui sont imbriqués dans d'autres blocs ?

Boutons de style imbriqués dans des blocs individuels

Imaginons que nous voulions que tous les boutons aient nos styles de base, à une exception près. Nous voulons que le bouton de soumission du bloc Post Comment Form soit bleu. Comment y parviendrions-nous ?

Ce bloc est plus complexe que le bloc Bouton car il comporte plus de parties mobiles : le formulaire, les entrées, le texte instructif et le bouton. Afin de cibler le bouton dans ce bloc, nous devons suivre le même type de structure JSON que nous avons fait pour le button élément, mais appliqué au bloc Post Comment Form, qui est mappé à l'élément core/post-comments-form élément:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { // etc. } } }
}

Notez que nous ne travaillons plus dans elements plus. Au lieu de cela, nous travaillons à l'intérieur blocks qui est réservé à la configuration des blocs réels. Les boutons, en revanche, sont considérés comme un élément global car ils peuvent être imbriqués dans des blocs, même s'ils sont également disponibles en tant que bloc autonome.

La structure JSON prend en charge les éléments dans les éléments. Donc, s'il y a un button élément dans le bloc Post Comment Form, nous pouvons le cibler dans le core/post-comments-form bloquer:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } } } } } }
}

Ce sélecteur signifie que non seulement nous ciblons un bloc spécifique, mais aussi un élément spécifique contenu dans ce bloc. Nous avons maintenant un ensemble de styles de boutons par défaut qui sont appliqués à tous les boutons du thème, et un ensemble de styles qui s'appliquent à des boutons spécifiques contenus dans le bloc Post Comment Form.

Le CSS généré par WordPress a donc un sélecteur plus précis :

.wp-block-post-comments-form .wp-element-button,
.wp-block-post-comments-form .wp-block-button__link { background-color: #007bff;
}

Et que se passe-t-il si nous voulons définir différents styles interactifs pour le bouton Post Comment Form ? C'est la même chose que la façon dont nous l'avons fait pour les styles par défaut, seuls ceux-ci sont définis à l'intérieur du core/post-comments-form bloquer:

{ "version": 2, "styles": { "elements" { "button": { // Default button styles } } "blocks": { "core/post-comments-form": { "elements": { "button": { "color": { "background": "#007bff" } ":hover": { "color": { "background": "#138496" } }, // etc. } } } } }
}

Qu'en est-il des boutons qui ne sont pas dans des blocs ?

WordPress génère et applique automatiquement les bonnes classes pour générer ces styles de boutons. Mais que se passe-t-il si vous utilisez un thème WordPress "hybride" qui prend en charge les blocs et l'édition complète du site, mais contient également des modèles PHP "classiques" ? Ou que se passe-t-il si vous avez créé un bloc personnalisé, ou même si vous avez un shortcode hérité, qui contient des boutons ? Aucun de ceux-ci n'est géré par le Moteur de style WordPress!

Pas de soucis. Dans tous ces cas, vous ajouteriez le .wp-element-button classe dans le modèle, le bloc ou le balisage de code court. Les styles générés par WordPress seront alors appliqués dans ces instances.

Et il peut y avoir des situations où vous n'avez aucun contrôle sur le balisage. Par exemple, certains plugins de bloc peuvent être un peu trop opiniâtres et appliquer généreusement leur propre style. C'est là que vous pouvez généralement accéder à l'option "Avancé" dans le panneau des paramètres du bloc et y appliquer la classe :

Emballage en place

En écrivant "CSS" dans theme.json peut sembler gênant au début, j'ai trouvé que cela devenait une seconde nature. Comme CSS, il existe un nombre limité de propriétés que vous pouvez appliquer de manière large ou très étroite en utilisant les bons sélecteurs.

Et n'oublions pas les trois principaux avantages de l'utilisation theme.json:

1. Les styles sont appliqués aux boutons à la fois dans la vue frontale et dans l'éditeur de blocs.
2. Votre CSS sera compatible avec les futures mises à jour de WordPress.
3. Les styles générés fonctionnent aussi bien avec les thèmes de bloc qu'avec les thèmes classiques - il n'est pas nécessaire de dupliquer quoi que ce soit dans une feuille de style séparée.

Si vous avez utilisé theme.json styles dans vos projets, partagez vos expériences et vos réflexions. J'ai hâte de lire les commentaires et les réactions !

• Contenu propulsé par le référencement et distribution de relations publiques. Soyez amplifié aujourd'hui.
• Platoblockchain. Intelligence métaverse Web3. Connaissance Amplifiée. Accéder ici.
• La source: https://css-tricks.com/styling-buttons-in-wordpress-block-themes/