L’éditeur de blocs doit-il avoir un système réseau?

Concevoir une conception de site Web et maîtriser parfaitement chaque élément peut être une tâche intimidante. De nombreux développeurs s’appuient également sur des cadres de réseau CSS. Bien connu, avec l’introduction des systèmes de réseaux flexbox et CSS, de tels frameworks deviennent inutiles. Que le rythme vertical et horizontal soit en baisse ou simplement l’approximation d’une image à proximité d’un peu de texte, les mises en page sont souvent mieux effectuées via une sorte de système réseau.

Cela devient encore plus apparent lorsque vous créez visuellement une mise en page via l’éditeur de blocs WordPress. L’itération éditoriale actuelle fait un excellent travail d’être un éditeur de contenu général tout en offrant la possibilité d’insérer différents éléments dans la page.

Cependant, ce n’est pas du tout un constructeur de pages – encore.

La question est, avant de nous impliquer dans l’édition pleine page, les styles globaux, les modèles de blockchain et d’autres outils futurs, si un système de réseau devrait faire partie de l’équation. Si oui, comment ce système devrait-il fonctionner? Sera-t-il configurable par les auteurs des sujets? Comment gérez-vous les vues des tablettes et des téléphones portables? Le réseau sera-t-il visible pour les utilisateurs ou quelque chose de caché en arrière-plan?

Alors que davantage de chaînes de blocs sont publiées, en particulier avec celles qui peuvent avoir plusieurs éléments qui doivent être alignés, il est peut-être temps d’envisager un système de réseau. Un tel système pourrait désormais bénéficier aux blocs de base existants, tels que les colonnes et les médias et le texte. Ou, cela pourrait être mieux en tant que bloc séparé et indépendant.

L’inclusion d’un système réseau présente également l’avantage supplémentaire de normaliser les noms de classe associés à la présentation que les auteurs de rubriques peuvent utiliser dans leur CSS, même en dehors de l’éditeur de contenu. Cela apporterait une meilleure compatibilité à tous les niveaux lorsque les utilisateurs changent inévitablement de sujets.

Un point de départ: Layout Network Block

Automattic, dans le cadre de son projet Block Experiments, a publié le plugin Layout Grid Block. Il s’agit essentiellement d’une version élevée du bloc Essential Columns. La grande différence est que la disposition des colonnes rebondit sur un point spécifique de la grille. Cette grille apparaît également en arrière-plan lorsque vous modifiez le message.

Compliquer les choses avec les réseaux n’est pas une simple extension de colonnes dans la vue du bureau. Il s’agit de savoir comment ces colonnes se transforment en petits appareils comme les tablettes et les smartphones. Parfois, il s’agit d’un jeu de devinettes du point de vue de la conception d’un sujet, car l’auteur du sujet n’est pas secret avec le contenu réel à rapprocher. Les concepteurs, en revanche, prennent des décisions mieux pensées et espèrent travailler pour la plupart.

Le bloc réseau de mise en page a un onglet « Terminaison responsable » sous le panneau Options de bloc qui permet aux utilisateurs de configurer cet appareil basé. Les utilisateurs peuvent décider comment les colonnes individuelles incluent le réseau. Le système de réseau est basé sur un nombre différent de sections de réseau en fonction de l’appareil:

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

Imaginez vouloir afficher une simple image de texte dans le reste. Il existe différentes manières de le faire actuellement dans l’éditeur de blocs. Tout le monde a des avantages et des inconvénients, selon ce que vous voulez faire. Du point de vue de l’utilisateur et du point de vue visuel, j’aime voir les lignes du réseau en place tout en déterminant comment elles doivent apparaître.

Un autre avantage d’avoir un système de réseau est la cohérence de la conception. Si les utilisateurs peuvent mettre à l’échelle des largeurs de colonne en fonction de nombres arbitraires, tout comme ils peuvent désormais le faire avec le bloc Média et texte, la taille des éléments horizontaux de la page n’est pas cohérente. Un système de réseau change cela.

À ce stade, le bloc réseau de mise en page doit encore être poli. Il y a quelques points de douleur mineurs dans l’interface utilisateur qui peuvent être améliorés. Dans l’ensemble, mon expérience avec ce bloc a fourni un argument convaincant pour l’incorporation d’un système de réseau essentiel.

L’annexe aborde maintenant une, deux, trois et quatre colonnes simples. Le système de réseau CSS est beaucoup plus puissant que les colonnes horizontales de base. Cependant, commencer par les bases nous donnerait un endroit pour construire.

Doit-il inclure un réseau principal?

Il y a au moins un ticket ouvert dans l’entrepôt de Gutenberg pour adresser un système de réseau. Mark Urene, l’auteur du billet, a posé sept questions clés:

1. Le système de réseau doit-il être responsable?
2. Devrait-il y avoir un système de réseau Gutenberg prédéfini mais permettre l’enregistrement des thèmes eux-mêmes?
3. Le système de réseau devrait-il correspondre à la structure actuelle des blocs de Gutenberg, ou devrait-il être sa propre chose de restructurer les blocs en éditeurs?
4. Le réseau devrait-il comprendre des gouttières?
5. Le réseau doit-il inclure ou autoriser des précautions d’alignement vertical?
6. Sur quelle base le réseau devrait-il être basé? (c’est-à-dire 12 colonnes, réseau de pixels, etc.)
7. Le réseau doit-il être désactivé / désactivé? Et également inclure un paramètre pour afficher, ou non, lorsque vous redimensionnez des objets dans l’éditeur?

Les billets ont eu une discussion difficile il y a presque un an, mais pas trop tard. Vous voulez voir un système réseau dans l’éditeur? Si oui, comment aimeriez-vous que cela fonctionne?