En tant que développeur·euse, Gutenberg t'offre de nouvelles possibilités passionnantes. Dans ce tutoriel, j'explique tout ce que tu dois savoir au sujet de l'éditeur de bloc. Apprends comment créer tes propres blocs WordPress et comment personnaliser les blocs existants.

Gutenberg est l'éditeur paru avec WordPress 5.0. Avec Gutenberg, le concept de blocs WordPress a été introduit. Cela permet aux propriétaires de sites web de placer des éléments de design grâce au glisser-déposer, le tout sans avoir besoin d'un constructeur de pages externe ou de compétences en programmation. 

Gutenberg sera à l'avenir utilisé comme base pour l'édition complète du site. Il était autrefois toujours nécessaire de coder, même si tu utilisais un constructeur de pages : certaines modifications et personnalisations impliquaient obligatoirement du code.

Avec chaque nouvelle mise à jour majeure de WordPress, il devient évident que les connaissances en PHP et le développement traditionnel de sites WordPress ne suffisent plus. En tant que développeur·euse de WordPress, tu dois maîtriser Gutenberg.

Ce tutoriel comprend : 

• Ce qui est Gutenberg
• comment travailler avec les blocs WordPress,
• comment utiliser ces nouvelles fonctionnalités et technologies pour créer des sites web WordPress performants.

Commençons dès à présent le tutoriel WordPress Gutenberg pour les développeur·euse·s !

Qu'est-ce que Gutenberg?

Gutenberg a d'abord été déployé sous WordPress 5.0 pour faciliter la création d'articles et de sites de manière purement visuelle. Mais ce n'était que la première phase du projet.

Gutenberg s'appuie sur des technologies modernes telles que JavaScript, React et REST API pour créer une expérience d'édition dynamique qui imite l'édition en front-end. Dans cette première phase est paru l'éditeur de blocs. 

Avec les prochaines mises à jour et la phase 2, Gutenberg devrait devenir un éditeur de sites web à part entière. À l'avenir, il sera possible de créer des sites web WordPress entiers à partir de blocs.

Cela signifie que toute personne qui développe des sites web WordPress doit redéfinir son propre flux de travail de développeur·euse. La connaissance du PHP ne suffit plus pour construire un site web WordPress à partir de zéro. Tu dois connaître JavaScript, React et REST API si tu souhaites créer des blocs et des éléments de design personnalisés pour les sites web fondés sur Gutenberg. 

Accès aux blocs WordPress

Se lancer dans ce nouveau voyage avec l'éditeur de blocs Gutenberg est passionnant. Grâce à ce tutoriel, tu apprendras tout ce que tu dois savoir avant de commencer à développer Gutenberg et de créer tes propres blocs WordPress.

Ce que tu dois savoir avant de développer pour Gutenberg 

Le langage le plus important que tu dois connaître pour suivre ce tutoriel WordPress pour Gutenberg pour les développeur·euse·s est Javascript. Plus précisément, tu dois connaître la version ES5 qui est prise en charge par la plupart des navigateurs modernes. 

Des fonctionnalités plus récentes sont incluses dans la version de 2015, ES6, ainsi que dans la dernière version, ESNext. 

Comprendre l'ES6 et l'ESNext peut être précieux. Toutefois, si tu souhaites les utiliser dans le développement des blocs WordPress, tu dois savoir comment configurer les outils qui convertissent ton nouveau code en ES5. 

Tu dois également comprendre JSX, qui est une extension syntaxique de Javascript et qui nécessite également une transformation. Parce que l'ES6, l'ESNext et le JSX sont beaucoup plus faciles à écrire que l'ES5, il vaut alors la peine de mettre en place des outils de transformation. 

Le Webpack, en conjonction avec Babel, est un outil de transformation populaire. Cette combinaison d'outils minifie ton Javascript. 

Enfin, le fait de connaître React JS peut énormément t'aider lorsque tu crées tes propres blocs WordPress ou que tu suis les divers tutoriels WordPress destinés aux développeur·euse·s qui se concentrent sur la personnalisation des blocs. 

Le contenu est stocké différemment dans Gutenberg 

Contrairement à l'éditeur de contenu classique, le contenu est stocké différemment dans Gutenberg. Le contenu n'est plus stocké en HTML, mais sous forme de commentaires HTML dans une certaine structure au format JSON. Il est ainsi plus facile de transférer le contenu vers une autre installation WordPress ou vers un système de gestion de contenu (SGC). 

Le stockage de contenus en HTML traditionnel est bien quand il s'agit d'un contenu simple et textuel. Cependant, lorsque tu as affaire à un contenu généré de façon dynamique, ton code devient malheureusement désordonné. 

Tu n'as pas nécessairement besoin de connaître les détails techniques du fonctionnement des blocs WordPress. Ce qui est important, c'est que lorsque tu crées du contenu dans Gutenberg, le HTML généré est exempt de code analysé en désordre. En effet, tous les détails sont stockés dans les commentaires HTML. 

Ce que tu peux faire avec les blocs WordPress de Gutenberg 

Dans Gutenberg, tu peux faire un certain nombre de choses. Si tu suis un tutoriel de WordPress destiné aux développeur·euse·s, tu dois connaître les options qui s'offrent à toi. 

Examinons quelques options : 

• Développe tes propres blocs WordPress : c'est la tâche la plus complexe que tu puisses faire. Cependant, les blocs WordPress personnalisés valent souvent la peine d'être personnalisés. 
• Prépare ton thème pour Gutenberg : il s'agit notamment de suivre l'instruction recommandée pour le thème disponible sur Wordpress.org afin de rendre ton thème compatible avec Gutenberg. Cela inclut l'ajustement du style du bloc pour obtenir l'apparence souhaitée de ton thème et maintenir la fonctionnalité du bloc. 
• Personnaliser ou étendre les blocs de contenu existants de WordPress : comme mentionné ci-dessus, tu peux personnaliser les blocs WordPress existants dans Gutenberg. Cela inclut soit l'ajout de styles de blocs personnalisés, soit l'ajout de filtres via Javascript, soit la personnalisation des catégories de blocs et des types de blocs qui apparaissent pour des types de contributions spécifiques personnalisables. 

Mise en place d'un environnement de développement pour l'éditeur Gutenberg

Avant de pouvoir construire quoi que ce soit avec Gutenberg, ou de suivre les tutoriels WordPress pour développeur·euse·s, tu dois mettre en place un environnement de développement. Ta première étape est d'obtenir Node.js. WordPress recommande d'utiliser le gestionnaire de versions de Node (nvm) pour installer et gérer Node. 

À l'intérieur du référentiel cloné, tu peux construire Gutenberg en tapant ceci : 

npm ci
npm run build

Ce codage garantit que Gutenberg peut être utilisé comme plugin. Ensuite, ajoute le répertoire Gutenberg que tu as créé au dossier wp-content/plugins dans ton environnement local WordPress. A White Pixel recommande également d'installer Webpack et Babel. 

Passe par toutes les étapes de configuration afin de configurer un environnement de développement. Tu auras besoin d'un site de test local fonctionnant sur WordPress avec le plugin Gutenberg que tu as créé ainsi que d'un accès au terminal pour exécuter un ensemble d'invites de commande. WordPress.org fournit de nombreuses ressources pour les scripts de développement. 

Maintenant que tu as configuré et paramétré ton environnement local, nous pouvons passer à la partie principale de ce tutoriel pour développeur·euse·s WordPress : les blocs WordPress.

Comprendre les blocs WordPress

Les blocs WordPress sont des conteneurs dans lesquels le contenu est placé dans l'éditeur de blocs WordPress. Les blocs WordPress peuvent être déplacés via une interface de type glisser-déposer.

Il est important de comprendre ce que sont les blocs WordPress avant de créer les tiens. Les blocs WordPress sont également très vastes et comprennent plusieurs caractéristiques importantes, notamment en matière de : 

• Contenu: ces blocs couramment utilisés comprennent des paragraphes, des titres, des images, des listes, des citations et des éléments multimédias.
• Formatage : améliore le formatage de ton contenu grâce à des blocs qui ajoutent du code, du HTML personnalisé et des tableaux.
• Mises en page : personnalise l'apparence de tes sites et de tes contributions avec des blocs permettant d'ajouter des sauts de page, des espaceurs, des colonnes, des blocs de tableaux de commande et des lignes de démarcation.
• Widgets: ces blocs te permettent d'insérer facilement des widgets n'importe où et comprennent des options telles que le code court, les catégories, les icônes sociales, le RSS et les commentaires récents. 

Comment créer tes propres blocs WordPress

Avec ce tutoriel de WordPress pour Gutenberg destiné aux développeur·euse·s, tu apprendras ce dont tu as besoin pour créer des blocs de contenu WordPress personnalisés. Tu peux ensuite les utiliser sur ton site web ou sur celui de tes client·e·s. 

Comment enregistrer de nouveaux blocs WordPress

Chaque nouveau bloc commence par l'inscription. Utilise la fonction registerBlockType pour enregistrer une nouvelle définition de type de bloc.  

Le nom de bloc est une chaîne de caractères qui doit être écrite en tant qu'espace de noms / nom de bloc. Remplace l'espace de noms par le nom du bloc que tu veux créer. 

À partir de là, tu dois définir les propriétés de ton nouveau bloc, telles que le titre, la description, la catégorie, l'icône, les mots-clés ou les styles. 

Ajouter des barres d'outils pour des actions personnalisables

Si tu souhaites ajouter des actions personnalisées à ton bloc via une barre d'outils interactive, tu peux personnaliser (ou créer de toutes pièces) les barres d'outils de travail de Gutenberg. Définis des icônes personnalisées, le formatage, le positionnement et les actions assignées en fonction des besoins de tes plugins ou de tes thèmes. 

Selon le manuel de l'éditeur de bloc, l'ajout d'une barre d'outils personnalisée pourrait ressembler à ceci : 

Voici comment traduire les blocs WordPress 

En devenant international, tu peux t'assurer que les blocs WordPress que tu crées atteignent un public plus large. 

Depuis WordPress 5.0, tu peux utiliser le forfait JavaScript wp-i18n pour ajouter des chaînes de caractères traduisibles. Tu peux également créer des fichiers de traduction et les laisser charger lorsqu'un·e utilisateur·rice demande un contenu dans cette langue. 

Ajout des paramètres de l'inspecteur

Tous les blocs ont un ensemble de paramètres d'inspection qui apparaissent sur le côté droit de l'écran lorsqu'ils sont insérés dans ton contenu. Selon le bloc WordPress, les aspects que les utilisateur·rice·s peuvent personnaliser varient. Pour chaque bloc individuel que tu crées, les paramètres de l'inspecteur doivent être définis. 

Du kannst <InspectorControls> hinzufügen, indem du WordPress mitteilst, welche Inspektor Steuerelemente verwendet werden sollen, wie sie aussehen sollen, welche Optionen enthalten sein sollen und in welcher Reihenfolge sie erscheinen sollen. 

Les efforts de JavaScript pour WordPress ressemblent à ceci : 

Avec ces spécifications, tu peux ensuite utiliser JSX pour styliser chaque fonction et personnaliser son ordre. 

Comment produire du contenu dynamique avec PHP

Le contenu dynamique est essentiel pour WordPress. Il existe de nombreuses raisons pour lesquelles tu pourrais avoir besoin d'un bloc dynamique. 

Par exemple, si tu souhaites créer un bloc personnalisé Derniers messages qui affiche les derniers messages du blog en temps réel, tu as besoin d'un bloc dynamique. 

Le bloc s'appuie sur PHP car il doit récupérer de nouvelles informations à chaque fois qu'il est rendu. Pour la plupart des blocs, la clé pour le rendre dynamique est de changer sa fonction de stockage pour qu'elle soit nulle. Ensuite, ajoute un code pour indiquer au nouveau bloc de récupérer le contenu approprié. 

Tu peux également définir un attribut pour indiquer au bloc d'afficher un certain nombre de messages.

Ajout de paramètres individuels aux blocs Gutenberg existants

Tu peux également ajouter des paramètres personnalisables et apporter des modifications aux blocs existants Gutenberg WordPress. Par exemple, tu peux ajouter des contrôles personnalisables au panneau de bloc avancé dans les paramètres de l'inspecteur d'un bloc. Jeffrey Carandang a écrit un excellent tutoriel à ce sujet sur son blog.

Créer des modèles de blocs personnalisés (Custom Block Patterns)

Jetons un œil à un autre aspect de Gutenberg dans ce tutoriel WordPress destiné aux développeur·euse·s. Avec les modèles de blocs WordPress, tu peux créer et partager des modèles de blocs prédéfinis. Il s'agit d'un regroupement de blocs WordPress qui te permet de créer des mises en page complexes en quelques clics.

Tu peux accéder aux modèles de blocs à partir de l'écran d'édition des articles/pages en appuyant sur le signe + . Tu verras alors tous les modèles de blocs disponibles pour ton site web. 

Voici comment tu peux créer tes propres modèles de blocs (Block Patterns) 

Pour commencer, crée un site ou une ébauche d'article. Ajoute des blocs dans la configuration que tu souhaites. Par exemple, si tu diriges un magazine en ligne, tu peux créer une mise en page pour les nouveaux articles avec des titres, des colonnes, des images et des citations bien visibles. 

Ensuite, tu dois concevoir les blocs de manière à ce qu'ils aient l'aspect que tu souhaites. 

L'étape suivante consiste à copier tout ce que tu as fait jusqu'à présent. Clique sur tous tes blocs tout en maintenant la touche ALT enfoncée pour les sélectionner. Clique ensuite sur l'icône avec les trois points superposés (plus d'options) dans la barre d'outils. Clique sur Copier. 

Ensuite, tu dois décoder la sortie HTML que tu viens de copier. Pour ce faire, tu peux utiliser l'outil JSON Escape/Unescape. Copie le code de la chaîne de résultats qui apparaît après avoir cliqué sur Echap. 

Enregistre maintenant ton nouveau modèle de bloc. 

Comment enregistrer et désenregistrer les modèles de blocs

Tu peux enregistrer un modèle de mise en place de bloc personnalisé en utilisant l'API des modèles de blocs pour coller le code que tu as copié ci-dessus dans le fichier functions.php de ton thème WordPress ou en l'ajoutant à un plugin personnalisé.

Tu peux également utiliser le plugin de construction de modèle de bloc pour éliminer les exigences de codage dans la création de modèles de blocs.  

Comment utiliser l'éditeur Gutenberg en tant que développeur·euse de thèmes

Gutenberg permet de développer facilement des blocs WordPress personnalisés qui font de la publication de contenu une expérience riche. Tu peux également utiliser Gutenberg pour éviter d'avoir à créer un plugin de constructeur de page séparé tel qu'Elementor ou Divi.

Gutenberg peut être utilisé pour créer des mises en page réactives de la page d'accueil en activant les blocs pleine largeur. Tu peux également créer un thème à base de blocs à partir de zéro. 

Examinons en détail quelques-unes de tes options. 

Utilisation des blocs de bannière pour ajouter des sections de page

Les blocs de bannière sont une nouveauté dans Gutenberg et constituent un excellent moyen d'ajouter différentes sections à une page. Pour plus d'informations, regarde cette vidéo.

Les blocs de superposition que tu peux ajouter sont les :

• Blocs d'images
• Arrière-plans vidéo
• Blocs d'en-tête
• Blocs de paragraphes
• Blocs de boutons 

Les blocs de bannière rendent ton site web plus polyvalent. Tu peux ainsi créer une page d'accueil personnalisée. Tu pourrais même créer un simple thème WordPress avec une combinaison de blocs de bannière et de modèles de blocs. 

Des capacités d'édition complète du site web encore plus étendues sont également à venir. L'équipe de Make WordPress Design déclare que la manipulation des templates, les modèles de blocs avancés et les styles globaux seront les principaux points d'intérêt. 

Utilisation du plugin Advanced Custom Fields 

L'une des limites des blocs est que tu ne peux pas réaliser une mise en page sur toute la largeur : le contenu sera toujours dans des boîtes. 

Cependant, avec quelques manipulations astucieuses, tu peux utiliser le plugin Advanced Custom Fields pour ajouter des paramètres méta personnalisés et forcer les mises en page pleine largeur. C'est essentiel si tu veux utiliser Gutenberg pour créer tes propres thèmes. 

Utiliser des styles de blocs personnalisés 

Une autre façon d'utiliser Gutenberg en tant que développeur·euse de thèmes est d'utiliser les styles de bloc personnalisés (en anglais Custom Block Styles). Une fois que tu as créé des modèles de blocs ou utilisé des blocs de bannière pour créer des sections de page, tu peux alors ajouter ou supprimer des styles de bloc pour chaque bloc concerné. 

Tu dois connaître le nom du bloc afin de pouvoir ajouter ou supprimer les styles qui lui sont associés. Cette étape supplémentaire permet d'éviter d'insérer la classe CSS personnalisée à chaque fois que le bloc est utilisé. 

Blocs WordPress pour les pages de renvoi et les pages d'accueil

Nous avons déjà mentionné l'efficacité des blocs de bannière pour la création de pages d'accueil pour ton site web ou ton thème. Ils fonctionnent également très bien pour les pages de renvoi. 

Quelques blocs qui méritent aussi d'être cités et qui peuvent aider dans cette tâche sont les : 

• Galeries
• Blocs de colonnes
• Blocs d'images
• Blocs de tableau
• Blocs de texte

La plupart des blocs peuvent être utilisés conjointement avec les blocs de bannière pour créer une page d'accueil à l'allure professionnelle. 

Si tu as besoin de plus de fonctionnalités, tu peux ajouter un plugin de bloc Gutenberg qui ajoute un seul bloc à Gutenberg , ou un plugin de bibliothèque de blocs Gutenberg qui en ajoute plusieurs. 

Ultimate Addons for Gutenberg et Atomic Blocks sont des options de bibliothèque exceptionnelles qui facilitent la construction de sites grâce à des blocs pour les témoignages, les appels à l'action, les options de mise en page, les formulaires de contact, les tableaux de prix et les codes courts. 

Les plugins sont idéaux pour celles et ceux qui veulent apprendre Gutenberg et développer des sites web sans utiliser beaucoup de code. 

Dernières réflexions sur les blocs WordPress

L'éditeur de blocs WordPress Gutenberg fait désormais partie du noyau WordPress et l'équipe de développement qui a créé WordPress a de grands projets pour ce dernier. À terme, tu pourras utiliser Gutenberg pour créer des menus de navigation. À l'avenir, l'éditeur sera compatible avec encore plus de thèmes.

Grâce à ce tutoriel de WordPress destiné aux développeur·euse·s, tu peux désormais utiliser les blocs WordPress pour créer des sites web et personnaliser le contenu en fonction de tes besoins. 

Tu peux maintenant créer des blocs WordPress à partir de zéro et finalement créer des sites WordPress entiers avec l'éditeur de blocs intégré.
Entre-temps, tu dois t'assurer que les sites que tu as développés sonthébergés sur Raidboxes . Raidboxes propose des packs d'hébergement WordPress complets qui conviennent aussi bien aux propriétaires de sites individuels qu'aux agences.