L'un des principaux objectifs de l'éditeur de site WordPress (et, oui, c'est maintenant le "nom officiel) consiste à déplacer le style de bloc de base de CSS vers JSON structuré. Les fichiers JSON sont lisibles par machine, ce qui les rend utilisables par l'éditeur de site basé sur JavaScript pour configurer les styles globaux d'un thème directement dans WordPress.
Ce n'est pas encore tout le chemin ! Si nous regardons le thème par défaut de Twenty Twenty-Two (TT2), il y avait deux principaux problèmes non résolus : interactions de style (comme :hover, :active, :focus), Et les marges ainsi que rembourrage des conteneurs de mise en page. Vous pouvez voir comment ceux-ci ont été temporairement corrigés dans le TT2 style.css fichier plutôt que de le mettre dans le theme.json fichier.
WordPress 6.1 résolu ces problèmes et ce que je veux faire, c'est regarder spécifiquement ce dernier. Maintenant que nous avons des styles JSON pour les marges et le rembourrage des conteneurs de mise en page, cela nous ouvre à des moyens plus flexibles et plus robustes pour définir l'espacement dans nos mises en page thématiques.
De quel type d'espacement parle-t-on ?
Tout d'abord, nous avons déjà rembourrage au niveau de la racine qui est une façon élégante de décrire le rembourrage sur le élément. C'est bien car cela garantit un espacement cohérent sur un élément qui est partagé sur toutes les pages et publications.
Mais il y a plus que cela, car nous avons maintenant un moyen pour les blocs de contourner ce rembourrage et de s'aligner sur toute la largeur. C'est grâce à alignements sensibles au rembourrage qui est une nouvelle fonctionnalité opt-in dans theme.json. Ainsi, même si vous avez un rembourrage au niveau de la racine, vous pouvez toujours autoriser, par exemple, une image (ou un autre bloc) à éclater et à s'étendre sur toute la largeur.
Cela nous amène à une autre chose que nous obtenons : mises en page contraintes. L'idée ici est que tous les blocs imbriqués dans la mise en page respectent la largeur du contenu de la mise en page - qui est un paramètre global - et ne circulent pas en dehors de celle-ci. Nous pouvons remplacer ce comportement bloc par bloc avec des alignements, mais nous y reviendrons.
Commençons avec…
Rembourrage au niveau de la racine
Encore une fois, ce n'est pas nouveau. Nous avons eu la possibilité de définir un rembourrage sur le élément dans theme.json depuis l'expérimentation Plugin Gutenberg introduit dans la version 11.7. Nous l'avons mis sur le styles.spacing objet, où nous avons margin ainsi que padding objets pour définir l'espacement en haut, à droite, en bas et à gauche sur le corps :
{
"version": 2,
"styles": {
"spacing": {
"margin": {
"top": "60px",
"right": "30px",
"bottom": "60px",
"left": "30px"
},
"padding": {
"top": "30px",
"right": "30px",
"bottom": "30px",
"left": "30px"
}
}
}
}Il s'agit d'un paramètre global. Donc, si nous devions ouvrir DevTools et inspecter le élément, nous verrions ces styles CSS :
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;
}Cool. Mais c'est là que réside la question de savoir comment, dans le monde, nous pouvons permettre à certains blocs de sortir de cet espacement pour remplir le plein écran, bord à bord. C'est pourquoi l'espacement est là, non? Cela permet d'éviter que cela n'arrive !
Mais il existe en effet de nombreux cas où vous voudrez peut-être sortir de cet espacement sur une instance unique lorsque vous travaillez dans l'éditeur de blocs. Disons que nous plaçons un bloc Image sur une page et que nous voulons qu'il aille sur toute la largeur tandis que le reste du contenu respecte le rembourrage au niveau de la racine ?
Entrer…
Alignements sensibles au rembourrage
Lors de la tentative de création du premier thème WordPress par défaut qui définit tous les styles dans le theme.json fichier, le concepteur principal Kjell Reigstad illustre les aspects difficiles de la rupture du rembourrage au niveau de la racine dans ce Problème GitHub.
De nouvelles fonctionnalités dans WordPress 6.1 ont été créées pour résoudre ce problème. Creusons dans ceux-ci ensuite.
useRootPaddingAwareAlignments
Une nouvelle useRootPaddingAwareAlignments propriété a été créée pour résoudre le problème. Il a en fait été introduit pour la première fois dans le plugin Gutenberg v13.8. La demande d'extraction d'origine est une belle introduction sur la façon dont cela fonctionne.
{
"version": 2,
"settings": {
"appearanceTools": true,
"useRootPaddingAwareAlignments": true,
// etc.
},Dès le départ, notez qu'il s'agit d'une fonctionnalité que nous devons activer. La propriété est définie sur false par défaut et nous devons le définir explicitement sur true afin de l'activer. Notez également que nous avons appearanceTools ajuster à true également. Cela nous opte pour les contrôles de l'interface utilisateur dans l'éditeur de site pour styliser les bordures, les couleurs des liens, la typographie et, oui, l'espacement qui inclut la marge et le rembourrage.
Paramètres appearanceTools ajuster à true opte automatiquement pour les blocs dans la marge et le rembourrage sans avoir à régler non plus settings.spacing.padding or setting.spacing.margin à true.
Lorsque nous activons useRootPaddingAwareAlignments, nous disposons de propriétés personnalisées avec des valeurs de rembourrage racine qui sont définies sur le élément à l'avant. Fait intéressant, il applique également le rembourrage au .editor-styles-wrapper classe afin que l'espacement s'affiche lorsque vous travaillez dans l'éditeur de blocs principal. Plutôt cool!
J'ai pu confirmer ces propriétés personnalisées CSS dans DevTools tout en fouillant.
Activation useRootPaddingAwareAlignments applique également un rembourrage gauche et droit à tout bloc prenant en charge les valeurs de largeur "contenu" et "large" dans l'image Styles globaux ci-dessus. Nous pouvons également définir ces valeurs dans theme.json:
{
"version": 2,
"settings": {
"layout": {
"contentSize": "640px",
"wideSize": "1000px"
}
}
}Si les paramètres des styles globaux sont différents de ceux définis dans theme.json, les Styles globaux sont prioritaires. Vous pouvez tout apprendre sur la gestion des styles de thème de bloc dans mon dernier article.
contentSizeest la largeur par défaut des blocs.wideSizefournit une option de mise en page "large" et établit une colonne plus large pour que les blocs s'étirent.
Ainsi, ce dernier exemple de code nous donnera le CSS suivant :
/* The default content container */
.wp-container-[id] > * {
max-width: 640px;
margin-left: auto !important;
margin-right: auto !important;
}
/* The wider content container */
.wp-container-[id] > .alignwide {
max-width: 1000px;
}[id] indique un numéro unique généré automatiquement par WordPress.
Mais devinez quoi d'autre nous obtenons? Alignement complet aussi!
.wp-container-[id] .alignfull {
max-width: none;
}Regarde ça? En activant useRootPaddingAwareAlignments et définir contentSize ainsi que wideSize, nous obtenons également une classe CSS d'alignement complet pour un total de trois configurations de conteneurs permettant de contrôler la largeur des blocs ajoutés aux pages et aux publications.
Cela s'applique aux blocs spécifiques à la mise en page suivants : colonnes, groupe, contenu de publication et boucle de requête.
Commandes de mise en page des blocs
Disons que nous ajoutons l'un de ces blocs spécifiques à la mise en page mentionnés ci-dessus à une page. Lorsque nous sélectionnons le bloc, l'interface utilisateur des paramètres de bloc nous propose de nouveaux paramètres de mise en page basés sur le settings.layout valeurs que nous avons définies dans theme.json (ou l'interface utilisateur des styles globaux).
Nous avons affaire à des blocs très spécifiques ici - ceux qui peuvent avoir d'autres blocs imbriqués à l'intérieur. Ainsi, ces paramètres de mise en page concernent vraiment le contrôle de la largeur et de l'alignement de ces blocs imbriqués. Le paramètre "Les blocs internes utilisent la largeur du contenu" est activé par défaut. Si nous le désactivons, nous n'avons plus max-width sur le conteneur et les blocs à l'intérieur vont bord à bord.
Si nous laissons la bascule activée, les blocs imbriqués adhèreront soit au contentWidth or wideWidth valeurs (plus à ce sujet dans un instant). Ou nous pouvons utiliser les entrées numériques pour définir la coutume contentWidth ainsi que wideWidth valeurs dans cette instance unique. C'est une grande flexibilité !
Blocs larges
Les paramètres que nous venons de regarder sont définis sur le bloc parent. Une fois que nous avons imbriqué un bloc à l'intérieur et que nous l'avons sélectionné, nous avons des options supplémentaires dans ce bloc pour utiliser le contentWidth, wideWidth, ou aller en pleine largeur.
contentWidth paramètre, étiqueté "Aucun" dans le menu contextuel, mais peut également être défini sur wideWidth (intitulé « Large largeur ») ou « Pleine largeur ».Remarquez comment WordPress multiplie les propriétés personnalisées CSS de rembourrage au niveau de la racine par -1 pour créer des marges négatives lors de la sélection de l'option « Pleine largeur ».
.alignfull La classe définit des marges négatives sur un bloc imbriqué pour s'assurer qu'il occupe toute la largeur de la fenêtre sans entrer en conflit avec les paramètres de remplissage au niveau racine.Utilisation d'une mise en page contrainte
Nous venons de couvrir le nouvel espacement et les alignements que nous obtenons avec 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 encore plus de flexibilité et de cohérence dans les modèles d'un thème.
Exemple : WordPress a complètement restructuré ses types de mise en page Flex et Flow et nous a donné un contraint disposition type qui facilite l'alignement des dispositions de bloc dans les thèmes à l'aide des paramètres de largeur de contenu dans l'interface utilisateur des styles globaux de l'éditeur de site.
Dispositions flexibles, fluides et contraintes
La différence entre ces trois types de mise en page réside dans les styles qu'ils génèrent. Isabel Brison a une excellente rédaction qui décrit bien les différences, mais paraphrasons-les ici pour référence :
- Disposition du flux : Ajoute un espacement vertical entre les blocs imbriqués dans le
margin-blockdirection. Ces blocs imbriqués peuvent également être alignés à gauche, à droite ou au centre. - Mise en page contrainte : Même accord exact qu'une mise en page Flow, mais avec des contraintes de largeur sur les blocs imbriqués basés sur le
contentWidthainsi quewideWidthparamètres (soit danstheme.jsonou Styles globaux). - Disposition flexible : Ceci était inchangé dans WordPress 6.1. Il utilise Boîte flexible CSS pour créer une mise en page qui s'écoule horizontalement (dans une rangée) par défaut, mais peut également s'écouler verticalement afin que les blocs s'empilent les uns sur les autres. L'espacement est appliqué à l'aide du CSS
gappropriété.
Cette nouvelle liste de types de mise en page crée des noms de classe sémantique pour chaque mise en page :
| Classe de mise en page sémantique | Type de disposition | Blocs pris en charge |
|---|---|---|
.is-layout-flow |
Disposition du flux | Colonnes, groupe, contenu de publication et boucle de requête. |
.is-layout-constrained |
Disposition contrainte | Colonnes, groupe, contenu de publication et boucle de requête. |
.is-layout-flex |
Disposition flexible | Colonnes, boutons, icônes sociales |
Justin Tadlock a un article détaillé sur les différents types de mise en page et les classes sémantiques, y compris des cas d'utilisation et des exemples.
Mise à jour de votre thème pour prendre en charge les mises en page contraintes
Si vous utilisez déjà un thème de bloc de votre propre fabrication, vous allez vouloir mettez-le à jour pour prendre en charge les mises en page contraintes. Tout ce qu'il faut, c'est échanger quelques éléments dans theme.json:
{
"version": 2,
"settings": {
"layout": {
"type": "constrained", // replaces `"inherit": true`
"type": "default", // replaces `"inherit": false`
}
}
}Ce sont des thèmes de bloc récemment publiés qui ont activé les paramètres d'espacement avec useRootPaddingAwareAlignments et avoir une mise à jour theme.json fichier qui définit une mise en page contrainte :
Désactivation des styles de mise en page
Les styles de mise en page de base sont des fonctionnalités par défaut fournies dans WordPress 6.1 Core. En d'autres termes, ils sont activés dès la sortie de la boîte. Mais nous pouvons les désactiver si nous en avons besoin avec ce petit extrait dans functions.php:
// Remove layout styles.
add_theme_support( 'disable-layout-styles' );Gros avertissement ici : désactivation de la prise en charge des types de mise en page par défaut également supprime tout le style de base de ces mises en page. Cela signifie que vous devrez rouler vos propres styles pour l'espacement, les alignements et tout ce qui est nécessaire pour afficher le contenu dans différents contextes de modèle et de bloc.
Emballage en place
En tant que grand fan des images pleine largeur, la nouvelle mise en page contenue de WordPress 6.1 et les fonctionnalités d'alignement conscientes du rembourrage sont deux de mes plus préférées à ce jour. Pris avec d'autres outils, y compris un meilleur contrôle des marges et du rembourrage, typographie fluide, et les blocs List et Quote mis à jour, entre autres, sont une preuve solide que WordPress évolue vers une meilleure expérience de création de contenu.
Maintenant, nous devons attendre et regarder comment l'imagination et la créativité des concepteurs et des créateurs de contenu ordinaires utilisent ces outils incroyables et les amènent à un nouveau niveau.
En raison des itérations de développement de l'éditeur de site en cours, il faut toujours anticiper un chemin difficile à parcourir. Cependant, en tant qu'optimiste, j'ai hâte de voir ce qui se passera dans la prochaine version de WordPress 6.2. Certaines des choses sur lesquelles je surveille de près sont des choses comme caractéristiques envisagées pour l'inclusion, le soutien à positionnement collant, nouveaux noms de classe de mise en page pour les emballages de blocs intérieurs, options d'alignement du pied de page mises à jouret ajout d'options de mise en page contrainte et de flux aux blocs de couverture.
Ce Problèmes GitHub #44720 répertorie les discussions liées à la mise en page prévu pour WordPress 6.2.
Ressources additionnelles
J'ai consulté et référencé de nombreuses sources tout en creusant dans tout cela. Voici une longue liste de choses que j'ai trouvées utiles et que je pense que vous pourriez également apprécier.
