Créer une conception de site Web et aligner parfaitement chaque élément peut être une tâche ardue. Même de nombreux développeurs s’appuient sur des frameworks de grille CSS. Certes, avec l’introduction des systèmes flexbox et grid dans le langage CSS, de tels frameworks deviennent inutiles. Que le rythme vertical et horizontal soit réduit ou qu’une image soit simplement alignée à côté d’un morceau de texte, les mises en page sont souvent mieux créées en utilisant une sorte de système de grille.

Cela devient encore plus apparent lorsque vous créez visuellement une mise en page via l’éditeur de blocs WordPress. L’itération actuelle de l’éditeur fait du bon travail en tant qu’éditeur de contenu général tout en offrant la possibilité d’ajouter divers éléments à la page.

Cependant, ce n’est en aucun cas un constructeur de page – encore.

La question est de savoir si un système de grille doit faire partie de l’équation avant de nous plonger dans l’édition complète des sites Web, des styles globaux, des modèles de blocs et d’autres outils à venir. Si oui, comment ce système devrait-il fonctionner? Sera-t-il configurable par les auteurs de sujets? Comment va-t-il gérer les vues sur tablette et mobile? La grille sera-t-elle visible par les utilisateurs ou y aura-t-il un objet caché en arrière-plan?

Au fur et à mesure que de plus en plus de plugins de bloc sont publiés, en particulier ceux qui peuvent nécessiter l’alignement de plusieurs éléments, il est peut-être temps d’envisager un système de grille. Un tel système peut bénéficier des blocs de base actuellement existants tels que les colonnes, les médias et le texte. Ou c’est mieux qu’un bloc séparé et autonome.

L’ajout d’un système de grille présente également l’avantage de normaliser les noms de classe liés à la mise en page que les auteurs de rubrique peuvent utiliser dans leur CSS en dehors de l’éditeur de contenu. Cela apporterait une meilleure compatibilité à tous les niveaux si les utilisateurs changeaient inévitablement de sujet.

Un point de départ: Layout Grid Block

Capture d'écran du bloc de grille de mise en page dans l'éditeur de blocs avec trois colonnes simples.
Disposition à trois colonnes avec bloc de grille de disposition.

Automattic dans le cadre de celui-ci Bloquer les tentatives Projet, a publié Bloc de grille de mise en page Brancher. Il s’agit essentiellement d’une version améliorée du bloc de base Columns. La principale différence est que l’alignement des colonnes s’accroche à un point spécifique de la grille. Cette grille apparaîtra également en arrière-plan pendant la modification de l’article.

Le problème avec les grilles n’est pas le simple alignement des colonnes dans la vue du bureau. Il s’agit de la façon dont ces colonnes se transforment sur des appareils plus petits comme les tablettes et les smartphones. Parfois, il s’agit d’un jeu de devinettes du point de vue de la conception du thème, car l’auteur du thème n’est pas familier avec le contenu réel qui doit être ciblé. En retour, les concepteurs prennent les meilleures décisions et espèrent que cela fonctionnera pour la plupart.

Le bloc Grille de disposition a un onglet Points d’arrêt réactifs dans la zone Options de bloc qui permet aux utilisateurs de le configurer en fonction du périphérique. Les utilisateurs peuvent décider de la manière dont les colonnes individuelles s’étendent sur la grille. Le système de grille est basé sur un nombre différent de sections de grille en fonction de l’appareil:

  • Bureau: 12 sections
  • Tablette: 8 sections
  • Mobile: 4 sections

Imaginez que vous vouliez afficher une image simple avec du texte sur la suivante. Il existe actuellement plusieurs façons de le faire dans l’éditeur de blocs. Chacun a ses avantages et ses inconvénients en fonction de ce que vous voulez faire. Du point de vue de l’expérience utilisateur et du point de vue visuel, j’aime voir les lignes de la grille en place lorsque je décide comment les afficher.

Capture d'écran d'un élément de menu d'une pizzeria avec la grille de mise en page des blocs.
Alignez une image et du texte dans une grille.

Un autre avantage d’un système de grille est la cohérence dans la conception. Si les utilisateurs peuvent redimensionner la largeur des colonnes en fonction de nombres arbitraires, tout comme ils le peuvent maintenant avec le bloc média et texte, cela ne correspondra pas à la taille horizontale des éléments de la page. Un système de grille change cela.

Le bloc de grille de mise en page doit encore être poli à ce stade. Il y a quelques défauts triviaux dans l’interface utilisateur qui pourraient être améliorés. Dans l’ensemble, mon expérience avec ce bloc a fourni un argument convaincant pour inclure un système de grille dans le noyau.

Le plugin s’adresse actuellement à une, deux, trois et quatre colonnes simples. Le système de grille en CSS est beaucoup plus puissant que de simples colonnes horizontales. Cependant, si nous commençons par les bases, nous aurons un endroit pour construire.

Le noyau doit-il contenir une grille?

Il y a au moins un ticket ouvert dans le référentiel Gutenberg pour adresser un système de grille. Mark Uraine, l’auteur du billet, a posé sept questions clés:

  1. Le système de réseau doit-il répondre?
  2. Devrait-il y avoir un système de grille Gutenberg standard mais permettre aux sujets de s’inscrire eux-mêmes?
  3. Le système de grille devrait-il correspondre à la structure actuelle des blocs de Gutenberg, ou devrait-il s’agir d’une question distincte pour laquelle nous devons restructurer les blocs dans l’éditeur?
  4. La grille doit-elle contenir des gouttières?
  5. La grille doit-elle inclure ou autoriser des accrochages d’alignement vertical?
  6. Sur quoi la grille doit-elle être basée? (c’est-à-dire 12 colonnes, grille de pixels, etc.)
  7. La grille doit-elle permettre de l’allumer et de l’éteindre? Et aussi inclure un paramètre à afficher ou non lorsque les objets sont redimensionnés dans l’éditeur?

Le billet a fait l’objet de discussions solides il y a presque un an, mais pas beaucoup ces derniers temps. Souhaitez-vous voir un système de grille dans l’éditeur? Si oui, comment cela devrait-il fonctionner?



Source link

Recent Posts