L'un des principaux objectifs de l'éditeur de site WordPress (maintenant officiellement nommé) est de migrer le style de bloc de base de CSS à JSON structuré. Les fichiers JSON sont lisibles par la machine, ce qui permet aux éditeurs de site basés sur JavaScript de configurer les styles globaux des thèmes directement dans WordPress.
Mais ce travail n'a pas encore été complètement terminé! Si nous regardons le thème par défaut de vingt-deux vingt-deux (TT2), il y a deux problèmes principaux qui n'ont pas été résolus: interaction de style (tel que: Hover ,: Active ,: focus) et les marges et le rembourrage du conteneur de mise en page. Vous pouvez voir comment ces problèmes sont temporairement résolus dans le fichier style.css de TT2 au lieu de les ajouter au fichier thème.json.
WordPress 6.1 résout ces problèmes, et je veux me spécialiser dans ce dernier. Maintenant, nous avons des styles JSON pour les marges de conteneur de mise en page et le rembourrage, ce qui nous offre un moyen plus flexible et puissant de définir l'espacement dans les dispositions de thème .
De quel type d'espacement parlons-nous?Root Level Fill , qui est une déclaration de fantaisie sur le remplissage des éléments. C'est génial car il garantit un espacement cohérent sur les éléments partagés sur toutes les pages et les messages. Mais il y a plus, car maintenant nous avons un moyen d'obtenir le bloc pour contourner ce rembourrage et l'aligner en pleine largeur. C'est grâce à la Alignment Aware Aware , une nouvelle fonctionnalité facultative dans theme.json. Ainsi, même si vous avez un rembourrage au niveau de la racine, vous pouvez toujours permettre, par exemple, une image (ou un autre bloc) pour percer et afficher la pleine largeur.
Cela nous rappelle une autre chose:Disposition contrainte . L'idée ici est que tout bloc imbriqué dans la mise en page obéit à la largeur du contenu de la disposition (il s'agit d'un paramètre global) et ne s'écoule pas de cette largeur. Nous pouvons écraser ce bloc de comportement par bloc en utilisant l'alignement, mais nous en discuterons plus tard.
Commençons par ...Remplissage au niveau de la racine
Il s'agit d'un cadre global. Donc, si nous ouvrons Devtools et vérifions les éléments, nous verrons ces styles CSS:
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>pas mal. Mais la question est de savoir comment permettre à certains blocs de percer cet espacement pour remplir tout l'écran, le bord vers le bord. C'est pourquoi l'espacement existe, non? Cela aide à empêcher que cela se produise!
<code>body {
margin-top: 60px;
margin-right: 30px;
margin-bottom: 60px;
margin-left: 30px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}</code>Cependant, lorsque vous travaillez dans un éditeur de blocs, il y a en effet de nombreux cas où vous voudrez peut-être percer cet espacement dans une instance sexuelle. Supposons que nous mettons un bloc d'image sur la page et que nous voulons qu'il soit affiché en pleine largeur tandis que le reste obéit à un rembourrage au niveau de la racine?
Entrez ...
Le concepteur de lead Kjell Reigstad illustre les aspects difficiles de la rupture du remplissage au niveau de la racine dans cette question GitHub lorsque vous essayez de créer le premier thème WordPress par défaut qui définit tous les styles du fichier thème.json.
Les nouvelles fonctionnalités de WordPress 6.1 sont conçues pour résoudre ce problème. Faisons ensuite ces choses.
Une nouvelle propriété useroOtpaddingawareAlignments a été créée pour résoudre ce problème. Il a en fait été introduit pour la première fois dans le plugin Gutenberg V13.8. La demande de traction d'origine fournit une bonne introduction à son fonctionnement.
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>Tout d'abord, c'est une fonctionnalité dans laquelle nous devons opter. Cette propriété est définie sur False par défaut, et nous devons explicitement le définir sur true pour l'activer. Notez également que nous avons également défini des orectes d'apparence sur true. Cela nous permet d'utiliser des commandes d'interface utilisateur dans l'éditeur de site pour définir les bordures de style, les couleurs de liaison, la typographie et l'espacement (y compris les marges et les remplissages).
Définir AppartingEtools sur TRUE FAIT ATTROILLEMENT LE BLOCK SELECT MARGINES ET PADDING sans définir Settings.space.Padding ou Setting.spacing.Margin to True.
Lorsque nous activons userOotpaddingAwareAlignments, nous obtiendrons un attribut personnalisé avec la valeur de remplissage racine définie sur l'élément frontal. Fait intéressant, il applique également le rembourrage à la classe de style-type. Trop cool! J'ai pu confirmer ces propriétés personnalisées CSS dans Devtools en creusant.
Activer useroOtpaddingAwareAlignments applique également les remplissages gauche et droit à tout bloc qui prend en charge la largeur "Content" et les valeurs de largeur "largeur" dans l'image de style global ci-dessus. Nous pouvons également définir ces valeurs dans le thème.json:
<code>body {
margin-top: 60px;
margin-right: 30px;
margin-bottom: 60px;
margin-left: 30px;
padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;
}</code>Si les paramètres de style global sont différents de ceux définis dans le thème.json, le style global prévoit. Vous pouvez tout apprendre sur la gestion des styles de thème de bloc dans mon article précédent.
Ainsi, le dernier exemple de code nous donnera le CSS suivant:
<code>{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},</code>[ID] représente un numéro unique généré automatiquement par WordPress.
Mais devinez ce que nous avons d'autre? Entièrement aligné!
<code>{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}</code>l'avez-vous vu? En permettant à UserOotpaddingAwareAlignments et en définissant la contente et en se basant, nous obtenons également une classe CSS entièrement alignée pour trois configurations de conteneurs qui contrôlent les largeurs de blocs ajoutées à la page et à l'article.
Cela s'applique aux blocs de mise en page suivants: colonnes, groupes, contenu de l'article et boucles de requête.
Supposons que nous ajoutions l'un des blocs spécifiques à la mise en page ci-dessus à la page. Lorsque nous sélectionnons un bloc, l'interface utilisateur des paramètres de bloc fournira de nouveaux paramètres de mise en page basés sur la valeur paramètres. Le paramètre de largeur de contenu d'utilisation du bloc interne est activé par défaut. Si nous le fermons, le conteneur n'a pas de largeur maximale et les blocs dedans seront affichés de bord à bord.
Si nous gardons la bascule, le bloc imbriqué obéira aux valeurs de contenu ou largeur large (plus à ce sujet plus tard). Alternativement, nous pouvons utiliser l'entrée numérique pour définir des valeurs de largeur de contenu personnalisées et de largeur large dans cette instance unique. C'est une grande flexibilité!
Les paramètres que nous venons de voir ont été définis sur le bloc parent. Une fois que nous nidons le bloc à l'intérieur et le sélectionnez, nous pouvons utiliser des options supplémentaires dans ce bloc pour la largeur de contenu, la large largeur ou l'écran pleine largeur.
Notez comment WordPress multiplie l'attribut personnalisé CSS au niveau de niveau Root.
Nous venons d'introduire le nouvel espacement et l'alignement apportés par WordPress 6.1. Ceux-ci sont spécifiques aux blocs et à tous les blocs imbriqués dans les blocs. Mais WordPress 6.1 introduit également de nouvelles fonctionnalités de mise en page pour gagner une plus grande flexibilité et cohérence dans les modèles de thème.
Exemple: WordPress refactora complètement ses types de disposition flexibles et de flux et nous fournit un type de mise en page contrainté , ce qui facilite l'alignement des dispositions de blocs dans le thème en utilisant les paramètres de largeur de contenu dans l'interface utilisateur de style global de l'éditeur de site.
flex, flux et disposition contrainte
Justin Tadlock fournit une large introduction aux différents types de disposition et classes sémantiques, y compris les cas d'utilisation et les exemples.
Mettez à jour votre thème pour prendre en charge les dispositions contraintes
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>Désactiver le style de mise en page
<code>{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}</code>Voici un avertissement important: la prise en charge de la désactivation des types de disposition par défaut supprimera également tous les styles de base de ces dispositions. Cela signifie que vous devez styliser votre propre style pour l'espacement, l'alignement et tout ce dont vous avez besoin pour afficher le contenu dans différents modèles et les contextes de blocage.
En tant que grand fan des images pleine largeur, les nouvelles fonctionnalités incluent la disposition WordPress 6.1 et l'alignement de remplissage sont deux de mes fonctionnalités préférées. Travailler avec d'autres outils, y compris un meilleur contrôle de marge et de remplissage, une typographie fluide et des listes mises à jour et des blocs de référence, témoigne d'une meilleure expérience de création de contenu.
Maintenant, nous devons attendre et voir comment les concepteurs moyens et les créateurs de contenu peuvent utiliser ces outils incroyables et les faire passer au niveau supérieur.
Étant donné que l'itération du développement de l'éditeur du site est en cours, nous devons toujours anticiper les difficultés de la route à venir. Cependant, en tant qu'optimiste, j'aimerais voir ce qui se passe dans la prochaine version de WordPress 6.2. Certaines choses que je porte une attention particulière pour inclure des fonctionnalités qui sont prises en compte, la prise en charge du positionnement collant, les nouveaux noms de classe de mise en page pour l'emballage de bloc interne, les options d'alignement de pied de page mises à jour et l'ajout d'options de mise en page contraintes et de disposition au bloc de couverture.
Ce numéro GitHub # 44720 répertorie les discussions liées à la mise en page prévues pour WordPress 6.2.
J'ai consulté et fait référence à de nombreuses sources tout en plongeant dans tout cela. Voici une énorme liste de ce que j'ai trouvé utile et je pense que vous pourriez aussi aimer.
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!
Utilisation de base de l'instruction insert
Comment utiliser le retour en langage C
Comment modifier element.style
Comment lire les données d'un fichier Excel en python
Méthode de récupération de données informatiques Xiaomi
Comment entrer en mode sans échec sur un ordinateur portable
Comment supprimer un index dans MySQL
Python concernant l'utilisation du module
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
