Tutoriel WordPress Gutenberg
Publié: 2019-03-09Après des décennies de popularité croissante en tant que CMS le plus polyvalent et le plus facile à utiliser, WordPress a toujours été en mesure d'impressionner ses utilisateurs avec des mises à jour techniques fréquentes. Dans la dernière version 5.0, WordPress a mis au point son nouvel éditeur visuel « Gutenberg ». Alors, démystifions Gutenberg et Blocks. Comment fonctionne le nouveau système ? Est-ce mieux que l'éditeur que nous avions avant ? Nous allons entrer dans Gutenberg et un court tutoriel afin de vous aider à tirer tous les avantages de l'éditeur Gutenberg.
Qu'est-ce que « Gutenberg » ?
Matt Mullenweg a proposé une nouvelle approche pour remplacer l'éditeur WordPress classique au WordCamp Europe 2018. Il s'appelait « Gutenberg », ce qui était censé être un nom de projet alors qu'il était en cours de développement. Sorti avec WordPress 5.0, le projet Gutenberg s'appelait désormais "WordPress Editor" ou "Block Editor" pour être plus précis. L'éditeur classique était devenu un peu obsolète selon les tendances actuelles des constructeurs Web par glisser-déposer. Le résultat a été WordPress Gutenberg et un tout nouvel éditeur WordPress conçu pour être similaire aux outils de création de sites Web et de pages.
Thèmes qui fonctionnent avec Gutenberg
Il existe des milliers de thèmes disponibles, mais beaucoup sont obsolètes. Voici quelques-unes des nouvelles boutiques impressionnantes qui publient des thèmes pour Gutenberg.
Plugins qui fonctionnent avec Gutenberg
Il existe un tas de plugins disponibles sur le marché WordPress, mais tous ne fonctionnent pas avec l'éditeur Gutenberg. En voici quelques-uns.
Que sont les "blocs" ?
Les blocs sont simplement des morceaux de contenu. Il peut s'agir d'un paragraphe de texte, d'un fichier audio, d'une photo ou d'une galerie de photos, ou même d'une vidéo. C'est le fondement de l'expérience d'édition de Gutenberg. Les blocs sont utilisés pour créer des publications et des pages Web. Ce que les utilisateurs obtiennent normalement dans WordPress, ce sont les blocs standard construits dans Gutenberg et il est disponible pour tout site WordPress qui utilise l'éditeur Gutenberg. Gutenberg a été créé de telle manière qu'il permet aux programmeurs d'étendre et d'étendre les blocs disponibles. Les blocs peuvent être ajoutés à l'aide de plugins ou de thèmes. Par conséquent, les utilisateurs ont accès à des blocs supplémentaires plutôt que d'être limités aux blocs standard.
Utiliser Gutenberg comme éditeur WordPress
Lorsque vous êtes sur WordPress 5.0, vous obtenez le "Block Editor" ou "Gutenberg Editor" intégré comme éditeur de texte par défaut pour 5.0. Aujourd'hui, nous allons vous aider à vous familiariser avec le nouvel éditeur de blocs. Plongeons-nous. Tout d'abord, pour créer un nouveau message comme d'habitude, appuyez sur "Ajouter un nouveau" sous Messages. Vous avez maintenant un nouveau bloc avec lequel travailler.
Cela semble très différent n'est-ce pas? Il n'y a pas de barre d'outils présente dans l'éditeur classique. Familiarisons-nous avec les fonctionnalités et ces boutons.
Partie supérieure :
En utilisant cette section supérieure, vous pouvez ajouter de nouveaux blocs et également effectuer des actions comme annuler et rétablir les modifications de bloc. Vous pouvez également afficher les informations sur la structure de votre contenu, telles que le nombre de mots, de titres, de paragraphes et de blocs. Vous pouvez même naviguer dans les blocs à l'aide du bouton "i".
Certaines des fonctions d'édition de publication de base telles que l'enregistrement dans le brouillon, l'aperçu de la publication et la publication d'une publication sont hébergées dans la section supérieure. L'icône de la roue dentée révèle le paramètre visible dans la barre latérale droite. Ici, vous pouvez basculer entre les vues de réglage « Document » et « Bloquer ».
La vue de section de document est très similaire aux éditeurs classiques. Ici également, vous pouvez sélectionner le statut et la visibilité, les catégories, les balises, les images des fonctionnalités et les attributs. La vue en coupe de bloc vous permet de modifier les paramètres de n'importe quel bloc une fois qu'il est ajouté. Cette fonction permet de modifier très facilement les paramètres de n'importe quel bloc et de modifier des fonctionnalités telles que la taille de la police, les lettrines et bien plus encore. Des couleurs d'arrière-plan individuelles pour chaque bloc et même l'activation de classes CSS supplémentaires pour chaque bloc individuellement peuvent être ajoutées à partir d'ici.
Enfin, les trois points présents dans la section supérieure révèlent des paramètres supplémentaires. De là, vous pouvez personnaliser l'apparence de votre éditeur de blocs. Vous pouvez choisir la vue des outils des blocs. Vous pouvez même choisir entre "éditeur visuel" et "éditeur de code". Il existe également des outils pour gérer les blocs réutilisables, créer des raccourcis clavier et copier du contenu.
Ajouter des blocs
Voici l'idée principale du nouvel éditeur, c'est-à-dire l'ajout de blocs. Comme déjà mentionné précédemment, les blocs sont au cœur du nouvel éditeur de blocs. Regardez en haut à gauche de la page de l'éditeur. Cela vous donnera un menu déroulant à partir duquel vous pourrez choisir le type de bloc souhaité conçu à des fins spécifiques. À l'aide de la barre de recherche, vous pouvez trouver les blocs correspondant à vos besoins.
De plus, faites défiler le menu vers le bas et vous verrez d'autres blocs basés sur leurs fonctions de base. Ce sont les blocs communs, le formatage, les widgets et les intégrations, etc. Choisissez simplement le bloc approprié que vous désirez en un seul clic.
Ensuite, vous serez également présenté à une petite barre d'outils une fois que vous aurez commencé à ajouter du contenu dans votre bloc. La fonction de cette barre d'outils dépend du type de bloc que vous choisissez. Ces barres d'outils sont là pour effectuer l'édition du style du contenu tel que les alignements, le style, les liens et plus encore. Le bouton de changement de type de bloc est là pour changer le style de bloc actuel. Par exemple, vous pouvez changer un bloc de paragraphe en titre, bloc préformaté, liste, citation ou verset. Les trois derniers points vous fourniront quelques options supplémentaires telles que masquer le paramètre de bloc, en faire un doublon, le modifier au format HTML, l'ajouter à des blocs réutilisables et bien sûr supprimer le bloc. Vous pouvez également insérer plus de blocs en utilisant les options insérer avant et insérer après. Cela s'avère pratique lorsque vous devez ajouter du contenu ou apporter quelques corrections rapides. Selon l'option que vous choisissez, cela ajoutera simplement un bloc avant votre bloc sélectionné ou après celui-ci. Le système est très intuitif et fera sens instantanément.
Modification des paramètres de bloc
Chaque bloc peut être personnalisé pour répondre à vos besoins. En cliquant simplement sur le bloc que vous souhaitez personnaliser, vous obtiendrez différentes portées dans lesquelles vous pourrez personnaliser votre bloc dans la barre latérale droite. N'oubliez pas que vous pouvez afficher ou masquer cette option à l'aide de la roue dentée dans la section supérieure ou de la barre d'outils du bloc spécifique. Les paramètres de bloc dépendent également du type de bloc que vous choisissez. Par exemple, si vous utilisez un bloc de paragraphe, les paramètres du bloc vous permettront de choisir la taille de la police, le type de police ou la couleur d'arrière-plan. Vous aurez toutes les options pour personnaliser votre bloc que vous supposeriez normalement être là. Gutenberg est très convivial et facile à comprendre pour les nouveaux développeurs.
Conclusion du tutoriel WordPress Gutenberg
Nous espérons que ce court tutoriel WordPress Gutenberg vous a aidé à vous familiariser avec le nouvel éditeur fourni avec WordPress 5.0. Nous sommes fermement convaincus qu'après avoir lu ce guide, vous ne serez plus un débutant avec "Gutenberg". Le nouvel éditeur de blocs est non seulement facile à utiliser, mais aussi puissant car il peut créer des sites si rapidement avec autant d'options. La création de blocs personnalisés et l'utilisation d'outils pour personnaliser l'apparence sont des fonctionnalités puissantes de cet éditeur de blocs. Il y a aussi l'interface facile à utiliser pour ajouter de nouveaux blocs et ajouter du contenu. Si vous trouvez que vous préférez l'ancien éditeur et que vous n'aimez pas le nouvel éditeur, ne vous inquiétez pas. Vous pouvez revenir à l'éditeur classique à tout moment. C'est le meilleur des deux mondes et permettra aux utilisateurs d'utiliser l'éditeur qui les rend les plus productifs.