comment CSS est écrit dans les thèmes WordPress change de façon spectaculaire. J'ai récemment partagé une technologie qui ajoute un support de police fluide dans WordPress via theme.json, un nouveau document qui est fortement promu par WordPress qui deviendra la source centrale de vérité pour définir les styles de thème WordPress qui prennent en charge la fonctionnalité d'édition de site-whole (FSE).
attendez, non style.css fichier? Nous l'avons toujours. En fait, style.css est toujours un fichier nécessaire dans un thème de bloc, bien qu'il ait un effet très réduit et n'est utilisé que pour enregistrer des méta-informations pour le sujet. Autrement dit, theme.json est toujours en cours de développement actif, ce qui signifie que nous sommes dans une période de transition où vous pouvez trouver des styles définis à theme.json, styles.css et même aux niveaux de blocs.
Alors, à quoi ressemblent les styles dans ces époques WordPress FSE? C'est ce que je veux présenter dans cet article. Le manuel du développeur de thème WordPress manque de documentation sur les styles de thème de bloc, donc tout ce que nous avons couvert ici est des informations que j'ai collectées sur la situation actuelle et les discussions futures sur les thèmes WordPress.
Les nouvelles fonctionnalités de développement incluses dans WordPress 6.1 nous rapprochent d'un système qui définit les styles entièrement dans theme.json, mais il y a encore beaucoup de travail à faire avant de pouvoir compter complètement. Nous pouvons apprendre ce qui apparaîtra dans les futures versions en utilisant le plugin Gutenberg, où les caractéristiques expérimentales sont généralement testées.
Nous pouvons également en savoir plus sur notre statut actuel en examinant l'évolution du thème WordPress par défaut. Jusqu'à présent, il y a trois thèmes par défaut qui prennent en charge l'édition à l'échelle du site:
style.css. NON theme.json Fichier. Le bloc TT1 est la première fois que nous voyons des styles dans l'ère Block Editor, que nous pouvons considérer comme une bande-annonce plutôt que comme un modèle. theme.json. Ce fichier ne contient que 373 lignes de code. Ses principaux développeurs ont fait des efforts coordonnés pour en faire un thème sans CSS; style.css
theme.json style.css
. Avant d'envisager de le faire, il y a encore des règles de style CSS à prendre en charge dans style.css. Les questions importantes restantes sont actuellement en cours de discussion, l'objectif est de déplacer complètement toutes les règles de style CSS dans theme.json et de fusionner différentes sources de theme.json dans une seule interface utilisateur pour configurer les styles globaux directement dans l'éditeur de site WordPress. theme.json
theme.json Cela nous met dans une situation relativement difficile. Non seulement il n'y a pas de chemin clair pour remplacer les styles de thème, mais on ne sait pas non plus de quoi sont les styles - sont-ils de différentes couches de fichiers
, du plugin Gutenberg ou ailleurs? theme.json
style.css Pourquoi choisir le thème.json au lieu de style.css?
theme.json vaut la peine de lire le post de Ben, mais le point est dans cette citation:
Qu'il s'agisse de mise en page, de préréglage ou de style de bloc, l'écrasement du CSS peut poser une barrière à l'intégration et à l'interopérabilité: la cohérence visuelle entre le front-end et l'éditeur devient plus difficile à maintenir et la mise à niveau dans le bloc peut entrer en conflit avec la remplacement. De plus, CSS personnalisé est moins portable dans d'autres thèmes de bloc.
La hiérarchie des styles définis "Basics" peut être correctement résolu en encourageant les auteurs de sujets à utiliser l'API
autant que possible.
L'un des principaux avantages du déplacement de CSS vers JSON est que JSON est un format lisible par machine, ce qui signifie qu'il peut être exposé dans l'interface utilisateur du site WordPress en obtenant l'API, permettant aux utilisateurs de modifier les valeurs par défaut et de personnaliser l'apparence du site sans écrire de CSS. Il fournit également un moyen de styliser les blocs de manière cohérente, tout en fournissant une structure qui crée une couche spécifique afin que les paramètres utilisateur aient une priorité plus élevée que les paramètres définis dans theme.json. Cette interaction entre les styles au niveau du thème dans theme.json et les styles définis par l'utilisateur dans l'interface utilisateur de style global rend la méthode JSON si attrayante.
Les développeurs maintiennent la cohérence dans JSON et les utilisateurs acquièrent la flexibilité grâce à la personnalisation sans code. Il s'agit d'une situation gagnant-gagnant.
Bien sûr, il y a d'autres avantages, et Mike McAlister de WP Engine en répertorie plusieurs dans ce fil Twitter. Vous pouvez trouver plus d'avantages dans la discussion approfondie sur le blog Make WordPress Core. Après avoir lu, comparez les avantages de la méthode JSON avec les méthodes disponibles qui définissent et écrasent les styles dans des sujets classiques.
Nous avons vu beaucoup de progrès en termes de parties du thème. Avant WordPress 6.1, tout ce que nous pouvions vraiment faire était de style le titre et le lien. Maintenant, avec WordPress 6.1, nous pouvons ajouter des boutons, des titres, des citations et des titres. theme.json
json . Un élément peut être traité comme un seul composant qui existe dans un bloc WordPress. Supposons que nous ayons un bloc avec le titre, le paragraphe et les boutons. Ces parties individuelles sont des éléments, et il y a un objet dans lequel nous définissons leur style: theme.json
elements
<code>{
"version": 2,
"settings": {},
// etc.
"styles": {
// etc.
"elements": {
"button": { ... },
"h1": { ... },
"heading": { ... },
},
},
"templateParts": {}
}</code>Par exemple, les styles de liaison dans l'objet
, mais n'est pas un bloc lui-même. Mais le lien peut être utilisé dans un bloc, il héritera du style défini dans l'objet de elements. Mais cela ne résume pas complètement la définition des éléments, car certains éléments sont également enregistrés en blocs, tels que les blocs de titre et de bouton - mais ces blocs peuvent toujours être utilisés dans d'autres blocs. theme.json
elements.link Ce qui suit est le tableau des éléments fournis par Carolina qui peuvent être utilisés pour styliser dans
theme.json Comme vous pouvez le voir, c'est encore à ses débuts et il y a encore beaucoup de choses à passer du plugin Gutenberg au noyau WordPress. Mais vous pouvez voir à quelle vitesse il serait de définir à l'échelle mondiale tous les titres du thème sans rechercher des sélecteurs dans des fichiers CSS ou Devtools.
De plus, vous pouvez commencer à comprendre comment la structure de theme.json forme une couche spécifique, des éléments mondiaux (tels que des titres) aux éléments individuels (tels que H1), et des styles au niveau du bloc (comme H1 inclus dans un bloc).
Pour plus d'informations sur les éléments JSON, consultez cette proposition WordPress et ce billet ouvert dans le référentiel Github Github Gutenberg.
Continuons à discuter de la spécificité CSS. Comme je l'ai mentionné plus tôt, la méthode de style de JSON crée une hiérarchie. C'est vrai. Les styles définis sur les éléments JSON dans theme.json sont considérés comme le style de thème par défaut. Tout ce qui est défini par l'utilisateur dans l'interface utilisateur de style global remplacera la valeur par défaut.
En d'autres termes: Les styles utilisateur ont une spécificité plus élevée que les styles de thème par défaut. Jetons un coup d'œil au bloc de bouton pour comprendre comment cela fonctionne.
J'utilise videTheme, qui est un thème WordPress vierge sans style CSS. J'ajouterai un bloc de bouton à la nouvelle page.OK, nous savons que WordPress Core est livré avec des styles simples. Maintenant, je vais passer au thème TT3 par défaut dans WordPress 6.1 et l'activer. Si je rafraîchis la page avec le bouton, le style du bouton change.
Vous pouvez voir exactement d'où viennent ces nouveaux styles dans le fichier
de TT3. Cela nous dit que les styles d'éléments JSON ont priorité sur les styles de base WordPress. theme.json
Mais veuillez noter le bouton de recherche dans la dernière capture d'écran. Ça devrait être rouge aussi, non? Cela signifie que si les modifications que j'ai apportées sont au niveau mondial, elle doit être stylée à un autre niveau. Si nous voulons modifier les boutons
deux , nous pouvons apporter des modifications au niveau de l'utilisateur à l'aide de l'interface utilisateur de style global dans l'éditeur de site.
Nous avons utilisé l'interface utilisateur de style global pour modifier la couleur d'arrière-plan des deux boutons en bleu et modifié le texte. Notez que le bleu a priorité sur le style de thème!Moteur de style
pour obtenir plus de règles de style et écraser ces règles avec tout ce qui est défini dans le style global.
ces styles sont-ils inventés? Sont-ils dans des feuilles de style séparées? Peut-être qu'ils ont été injectés sur la page? theme.json
Nous ne voyons le moteur de style que pour la première fois. En fait, selon le billet, les travaux suivants ont été effectués jusqu'à présent:
Fondamentalement, c'est la base de la construction d'une seule API qui contient toutes les règles de style CSS pour le sujet, peu importe d'où elles viennent. Il nettoie la façon dont WordPress injecte des styles en ligne avant 6.1 et construit un système pour les noms de classe sémantique.
Pour plus de détails sur les objectifs à long terme et à court terme des moteurs de style, consultez cela faire de la discussion de base WordPress. Vous pouvez également suivre les problèmes de suivi et les panneaux de projet pour plus de mises à jour.
Nous avons discuté des primitives HTML dans les éléments theme.json JSON dans le fichier et comment ils définissent essentiellement le style de contenu par défaut tel que les titres, les boutons et les liens. Voyons maintenant comment l'élément réel utilise JSON et comment il se comporte dans divers contextes de style.
Les éléments JSON ont généralement deux contextes: Niveau global et Niveau de bloc . La définition des styles de niveau global est inférieure au niveau du bloc pour garantir que les styles spécifiques au bloc sont préférés afin que la cohérence soit maintenue partout où le bloc est utilisé.
Jetons un coup d'œil au nouveau thème TT3 par défaut et vérifions le style de ses boutons. Voici une courte casser de copie du fichier TT3 theme.json (il s'agit du code complet), montrant la section Global Style, mais vous pouvez trouver le code d'origine ici.
Afficher le code
``
{
"Version": 2,
"paramètres": {},
// ...
"Styles": {
// ...
"Éléments": {
"bouton": {
"frontière": {
"rayon": "0"
},
"couleur": {
"Background": "var (- wp - présentation-color-primary)",
"Texte": "var (- wp - présentation-color - contraste)"
},
": Hover": {
"couleur": {
"Background": "var (- wp - tracet-color - contrast)",
"Texte": "var (- wp - tracet-color --base)"
}
},
":se concentrer": {
"couleur": {
"Background": "var (- wp - tracet-color - contrast)",
"Texte": "var (- wp - tracet-color --base)"
}
},
":actif": {
"couleur": {
"Background": "var (- wp - présentation-color-secondary)",
"Texte": "var (- wp - tracet-color --base)"
}
}
},
"H1": {
"Typographie": {}
},
// ...
"En-tête": {
"Typographie": {
"Fontweight": "400",
"Lineheight": "1.4"
}
},
"lien": {
"couleur": {
"Texte": "var (- wp - présentation-color - contraste)"
},
": Hover": {
"Typographie": {
"TextDecoration": "Aucun"
}
},
":se concentrer": {
"Typographie": {
"TextDecoration": "soulignement en pointillé"
}
},
":actif": {
"couleur": {
"Texte": "var (- wp - preset-color-secondary)"
},
"Typographie": {
"TextDecoration": "Aucun"
}
},
"Typographie": {
"TextDecoration": "souligner"
}
}
},
// ...
},
"templateparts": {}
}
<code>{
"version": 2,
"settings": {},
// etc.
"styles": {
// etc.
"elements": {
"button": { ... },
"h1": { ... },
"heading": { ... },
},
},
"templateParts": {}
}</code>{ "Version": 2, // ... "Styles": { // Style de niveau mondial "éléments": {}, // Style de niveau de bloc "blocs": { "Core / Search": { "Éléments": { "bouton": { "couleur": { "Background": "var (- wp - présent-couleur - Quaternel)", "Texte": "var (- wp - tracet-color --base)" } } }, // ... } } } }
<code> 所有按钮都在全局级别（`styles.elements.button`）设置样式。 我们也可以在DevTools中确认这一点。请注意，名为`.wp-element-button`的类是选择器。相同的类也用于设置交互式状态。 同样，所有这些样式都在全局级别发生，来自`theme.json`。每当我们使用按钮时，它都将具有相同的背景，因为它们共享相同的选择器，并且没有其他样式规则覆盖它。 顺便说一句，WordPress 6.1添加了对使用`theme.json`中的伪类（包括`:hover`、`:focus`和`:active`）或全局样式UI设置某些元素（如按钮和链接）的交互式状态样式的支持。Automattic工程师Dave Smith在一个YouTube视频中演示了此功能。 我们可以在`theme.json`中（最好在子主题中，因为我们使用的是默认WordPress主题）或在站点编辑器中的全局样式设置中覆盖按钮的背景颜色（不需要子主题，因为它不需要代码更改）。 但是，按钮将同时更改。如果我们想在按钮是特定块的一部分时覆盖背景颜色怎么办？这就是块级样式发挥作用的地方。 #### 元素的块级样式 为了了解如何在块级别使用和自定义样式，让我们更改包含在搜索块中的按钮的背景颜色。请记住，有一个按钮块，但我们正在做的是在搜索块的块级别覆盖背景颜色。这样，我们只在那里应用新颜色，而不是将其全局应用于所有按钮。 为此，我们在`theme.json`的`styles.blocks`对象上定义样式。没错，如果我们在`styles.elements`上定义所有按钮的全局样式，我们可以在`styles.block`上定义按钮元素的块特定样式，这遵循类似的结构： </code>
{ "Version": 2, "Styles": { // Style de niveau mondial "éléments": {}, // Style de niveau de bloc "blocs": {} } }
<code> 看到了吗？我在`styles.blocks.core/search.elements.button`上设置了背景和文本属性，并使用了WordPress中预设的两个CSS变量。 结果？搜索按钮现在是红色的（`--wp--preset--color--quaternary`），默认按钮块保留其亮绿色背景。 我们也可以在DevTools中看到更改。 如果我们想设置包含在其他块中的按钮的样式，也是如此。按钮只是一个例子，所以让我们再看一个。 ### 示例：在每个级别设置标题样式 让我们用一个例子来巩固所有这些信息。这次，我们将： - 全局设置所有标题的样式 - 设置所有二级标题元素的样式 - 设置查询循环块中二级标题元素的样式 首先，让我们从`theme.json`的基本结构开始： </code>
{ "Version": 2, "Styles": { // Style de niveau mondial "Éléments": { "En-tête": { "Couleur": "var (- wp - présent-colore --base)" }, }, // Style de niveau de bloc "blocs": {} } }
<code> 这为我们的全局和块级样式建立了轮廓。 #### 全局设置所有标题的样式 让我们将`headings`对象添加到我们的全局样式并应用一些样式： </code>
{ "Version": 2, "Styles": { // Style de niveau mondial "Éléments": { "En-tête": { "Couleur": "var (- wp - présent-colore --base)" }, "H2": { "Couleur": "var (- wp - tracet-coulor - primaire)", "Typographie": { "FontSize": "Clamp (2.625rem, calc (2.625rem ((1vw - 0.48rem) * 8.4135)), 3.25rem)" } } }, // Style de niveau de bloc "blocs": {} } }
<code> 这将所有标题的颜色设置为WordPress中的预设基本颜色。让我们在全局级别更改二级标题元素的颜色和字体大小： </code>
{ "Version": 2, "Styles": { // Style de niveau mondial "Éléments": { "En-tête": { "Couleur": "var (- wp - présent-colore --base)" }, "H2": { "Couleur": "var (- wp - tracet-coulor - primaire)", "Typographie": { "FontSize": "Clamp (2.625rem, calc (2.625rem ((1vw - 0.48rem) * 8.4135)), 3.25rem)" } } }, // Style de niveau de bloc "blocs": { "Core / Query": { "Éléments": { "H2": { "Typographie": { "FontSize": 3.25rem } } } } } } }
<code> 现在，所有二级标题元素都设置为主要预设颜色，并具有流体字体大小。但也许我们希望在将二级标题元素用于查询循环块时使用固定fontSize： </code>
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!
CDMA télécom
qu'est-ce que json
Application officielle de l'échange euro-italien
vc6.0
Que dois-je faire si la vidéo Web ne peut pas être ouverte ?
Comment insérer une vidéo en HTML
Comment résoudre l'erreur d'analyse
Win10 ne prend pas en charge la solution de configuration de disque du micrologiciel Uefi
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
