Comment utiliser le bloc HTML personnalisé dans Gutenberg • WPShout

Conseil de pro: vous pouvez toujours modifier le code HTML d'un bloc Gutenberg

Même si vous choisissez, disons, d'insérer une image à l'aide du bloc d'image dans Gutenberg, vous pouvez toujours cliquer sur le menu à trois points et sélectionner «Modifier en HTML» dans le menu déroulant. Cela conduira à un formulaire qui ressemble au bloc HTML d'origine de Gutenberg.

Testez-le vous-même: ajoutez un paragraphe de texte, sélectionnez le bloc, cliquez sur le menu à trois points, puis cliquez sur «Modifier en HTML». Voila, le toujours populaire

les tags sont affichés automatiquement!

Transcription vidéo HTML WordPress Gutenberg

Notez que cela est généré automatiquement.

Salutations, alors aujourd'hui, je veux rapidement expliquer comment créer un bloc HTML Gutenberg, que vous savez peut-être déjà faire, mais si vous ne le faites pas, je suis heureux de vous aider à apprendre à modifier le HTML dans une page WordPress .

Donc, en général, il vaut la peine de savoir que les sites WordPress sont tous HTML. Si vous êtes nouveau dans ce domaine, c'est un concept de base que nous allons utiliser pour informer tout ce que nous allons faire dans ce post en utilisant WordPress Gutenberg HTML. Donc, ce post a du HTML personnalisé, juste pour que je sache ce que c'est, puis je clique sur le bouton plus, et je peux en fait faire une recherche rapide – ou vous pouvez voir – c'est l'un de mes blocs les plus utilisés. Je peux simplement faire de la personnalisation ou même simplement une recherche de HTML ici me donnera cela.

Maintenant, ce bloc dans WordPress a quelques fonctionnalités uniques. La première est que je peux totalement écrire mon propre truc ici, vous savez peut-être que les divs font partie du HTML et peut-être du tag d'image IMG SRC. Ce sont des choses courantes que j'ai dans mon presse-papiers, une image de ce site Web déjà et je peux la mettre à la fin de la div. C’est du HTML et voilà à quoi ça ressemble. Cela ressemble à une image.

Alors pourquoi ai-je utilisé ce HTML Gutenberg au lieu d'un bloc d'image? Eh bien, principalement, vous pouvez voir que je l'ai enveloppé et qu'un div n'est pas très utile, mais si vous êtes bon en CSS, vous savez peut-être quelque chose comme classe spéciale – l'image est super utile parce que votre CSS peut traiter cela une image sur cette page différemment parce que c'est un enfant de cette classe.

C'est donc là que nous commençons à comprendre pourquoi vous faites du HTML personnalisé dans votre site WordPress. Comme je l'ai dit, si j'ajoute juste une image de base ici, je peux totalement le faire. Je peux en sélectionner un dans la médiathèque. La chose intéressante à réaliser est que sous-jacent à ce bloc, vous pouvez modifier ce bloc au format HTML. Vous remarquerez que ce balisage d'image est différent de mon balisage d'image, et c'est une autre raison pour laquelle vous pourriez finir par utiliser des blocs personnalisés de temps en temps.

Il n'y a pas ce chiffre autour de votre balise d'image – ce genre de chose qui sous-tend chaque HTML chaque bloc. Sous l'éditeur Gutenberg, il y a une paire de HTML. Ceci est un paragraphe à droite, et si vous êtes un peu familier en HTML, vous pourriez déjà reconnaître que vous devriez vous attendre à quelques

balises autour de cela si je vais modifier en HTML. Et en effet, c'est exactement ce que nous avons!

Donc, chaque bloc WordPress dans Gutenberg est un bloc HTML. La raison pour laquelle vous
Parfois, vous voulez ou devez utiliser un bloc HTML personnalisé dans Gutenberg, c'est que vous avez quelque chose où vous avez besoin d'un balisage très particulier pour que quelque chose comme le CSS fonctionne directement sur cette page. Ce genre de situations consiste à utiliser un bloc HTML personnalisé dans l'éditeur Gutenberg dans WordPress et avec beaucoup de chance. À votre santé.