Catégories
Plugin et site web

Comment convertir un site WordPress existant pour utiliser l'éditeur de blocs Gutenberg

Lorsque l'éditeur de blocs Gutenberg a été publié dans le cadre de WordPress 5.0, un certain nombre de concepteurs de sites Web s'inquiétaient de l'effet que cela aurait sur les sites Web existants. Certains ont promis de continuer à utiliser l'éditeur classique dans un avenir prévisible.

Mais l'éditeur de blocs newfangled s'est bien installé. Ses fonctionnalités et sa convivialité semblent s'améliorer avec chaque nouvelle version. Et la communauté du développement a contribué à un certain nombre de blocs personnalisés pratiques.

Pour de nouveaux projets, aller avec Gutenberg semble être une excellente option. Mais qu'en est-il des sites Web existants? À quoi ressemble le processus de conversion? Et, plus important encore, quels sont les risques?

Bien que chaque site Web ait ses propres particularités, il y a certaines choses générales à garder à l'esprit. Aujourd'hui, nous aborderons les bases de la conversion de votre site Web pour utiliser des blocs. Commençons!

CONSTRUIRE DES SITES WORDPRESS PLUS RAPIDE

Annonce des kits de modèles. Des conceptions WordPress réactives conçues pour Elementor.

Tout d'abord, prenez les précautions appropriées

Si vous avez installé le plugin Classic Editor, passer à Gutenberg et au merveilleux monde des blocs est facile. Cependant, il n'est pas recommandé de le faire sans test approprié.

Cela signifie configurer un environnement de transfert ou une installation locale de votre site Web. Cela vous permettra de voir comment les choses fonctionnent sans risque de casser un site en direct.

En plus de la mise en scène, il convient également de regarder votre thème et vos plugins actifs. Vous voudrez faire des recherches pour vous assurer qu'ils sont compatibles avec l'éditeur de blocs. À tout le moins, il s'agit de s'assurer qu'aucun conflit majeur ne surgira du changement.

Heureusement, à peu près tous les thèmes ou plugins régulièrement entretenus par son auteur devraient convenir. Cependant, si vous disposez d'un logiciel hérité qui n'a pas vu de mise à jour depuis un certain temps, vous pourriez avoir un problème entre les mains. Seuls les tests vous le feront savoir avec certitude.

Actionner l'interrupteur

Alors, à quoi ressemble une page ou un article WordPress créé dans l'éditeur classique lorsque vous passez à Gutenberg? C'était une préoccupation compréhensible pour beaucoup d'entre nous. En réalité, ce n'est pas trop minable:

Contenu avant et après le passage à l'éditeur de blocs.

WordPress place le contenu existant dans ce que l'on appelle un bloc «classique», ce qui est exactement comme cela sonne. Ce bloc recrée l'expérience de l'éditeur classique, qui gardera votre contenu intact jusqu'à ce que vous décidiez de le convertir en une série de blocs.

La conversion est un processus simple. Clique le les options bouton pour le bloc classique (il se compose de trois points verticaux) et choisissez "Convertir en blocs". À partir de là, Gutenberg divisera votre contenu en blocs individuels pour les titres, les paragraphes, les images et plus encore.

Boîte de dialogue Gutenberg Conver to Blocks.

La conversion est rapide et fonctionne très bien sur des pages simples. Mais qu'en est-il de quelque chose de plus complexe?

Dans cet exemple, nous avons intégré une vidéo YouTube et ajouté du CSS personnalisé à une partie du contenu. Qu'en fait Gutenberg?

Une vidéo YouTube et un conteneur avec CSS personnalisé dans l'éditeur classique.

La vidéo YouTube était un morceau de gâteau. Gutenberg l'a converti en un bloc d'intégration YouTube, et il peut facilement être modifié et déplacé.

Une vidéo YouTube après avoir été convertie en bloc.

La transition pour notre CSS personnalisé n'était pas aussi fluide, du moins pas visuellement. Dans les cas où il y a du code personnalisé, l'éditeur de blocs le convertira en un bloc HTML. Ce n'est peut-être pas joli à première vue, mais c'est en fait une étape positive. Cela évite toute perte de personnalisation dans la traduction.

Le CSS personnalisé génère un bloc HTML.

Au pire, garder le bloc HTML vous permettra de conserver du code personnalisé. L'alternative consiste à retravailler l'élément en tant que classe CSS ou peut-être même en tant que bloc personnalisé.

Inconvénients potentiels

La décision d'aller avec l'éditeur de blocs est une décision qui doit être considérée avec soin – en particulier sur un site Web existant. Et, selon la façon dont votre site Web a été construit, il y a quelques points de friction potentiels à rechercher:

Vous utilisez déjà un plugin Page Builder?

Il convient de noter que les plugins de création de page et Gutenberg sont des animaux complètement différents. Ainsi, il n'y a aucun moyen intégré de convertir le contenu d'Elementor, Beaver Builder, etc. vers l'éditeur de blocs.

Cela pourrait signifier beaucoup de travail manuel. En outre, vous devrez peut-être accepter le fait que Gutenberg ne peut pas faire tout ce qu'un constructeur de pages peut faire. Certaines des fonctionnalités les plus sophistiquées de votre constructeur de page préféré nécessiteront probablement un bloc personnalisé – ou abandonner complètement l'apparence / la fonctionnalité – lors de la conversion.

Considérations relatives aux champs personnalisés

Les champs personnalisés sont un outil populaire pour personnaliser les modèles de page et les types de contenu. Des plugins comme Advanced Custom Fields ont été largement adoptés car ils facilitent le processus.

Bien que les champs personnalisés générés via ACF fonctionnent toujours avec l'éditeur de blocs, leur positionnement dans l'écran d'édition a changé. Ils sont maintenant en bas de l'écran. Ce serait bien, sauf que ACF a longtemps permis aux développeurs de positionner les champs au-dessus de l'éditeur, ou de supprimer complètement l'éditeur. Ce n’est plus le cas.

Le résultat est une interface utilisateur plus encombrée. Une solution consiste à convertir ces ensembles de champs personnalisés en blocs. Cela vous permet de positionner les champs dans le contenu d'une page et offre une expérience plus transparente. Cela demandera cependant un peu plus de travail.

La courbe d'apprentissage

Beaucoup d'utilisateurs ont fait la transition de l'éditeur classique et ont vécu pour en parler. Mais si vous convertissez un site Web que vos clients mettront à jour eux-mêmes, préparez-vous à fournir une formation et un soutien.

Bien que la convivialité de Gutenberg ait augmenté à pas de géant, c'est toujours une expérience différente. Par conséquent, il faudra un certain temps pour que vos clients s’adaptent. C'est quelque chose qui doit être discuté avant prendre toutes les décisions.

Présentation de votre site Web existant à Gutenberg

La peur de passer aux blocs était et est compréhensible. Il y a toujours un risque lorsque vous apportez une modification majeure à votre site Web.

Cependant, le passage de l'éditeur classique à Gutenberg est une ligne assez simple pour la plupart des sites Web. Et, il est parfaitement correct de convertir uniquement le contenu que vous souhaitez réorganiser. Tout le reste peut rester en toute sécurité dans un bloc classique et fonctionnera comme il l'a toujours fait.

Bien sûr, l'utilisation de constructeurs de pages et d'autres outils complexes peut embrouiller un peu le processus. C'est pourquoi c'est une bonne idée de tester d'abord sur un environnement de transfert. C'est l'une des étapes clés de la transition de votre site Web.

Au-delà de cela, il s'agit de considérer ce que vous avez à gagner en utilisant des blocs. Des choses comme des mises en page personnalisées, des intégrations de contenu plus faciles et plus de flexibilité viennent à l'esprit.

Si ces avantages semblent excitants, il est peut-être temps de commencer à construire avec des blocs.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *