Comment ajouter des classes CSS à un bloc Gutenberg • WPShout

Un besoin assez courant de modifications WordPress axées sur la conception consiste à ajouter ce que l'on appelle une «classe CSS». Beaucoup de lecteurs savent peut-être déjà ce que c'est, d'autres peuvent être perplexes. Nous y reviendrons ensuite, mais la raison pour laquelle nous entendons aujourd'hui est de vous dire comment ajouter des classes CSS à un bloc Gutenberg (alias, un "nouveau" bloc d'édition WordPress). C'est assez simple, mais vous devez savoir où chercher la fonctionnalité. Réponse courte: «Options avancées» sur le côté droit.

Qu'est-ce qu'une classe CSS? Les classes CSS sont essentiellement un petit balisage HTML qui facilite le style d'un élément à l'aide de feuilles de style en cascade (CSS).

Vidéo d'ajout d'une classe CSS à un Gutenblock

Voici la vidéo sur la façon d'ajouter une classe CSS à un bloc WordPress dans le nouvel éditeur "Gutenberg":

Étapes écrites pour ajouter une classe CSS à un bloc de l'éditeur de blocs WordPress

Certains préfèrent lire. Je vous ai compris. Voici comment ajouter un élément HTML de classe à un bloc Gutenberg WordPress:

1. Sélectionnez le bloc dans l'éditeur de blocs Gutenburg auquel vous souhaitez ajouter une classe CSS.
2. Dans la barre latérale droite, vous devriez maintenant être sur la vue "Bloquer" (vs "Document"). Lorsque vous êtes dans la vue "Bloquer" dans la barre latérale droite de l'éditeur, le * dernier * élément (en bas) aura le titre "Avancé". Si vous cliquez pour agrandir la partie «Avancé» de la barre latérale, elle devrait révéler une étiquette et un champ de «Classe (s) CSS supplémentaires». Dans ce domaine, vous ajouterez vos nouvelles classes CSS comme: class1 my-css-class-2 lastCSSClassToAdd.
3. Assurez-vous de "Enregistrer" ou "Mettre à jour" votre message (ou page, etc.). Puis ta-da. Vous devriez être prêt à partir 🙂