J'ai trébuché ce tweet d'Ana Segota à la recherche d'un moyen d'ajouter un CSS box-shadow à l'état de survol d'un bouton dans WordPress dans le theme.json fichier.
Elle demande parce que theme.json C'est là que WordPress veut que nous commencions à déplacer les styles de base pour les thèmes de blocs. Traditionnellement, nous faisions n'importe quel style dans style.css lorsque l'on travaille dans un thème « classique ». Mais avec le thème par défaut Twenty Twenty-Three (TT3) récemment livré avec WordPress 6.1 déplaçant tous ses styles vers theme.json, nous nous rapprochons de plus en plus de pouvoir faire la même chose avec nos propres thèmes. J'ai couvert cela en détail dans un article récent.
Je dis "de plus en plus proche" car il y a encore beaucoup de propriétés et de sélecteurs CSS qui ne sont pas pris en charge dans theme.json. Par exemple, si vous espérez styliser quelque chose avec comme perspective-origin in theme.json, cela n'arrivera tout simplement pas - du moins au moment où j'écris ceci aujourd'hui.
Ana regarde box-shadow et, heureusement pour elle, cette propriété CSS est prise en charge par theme.json à partir de WordPress 6.1. Son tweet est daté du 1er novembre le même jour que la sortie de la version 6.1. Ce n'est pas comme si la prise en charge de la propriété était une fonctionnalité phare de la version. Les gros titres étaient davantage liés aux techniques d'espacement et de mise en page pour les blocs et les thèmes de blocs.
Voici comment nous pouvons appliquer un box-shadow à un bloc spécifique — disons le bloc Featured Image — dans theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"blocks" :{
"core/post-featured-image": {
"shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
}
}
}
}Vous vous demandez si le nouvelle syntaxe de couleur œuvres? Moi aussi! Mais quand j'ai essayé - rgb(0 0 0 / 0.66) - Je n'ai rien compris. Peut-être que c'est déjà en cours ou pourrait utiliser une demande d'extraction.
Facile, non ? Bien sûr, c'est très différent de l'écriture de CSS vanille dans style.css et prend un certain temps pour s'y habituer. Mais c'est en effet possible depuis la dernière version de WordPress.
Et, hé, nous pouvons faire la même chose avec des "éléments" individuels, comme un bouton. Un bouton est un bloc en soi, mais il peut également s'agir d'un bloc imbriqué dans un autre bloc. Ainsi, pour appliquer une box-shadow globalement à tous les boutons, nous ferions quelque chose comme ça dans theme.json:
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}Mais Ana veut ajouter l'ombre au bouton :hover Etat. Heureusement, prise en charge du style des états interactifs pour certains éléments, comme les boutons et les liens, en utilisant des pseudo-classes — y compris :hover, :focus, :activeet une :visited - a également gagné theme.json prise en charge dans WordPress 6.1.
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
":hover": {
"shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
}
}
}
}
}Si vous utilisez un thème parent, vous pouvez certainement remplacer les styles d'un thème dans un thème enfant. Ici, je remplace complètement les styles de boutons de TT3.
Afficher le code complet
{
"version": 2,
"settings": {},
// etc.
"styles": {
"elements": {
"button": {
"border": {
"radius": "0"
},
"color": {
"background": "var(--wp--preset--color--tertiary)",
"text": "var(--wp--preset--color--contrast)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
"typography": {
"fontSize": "var(--wp--preset--font-size--medium)"
},
"shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
":hover": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
},
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
},
":focus": {
"color": {
"background": "var(--wp--preset--color--contrast)",
"text": "var(--wp--preset--color--base)"
}
},
":active": {
"color": {
"background": "var(--wp--preset--color--secondary)",
"text": "var(--wp--preset--color--base)"
}
}
}
}
}
}Voici comment cela s'affiche :
Une autre façon de le faire : les styles personnalisés
Le récemment publié Pixl Le thème de bloc fournit un autre exemple d'utilisation réelle du box-shadow propriété à theme.json à l'aide d'une méthode alternative qui définit des valeurs personnalisées. Dans le thème, une coutume box-shadow la propriété est définie comme .settings.custom.shadow:
{
"version": 2,
"settings": {
// etc.
"custom": {
// etc.
"shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
},
// etc.
}
}Puis, plus loin dans le fichier, la coutume shadow propriété est appelée sur un élément bouton :
{
"version": 2,
"settings": {
// etc.
},
"styles": {
"elements": {
"button": {
// etc.
"shadow": "var(--wp--custom--shadow) !important",
// etc.
":active": {
// etc.
"shadow": "2px 2px var(--wp--preset--color--primary) !important"
}
},
// etc.
}
}Je ne suis pas totalement sûr de l'utilisation de !important dans ce contexte. Mon intuition est qu'il s'agit d'une tentative d'empêcher de remplacer ces styles à l'aide de l'interface utilisateur des styles globaux dans l'éditeur de site, qui a une spécificité élevée par rapport aux styles définis dans theme.json. Voici un lien ancré vers plus d'informations de mon article précédent sur la gestion des styles de thème de bloc.
Mettre à jour: Il s'avère qu'il y a eu toute une discussion à ce sujet dans Demande de tirage n° 34689, qui note qu'il a été traité dans WordPress 5.9.
Et il y a plus ...
En plus des ombres, le CSS outline la propriété a également gagné theme.json pris en charge dans WordPress 6.1 et peut être appliqué aux boutons et à leurs états interactifs. Cette RP GitHub montre un bon exemple.
"elements": {
"button": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "dashed",
"color": "red"
},
":hover": {
"outline": {
"offset": "3px",
"width": "3px",
"style": "solid",
"color": "blue"
}
}
}
}Vous pouvez également trouver les vrais exemples de la façon dont le outline propriété travaille dans d'autres thèmes, y compris Intensité, Bloquer la toileet une Base de blocs.
Emballage en place
Qui savait qu'il y avait tant de choses à dire avec une seule propriété CSS lorsqu'il s'agit de bloquer le thème dans WordPress 6.1 ? Nous avons vu les méthodes officiellement prises en charge pour définir un box-shadow sur les blocs et les éléments individuels, y compris les états interactifs d'un élément de bouton. Nous avons également vérifié comment remplacer les ombres dans un thème enfant. Et, enfin, nous avons ouvert un exemple réel qui définit et définit les ombres dans une propriété personnalisée.
Vous pouvez trouver des discussions approfondies plus détaillées sur WordPress et ses box-shadow mise en œuvre dans ce RP GitHub. Il ya aussi un Proposition GitHub pour ajouter l'interface utilisateur directement dans WordPress pour définir des valeurs d'ombre sur les blocs - vous pouvez passer directement à un GIF animé montrant comment cela fonctionnerait.
En parlant de ça, justin têtard récemment développé un bloc qui affiche une barre de progression et des commandes d'ombre de boîte intégrées. Il le montre dans cette vidéo :
Plus d'information
Si vous souhaitez approfondir la box-shadow et d'autres propriétés CSS prises en charge par le theme.json fichier dans un thème de bloc, voici quelques ressources que vous pouvez utiliser :
