Comment préparer votre site pour WordPress Gutenberg

Gutenberg arrive bientôt sur WordPress. Votre site est-il prêt? Bien que nous ne sachions toujours pas quelle forme cela prendra, ce nouveau système de contenu sera ajouté à WordPress dans le futur. Jetons un coup d'œil aux impacts potentiels que cela pourrait avoir sur votre site et aux moyens de déterminer et de résoudre les problèmes à 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. Le projet vise essentiellement à remplacer l'éditeur actuel, qui fonctionne principalement comme un traitement de texte, par une interface plus visuelle et structurée. Actuellement, Gutenberg est un plugin, qui offre aux utilisateurs la possibilité de modifier leur contenu de la même manière que Visual Composer ou d'autres éditeurs glisser-déposer le font de manière simplifiée et très intuitive..

Si vous souhaitez en savoir plus sur la spécificité de Gutenberg, consultez mon post précédent "Qu'est-ce que WordPress Gutenberg?"

Les morceaux de votre site

Gutenberg est une entreprise de grande envergure qui touchera probablement un grand nombre de terminaux au sein de votre site Web. Voici les trois domaines sur lesquels nous allons nous concentrer:

  • Votre thème: Gutenberg est livré avec son propre ensemble de styles pour le contenu. Votre thème est-il compatible? De quoi aura l'air Gutenberg actif?

  • Vos plugins: Il est possible que Gutenberg interagisse de manière inattendue avec vos autres plugins. Nous examinerons ce que cela pourrait être et ce qu’il faut faire pour résoudre les problèmes éventuels..

  • Votre contenu: Gutenberg affectera la façon dont votre contenu est affiché. Nous examinerons en quoi cela pourrait changer l'apparence de vos pages et examinerons quelques solutions potentielles si vous rencontrez des problèmes..

Mise en place d'une zone de test

Avant de commencer, c'est une bonne idée de créer une zone de test où vous pouvez expérimenter avec Gutenberg sans casser votre site en direct. Idéalement, vous devez configurer votre propre zone de test ou créer une copie locale de votre site. Pour plus d'informations sur l'exécution de l'une ou l'autre de ces tâches, consultez le tutoriel suivant:

Si aucune de ces solutions n'est 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 d'éléments 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 plugins et trouvez Gutenberg. Une fois installé et activé, continuez à lire.

Mettez votre thème à l'épreuve

Maintenant que Gutenberg est installé, examinons la première section de votre site susceptible d’être affectée: son 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 l'administrateur WordPress, passez à l'étape suivante. Que faire quand il y a trop de problèmes section.

Étant donné que Gutenberg interagit principalement avec le contenu du site, il nous suffit de tester un ensemble restreint de choses, heureusement pour nous..

La première est que Gutenberg est livré avec sa propre feuille de style et son propre ensemble de styles. Vérifiez chacun des différents types de page et modèles utilisés sur votre site pour vous assurer qu'ils apparaissent toujours de manière appropriée. L'accent principal sera mis sur les éléments de la zone de contenu principale de vos pages, en particulier le contenu et les blocs d'image. Si vous rencontrez des problèmes, il est probable que les styles de Gutenberg priment sur ceux de votre site..

Pour corriger cela, vous devrez identifier la source du problème. En règle générale, il s'agira d'un sélecteur CSS axé sur un élément HTML ou d'une priorité des styles Gutenberg par rapport à vos propres classes. Quoi qu’il en soit, essayez d’identifier l’erreur. Ensuite, déterminez pourquoi les styles Gutenberg ont la priorité sur le vôtre et corrigez votre code pour lui donner la priorité..

Essayez de faire des corrections dans votre propre thème (ou mieux encore, dans un thème enfant ou dans 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 probable que ce dernier soit écrasé à la mise à jour du plug-in..

De la même manière, vous souhaiterez donner à votre zone d'administration un contrôle unique sur tous les problèmes de style. Les options de thème et autres sections personnalisées générées par votre thème semblent être les principaux coupables à ce jour. Une fois que vous avez identifié des problèmes de style dans ces zones, vous pouvez généralement les corriger en modifiant ou en créant un thème enfant et en y ajustant le code CSS..

Faites fonctionner vos plugins?

Une fois que votre thème est réglé, les plugins de votre site sont les suivants. En particulier, gardez un œil sur les plugins fournissant des codes courts que vous utilisez dans votre contenu (par exemple, Gravity Forms), les plugins affectant l’apparence de votre contenu (tels que les plugins d’accessibilité affectant la taille du texte) et les plugins insérant directement des éléments dans votre page. (tels que les champs personnalisés avancés).

Regarder les codes courts

Pour auditer cette zone, rassemblez d’abord une liste de tous les codes abrégés que vous pourriez utiliser, 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 vous obtenez le shortcode rendu redouté, c’est-à-dire que votre page affiche le [petit code] au lieu de faire ce qu’elle devrait, il existe une autre solution. Dans ce cas, vous pouvez regarder le bloc contenant le code court et confirmer qu'il ne s'agit pas d'un texte (recherche et suppression des balises indésirables autour du code court). Si le problème persiste, déplacer le shortcode vers un type de bloc plus approprié devrait tout remettre en marche..

Apparence du contenu

Ce problème découle du même problème que nous avons abordé précédemment: les remplacements de style. Identifier les éléments affectés et corriger le CSS.

Création d'élément

Le dernier domaine que nous examinerons en ce qui concerne les problèmes en conflit concerne la création d’éléments. Tout plugin insérant des éléments HTML dans une page sans utiliser de code court est suspect ici. Par exemple, lorsque PHP récupère des champs personnalisés à partir du plugin Advanced Custom Fields.

Le glissement le plus courant avec la création d’éléments tourne autour des déséquilibres entre les blocs. Puisque Gutenberg fournit ses propres styles, il est possible que le rendu de vos éléments dans un bloc involontaire soit incorrect. La solution à 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 discuté, mais il pourrait y avoir quelques complications avec la façon dont votre contenu est rendu. La plupart de ces problèmes proviendront de changements de style mineurs ou de la manière dont les blocs sont organisés. Pour corriger cela, vous devrez jouer avec le système de blocs jusqu'à ce que vous obteniez votre page comme vous le souhaitez..

Que faire quand il y a trop de problèmes

Avez-vous rencontré un problème que vous ne pouviez pas résoudre avec les suggestions de cet article? Ne paniquez pas! Il reste encore un peu de temps avant que Gutenberg ne frappe WordPress Core.

Tout d’abord, notez l’erreur et les étapes qui ont conduit à l’erreur. Plus vous pourrez recueillir d'informations, mieux ce sera. Transmettez toutes ces informations à l'équipe de Gutenberg. Avec un peu de chance, ils pourront déterminer le problème et le résoudre dans une prochaine version..

Si vous travailliez sur un site intermédiaire, vous ne pouvez plus rien faire pour le moment. Continuez à consulter les notes de publication 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, la désactivation de Gutenberg devrait tout ramener à la normale. Si non, alors il est temps de revenir à la sauvegarde que vous avez faite!

Bonne chance pour votre installation!

Gutenberg a pour objectif de modifier radicalement l’environnement WordPress, celui qui cherche à modifier le contenu pour le mieux. Avant de toucher la branche principale, assurez-vous que votre site fonctionnera avec les nouvelles modifications. Si vous rencontrez des problèmes autres que ceux énumérés ici, de meilleures solutions ou des corrections pour tout ce qui précède, laissez un commentaire ci-dessous!