TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Gutenberg WordPress Editor – La première critique

15

WordPress est la plate-forme de blogs et de publication de premier ordre pour beaucoup d’entre nous. Mais le plus gros problème est le savoir-faire technique nécessaire pour faire fonctionner un site WordPress. Sinon, vous devez dépenser beaucoup de temps et d’argent pour modifier les éléments de base. Même la simple tâche de créer et de publier un article ou une page dans WordPress n’est pas si facile d’avoir différentes mises en page et colonnes. Cela conduit à la croissance de centaines d’entreprises et de sites Web proposant des services de création de pages. De bons exemples incluent Visual Composer, SiteOrigin Page Builder, Beaver Page Builder, etc. Ces constructeurs de pages ne sont devenus populaires que parce que WordPress a par défaut un éditeur maladroit.

Éditeur de publication WordPress classique

L’éditeur de publication WordPress classique a l’air terne et est basé sur du texte brut. Vous pouvez modifier des choses très minimes comme passer en mode « Texte » et ajouter du HTML/CSS en ligne. Il n’est pas possible d’ajouter une disposition de colonnes ou d’ajouter des blocs. Par exemple, si vous avez une zone de texte comme une offre de produits ou un téléchargement gratuit d’ebook, vous devez ajouter manuellement le même contenu sur toutes les pages. Sinon, vous devrez peut-être modifier les fichiers PHP ou écrire du code personnalisé, qui ne sont pas des options pour les utilisateurs de niveau débutant.

Gutenberg – La voie du futur

Si vous l’avez remarqué, WordPress affiche une notification en version 4.9.8 pour installer et tester l’éditeur Gutenberg. À ce stade, vous devez installer Gutenberg en tant que plugin pour changer d’éditeur. Mais bientôt à partir de la version 5.0, WordPress aura par défaut l’éditeur Gutenberg. Si vous rencontrez des problèmes de compatibilité ou si vous souhaitez toujours utiliser l’ancien éditeur, vous devez installer le plug-in de l’éditeur classique pour continuer avec l’ancien éditeur.

Étant donné que la mise en page de l’éditeur change avec Gutenberg, tous les plugins et thèmes qui utilisent des métaboxes sur l’éditeur de publication / page doivent être repensés pour fonctionner avec l’éditeur Gutenberg. Des plugins comme Yoast SEO proposent déjà la version compatible et nous pensons que tous les autres développeurs devraient emboîter le pas sans aucune autre option. Vous trouverez ci-dessous le message contextuel de WooCommerce pour l’essai avec l’éditeur Gutenberg.

Gutenberg WordPress Editor – La première critique

Widget WooCommerce Gutenberg

Qu’est-ce que Gutenberg ?

Si vous avez déjà travaillé sur le constructeur de site Bootstrap ou l’ éditeur Weebly, vous serez surpris. Oui, Gutenberg est un constructeur de site par glisser-déposer basé sur le concept de blocs. Vous pouvez simplement cliquer sur le bloc à ajouter sur la page et commencer à créer votre contenu. Ceci est similaire à Bootstrap ou à l’éditeur Weebly

L’utilisation de Gutenberg peut sembler un processus long pour des articles/pages de texte simples. Mais pour ceux qui veulent avoir des mises en page différentes et des blocs réutilisables sur plusieurs pages, Gutenberg est la solution simple.

Blocs de Gutenberg

Vous pouvez ajouter les blocs suivants avec l’éditeur Gutenberg :

Gutenberg WordPress Editor – La première critique

Blocs Gutenberg

  • Blocs communs – paragraphe, image, titre, galerie, liste, citation, audio, image de couverture, sous-titre, vidéo.
  • Blocs de formatage – Code, HTML classique, personnalisé, préformaté, pullquote, tableau, verset.
  • Éléments de mise en page – bouton, colonnes, plus, saut de page, séparateur, espaceur.
  • Widgets – shortcode, archives, catégories, derniers commentaires, derniers messages.
  • Intégrer – intégrer à partir de presque n’importe quel site de réseautage social comme Twitter, YouTube, Facebook, Instagram, etc.
  • La section Blocs les plus utilisés répertorie les blocs fréquemment consultés pour un accès rapide.
  • Blocs réutilisables – Comme expliqué ci-dessus, lorsque vous souhaitez que le même contenu fasse partie de plusieurs pages, enregistrez-le en tant que bloc réutilisable.

Comprendre la mise en page de l’éditeur Gutenberg

Vous trouverez ci-dessous à quoi ressemblera l’éditeur Gutenberg lorsque vous créerez un article.

Gutenberg WordPress Editor – La première critique

Éditeur Gutenberg

  1. Le premier élément est toujours un titre pour votre message. Vous ne pouvez pas supprimer cet élément.
  2. Vous avez la zone de contenu où vous pouvez ajouter des blocs.
  3. Cliquez sur le bouton + à l’intérieur de l’éditeur de publication ou dans le coin supérieur gauche de l’éditeur pour commencer à ajouter des blocs.
  4. Déplacez le curseur à gauche de n’importe quel élément pour voir les flèches haut et bas. Cliquez sur la flèche pour déplacer l’élément entier vers le haut ou vers le bas.
  5. Passez la souris sur le côté droit de l’élément pour voir le bouton à trois points offrant plus d’options. Cliquez dessus pour modifier le bloc au format HTML ou le visualiser visuellement. De là, vous pouvez ajouter le bloc à la liste réutilisable.
  6. Cliquez sur l’élément de bloc pour voir plus d’options en ligne telles que la mise en forme et l’alignement du contenu du texte.
  7. La barre supérieure contient des options de haut niveau telles que – annuler, refaire, prévisualiser, publier, enregistrer le brouillon, afficher ou masquer la barre latérale, les paramètres pour basculer entre l’éditeur visuel et l’éditeur de code et quelques autres options.
  8. La barre latérale comporte deux sections – l’une est pour le niveau de poste en tant que « Document ». Il a des options pour ajouter une image, une catégorie, des balises, un format de publication, un auteur, etc.
  9. L’onglet ‘Bloc’ contient des options spécifiques pour l’élément de bloc sélectionné.

Ajout de blocs dans la publication

Créons un article avec quelques éléments pour voir à quel point l’éditeur Gutenberg est facile ou difficile à utiliser.

  • Ajoutez un titre dans l’espace titre par défaut.
  • Cliquez pour ajouter du code HTML personnalisé et ajouter du contenu.
  • Ajoutez un élément de disposition de colonne, ajoutez du texte et une citation à l’intérieur de deux colonnes.

Gutenberg WordPress Editor – La première critique

Ajouter des blocs et vérifier les statistiques

Actuellement, si vous souhaitez avoir une mise en page avec des colonnes, vous avez besoin d’un shortcode personnalisé à partir du thème ou utilisez un plugin séparé.

Métaboîtes

Comme vous pouvez le voir sur la mise en page, nous avons beaucoup de métabox sur l’éditeur de publication en raison du thème et des plugins que nous avons sur le site de démonstration. Maintenant qu’il y a encore des métaboxes qui restent dans la barre latérale et que certaines sont déplacées sous le contenu de la publication. Assurez-vous donc de tester votre thème et vos plugins avant de commencer à utiliser l’éditeur Gutenberg. Sinon, vous devrez peut-être installer le plugin d’éditeur de publication classique pour avoir une compatibilité descendante et informer votre développeur de mettre à jour le thème / plugin.

Caractéristiques supplémentaires

  • Cliquez sur l’icône d’information dans la barre supérieure pour vérifier les statistiques du contenu de la publication comme le nombre de mots, de phrases, de titres, etc.
  • Vous pouvez obtenir les conseils pour vous familiariser avec l’éditeur. Cliquez sur le bouton à trois points dans le coin supérieur droit de la barre supérieure et sélectionnez l’option « Afficher les astuces ».
  • Cliquez sur l’élément de bloc et accédez à l’onglet « Bloquer » dans la barre latérale droite. Dans la section "Avancé", vous pouvez ajouter des classes CSS personnalisées qui n’affecteront que cet élément dans la zone de texte "Classe CSS supplémentaire". Vous devez définir la classe CSS dans votre feuille de style principale ou dans la section "Apparence > Personnaliser > CSS supplémentaire".

Améliorations

WordPress a publié plusieurs améliorations de l’éditeur Gutenberg initial. Maintenant, vous pouvez ajouter des liens au bouton avec nofollow, le bloc de table est réactif et affiche une barre horizontale sur les appareils mobiles, vous pouvez gérer les blocs réutilisables et désactiver les blocs et les méta-boîtes inutilisés sur l’éditeur de publication. La version 5.8 a également introduit une fonctionnalité d’édition de site complète qui peut changer le paysage complet de la création de sites Web avec WordPress en tant que système de gestion de contenu. Avec toutes ces choses, c’est une bonne idée d’essayer si vous utilisez toujours l’éditeur classique.

Sommaire

Que l’éditeur Gutenberg WordPress améliore ou non votre productivité, il est grand temps de se débarrasser de l’ancien éditeur ennuyeux. Bien que chaque action nécessite maintenant deux clics, c’est la voie à suivre. D’un autre côté, cela mettra fin à l’engouement pour les plugins de création de pages dédiés et ouvrira des options pour ajouter des blocs personnalisés dans le cadre du noyau WordPress.

Avantages

  • Facile à ajouter différents blocs. À peu près sûr, de nombreux plugins apparaîtront pour ajouter des blocs personnalisés à l’avenir.
  • Vous pouvez créer n’importe quel type de mise en page et avoir une mise en page différente sur différentes pages de votre site.
  • Réorganiser les blocs est facile et vous pouvez créer des blocs réutilisables.

Les inconvénients

  • Sur le nom de l’expérience utilisateur, vous devez maintenant cliquer deux fois sur ce qui se faisait en un seul clic auparavant. Par exemple, avec l’éditeur classique, vous pouvez simplement cliquer sur « Image en vedette » et télécharger une image. Maintenant, avec Gutenberg, vous devez d’abord cliquer sur le menu déroulant "Image en vedette", puis cliquer sur le lien pour télécharger l’image.
  • Nous n’avons pas pu voir les « Options d’écran » pour personnaliser l’éditeur. On dirait que vous devriez prendre tout ce qui est montré.
  • Le nouvel éditeur rendra invalides tous les didacticiels existants et nécessitera d’énormes efforts pour les documents de milliers d’éditeurs et de développeurs.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails