Gutenberg arrive bientôt sur WordPress. Votre site Web est-il prêt ? Bien que nous ne sachions toujours pas exactement quelle forme il prendra, ce nouveau système de contenu sera ajouté à WordPress dans le futur. Jetons un coup d’œil sur les impacts potentiels que cela pourrait avoir sur votre site, et sur les façons de déterminer et de corriger les zones problématiques à l’avance.
Qu’est-ce que Gutenberg ?
Gutenberg est un projet WordPress qui vise à donner aux utilisateurs plus de flexibilité dans la conception de leur contenu. Essentiellement, le projet vise à remplacer l’éditeur actuel, qui fonctionne principalement comme un traitement de texte, avec une interface plus visuelle et structurée. Actuellement, Gutenberg est un plugin, et il donne aux utilisateurs la possibilité de modifier leur contenu de la même manière que Visual Composer ou d’autres éditeurs de glisser-déposer (Drag & Drop), mais de manière simplifiée et très intuitive.
Pour en savoir plus sur Gutenberg, cliquez ici.
Les pièces de votre site
Gutenberg est une entreprise massive et touchera probablement un grand nombre de points de terminaison dans votre site Web. Ce sont les trois domaines que nous allons explorer à la recherche des problèmes potentiels :
- Votre thème: Gutenberg est livré avec son propre ensemble de styles pour le contenu. Votre thème est-il compatible ? A quoi ressemblera Gutenberg une fois actif ?
- Vos plugins: Il est possible que Gutenberg puisse interagir avec vos autres plugins de manière inattendue. Nous verrons ce que cela pourrait être et ce qu’il faut faire pour résoudre les problèmes qui surviennent.
- Votre contenu: Gutenberg affectera la manière dont votre contenu est affiché. Nous examinerons comment cela pourrait changer l’apparence de vos pages, et passer en revue certaines solutions potentielles si vous rencontrez des problèmes.
Configuration d’une zone de test
Avant de commencer, c’est une bonne idée de mettre en place une zone de test où vous pouvez expérimenter Gutenberg sans mettre en danger votre site principal. Idéalement, vous devriez créer votre propre zone de test ou créer une copie locale de votre site. Pour plus d’informations sur la façon d’effectuer l’une de ces tâches, consultez le didacticiel suivant: Comment installer WordPress en local.
Si ce n’est pas possible, vous pouvez effectuer les tests directement sur votre site. Notez que cela peut être risqué, car nous allons activer et désactiver un certain nombre de parties de votre site. Si vous effectuez les tests en direct, assurez-vous de créer une sauvegarde de votre site avant de commencer.
Une fois que vous savez où vous allez tester, allez dans le répertoire des plugins et trouvez Gutenberg. Une fois qu’il est installé et activé, lisez la suite.
Mettez votre thème à l’épreuve
Maintenant que Gutenberg est installé, jetons un coup d’œil à la première section de votre site qui pourrait être affectée: votre thème. S’il y a déjà des problèmes majeurs à ce stade, tels que des erreurs de base de données ou des problèmes avec le tableau de bord WordPress, passez à la section Que faire quand il y a trop de problèmes.
Puisque Gutenberg interagit principalement avec le contenu du site, il suffit de tester un petit nombre de choses – heureusement pour nous.
Le premier est que Gutenberg vient avec sa propre feuille de style et un ensemble de styles. Vérifiez chacun des différents types de pages et modèles utilisés sur votre site pour vous assurer qu’ils apparaissent toujours correctement. L’objectif principal ici est de mettre l’accent sur des éléments dans la zone de contenu principale de vos pages, en particulier les blocs de contenu et d’image. Si vous voyez des problèmes, il est probable que les styles de Gutenberg prennent le pas sur ceux de votre site.
Pour corriger cela, vous devrez identifier d’où vient le problème. Généralement, il s’agira d’un sélecteur CSS axé sur un élément HTML ou d’une priorité des styles Gutenberg sur vos propres classes. Quoi qu’il en soit, essayez d’identifier où l’erreur se produit. Ensuite, déterminez pourquoi les styles de Gutenberg remplacent les vôtres et corrigez votre code pour lui permettre d’avoir la priorité.
Essayez de faire des corrections dans votre propre thème (ou mieux encore, dans un thème enfant ou une zone spécifiée pour CSS dans votre thème), plutôt que de modifier Gutenberg. Si vous modifiez directement l’un des fichiers dans Gutenberg, il est susceptible d’être écrasé lorsque le plugin sera mis à jour.
De la même manière, vous voudrez effectuer sur votre tableau de bord une fois pour toutes les mêmes tests. Les options de thème et d’autres sections personnalisées générées par votre thème semblent être les plus grands coupables jusqu’à présent. Une fois que vous avez identifié des problèmes de style dans ces domaines, vous pouvez généralement les corriger en changeant ou en créant un thème enfant et en ajustant le CSS à cet endroit.
Vos plugins fonctionnent-ils ?
Après avoir testé votre thème, les plugins de votre site sont les suivants. Plus précisément, gardez un œil sur les plugins qui fournissent des shortcodes que vous utilisez dans votre contenu (eg Gravity Forms), les plugins qui affectent l’apparence de votre contenu (eg plugins d’accessibilité qui affectent la taille du texte) et les plugins qui insèrent directement des éléments dans votre page (tels que Advanced Custom Fields).
Explorer les shortcodes
Pour auditer cette zone, commencez par rassembler une liste de tous les shortcodes que vous utilisez, ainsi que les pages sur lesquelles ils existent. Avec votre liste en main, visitez chacune de ces pages pour voir si elles fonctionnent comme prévu. Si vous rencontrez des problèmes de style, il est probable que vous rencontriez le même problème que précédemment et que vous deviez réajuster vos styles.
Cependant, si le shortcode s’affiche et non le contenu attendu (c’est-à-dire que votre page affiche le [shortcode]au lieu de faire ce qu’il faut) il existe une autre solution. Dans ce cas, vous pouvez regarder le bloc où se trouve le shortcode et confirmer qu’il n’est pas considéré comme du texte (recherche et suppression des étiquettes indésirables autour du shortcode). Si le problème persiste, le déplacement du shortcode vers un type de bloc plus approprié devrait tout remettre en marche.
Apparence du contenu
Ce problème provient du même problème que nous avons déjà traité: les substitutions de style. Identifiez les éléments affectés et corrigez le CSS.
Création d’élément
Le dernier domaine que nous examinerons pour les problèmes conflictuels concerne la création d’éléments. Tout plugin qui insère des éléments HTML dans une page sans utiliser de shortcodes est suspect ici, par exemple, lorsque PHP extrait des champs personnalisés du plugin Advanced Custom Fields.
Le glissement le plus commun avec la création d’éléments tourne autour des blocs incompatibles. Puisque Gutenberg fournit ses propres styles, il est possible que si vos éléments sont créés à l’intérieur d’un bloc involontaire, ils risquent de ne pas s’afficher correctement. Le correctif pour cela est de s’assurer que votre code ajoute des éléments au bloc où vous voulez qu’ils soient.
Votre contenu apparaît-il comme nécessaire ?
Ce n’est pas aussi urgent que les autres problèmes dont nous avons parlé, mais il pourrait y avoir quelques complications dans la façon dont votre contenu est affiché. La plupart de ces problèmes proviendront de modifications de style mineures ou de l’organisation des blocs. Pour corriger cela, vous devrez jouer avec le système de blocs jusqu’à ce que vous obteniez votre page comme vous le voulez.
Que faire quand il y a trop de problèmes
Avez-vous rencontré un problème que vous n’avez pas pu résoudre avec les suggestions de ce tutoriel ? Ne paniquez pas ! Il reste encore du temps avant que Gutenberg ne soit intégré au noyau de WordPress.
Tout d’abord, notez ce qu’est l’erreur et quelles étapes ont conduit à l’erreur. Le plus d’informations que vous pouvez recueillir, mieux c’est. Transmettez toutes ces informations à l’équipe de Gutenberg. Avec de la chance, ils seront en mesure de déterminer le problème et de le corriger dans une prochaine version.
Si vous travailliez sur un site de mise en scène, à ce stade, c’est tout ce que vous pouvez faire pour l’instant. Continuez à vérifier les notes de mise à jour pour voir si votre problème est résolu, ou travaillez éventuellement à le résoudre vous-même.
Si vous travailliez sur votre site en direct, désactiver Gutenberg devrait tout remettre à la normale. Si non, alors il est temps de revenir à cette sauvegarde que vous avez faite au début du tutoriel !
Bonne chance sur votre installation !
Gutenberg vise à être un changement massif dans l’environnement WordPress, qui cherche à changer le contenu pour le mieux. Avant qu’il n’atteigne la branche principale, assurez-vous de vérifier que votre site fonctionnera avec les nouveaux changements. Si vous avez des problèmes autres que ceux listés ici, de meilleures solutions, ou des corrections pour quelque chose dans ce tutoriel, s’il vous plaît laissez un commentaire ci-dessous.