Blocs réutilisables dans WordPress: idéal pour les principaux Web Vitals

La mise à jour de Google Core Web Vitals nous oblige à mettre à jour la façon dont nous concevons les pages. WordPress lui-même changé la façon dont les feuilles de style sont incluses. Désormais, la liste des règles envoyées avec la page est beaucoup plus petite et plus ciblée. Mais nous devons également changer la façon dont nous faisons les choses. Pendant longtemps, nous avons apporté des modifications aux feuilles de style globales comme style.css pour une poignée d’éléments que nous ne réutiliserons peut-être plus jamais. Au fil du temps, ces éléments s’accumulent et obstruent nos feuilles de style avec des règles inutiles qui ne sont pas utilisées 99% du temps.

Il est temps d’adopter une nouvelle façon de faire les choses. Et avec l’éditeur Gutenberg dans WordPress, j’ai trouvé la réponse – des blocs réutilisables.

Les blocs réutilisables résolvent le problème CSS global

Ceci est mieux illustré par un exemple. WordPress a le bloc « Table » dans Gutenberg. Vous pouvez choisir le nombre de lignes et de colonnes lors de la création du bloc et ajouter un en-tête et un pied de page. Entre autres choses. C’est super! A part cela, le style standard est assez fade. Et quand il s’agit de certains sujets, cela a l’air carrément moche. Voici un exemple:

Table sans style dans Gutenberg WordPress
Table sans style dans Gutenberg WordPress

Je suppose que cela n’a pas l’air mal. Mais ce n’est certainement pas accrocheur! Si vous souhaitez afficher des informations importantes dans un tableau, il est préférable de le formater un peu. Mais au lieu de mettre les règles de style dans une page style.css globale qui continue de gonfler, voici ce que vous devez faire Utilisez plutôt un bloc HTML personnalisé. Maintenant, le style est en ligne et n’est utilisé que lorsque le tableau se trouve réellement sur la page elle-même. Plus de styles gaspillés.

Voici à quoi ressemble la table lorsqu’elle est un peu élégante:

Table conçue dans Gutenberg WordPress

Le problème, cependant, est que si vous faites cela assez souvent sur différentes pages, les modifications apportées aux conceptions seront apportées globalement en raison de l’encombrement. Et si vous pouvez trouver une meilleure façon d’écrire les styles (ou trouver un bogue), vous devez accéder à chaque bloc et effectuer le changement.

Mais c’est exactement À quoi servent les blocs réutilisables?

Ajouter aux blocs réutilisables

Pour ce faire, cliquez sur le bloc HTML personnalisé après avoir écrit le CSS, puis cliquez sur les trois points du menu pour sélectionner « Ajouter aux blocs réutilisables » comme indiqué ici:

Ajouter aux blocs réutilisables - Idéal pour les principales vitales Web
Ajouter aux blocs réutilisables – Idéal pour les principaux sites Web vitaux

Une boîte de dialogue apparaîtra vous demandant de donner un nom au bloc. Faites-en un mémorable, enregistrez vos modifications et c’est tout!

La prochaine fois que vous créerez un tableau sur votre site, vous n’aurez pas à réécrire le CSS. Recherchez et collez simplement le nouveau bloc que vous avez créé en dernier:

Réutiliser des blocs dans WordPress Gutenberg est facile
Réutiliser des blocs dans WordPress Gutenberg est facile

Dans cet exemple, mon bloc s’appelle « Table Style CSS ». Collez ce bloc et il aura le même CSS que vous avez enregistré précédemment. Et la meilleure partie est que toute la maintenance est au même endroit! Si vous apportez des modifications au bloc réutilisable, le CSS sera mis à jour partout. Donc, si vous en avez assez de la couleur de l’en-tête et que vous voulez la changer, personnalisez simplement le bloc et c’est tout!

Voici une capture d’écran d’une autre table que j’ai conçue en utilisant le style réutilisable:

Une autre table avec le même style
Une autre table avec le même style

Gérez les blocs réutilisables séparément

Vous pouvez gérer tous vos blocs réutilisables dans WordPress en visitant l’url suivante:

[yoursite.com]/wp-admin/edit.php?post_type=wp_block

Il n’y a pas de moyen visuel et intuitif d’y parvenir dans WordPress. J’ai donc pensé qu’il valait mieux l’inclure en tant qu’URL. Si vous le souhaitez, vous pouvez cliquer sur le symbole «+» dans l’éditeur Gutenberg, sélectionner l’onglet Blocs réutilisables et passer à «Gérer les blocs réutilisables». Cela fonctionnera aussi.

À partir de là, vous pouvez personnaliser le code de vos blocs et apporter des modifications à votre site à l’échelle du site sans affecter le moindre de vos éléments vitaux!





Source link

Recent Posts