Créer vos blocs Gutenberg facilement avec Carbon Fields

Présentation de Carbon Fields

Carbon Fields est une solution concurrente du célèbre Advanced Custom Field (ACF) mais qui a la particularité de pouvoir être embarqué dans vos thèmes et extensions maison.

En effet, vous ne pouvez pas utiliser ACF Pro dans vos extensions gratuites a destination par exemple du dépôt WordPress.

Comme ACF, Carbon Fields propose une solution entièrement en PHP pour créer des blocs compatibles avec le nouvel éditeur de WordPress: Gutenberg!

Les blocs Gutenberg ont fait leur apparition dans Carbon Fields 3.0.

Installer Carbon Fields

Attention, la version disponible sur le dépôt WordPress est loin d’être à jour.

Installer Carbon Fields avec Composer

Cette méthode a une approche plus orientée « développeur », c’est celle qui est mise en avant dans la documentation de Carbon Fields.

Bien sur, votre système doit disposer de Composer mais si vous suivez cette section, je suppose que vous connaissez, l’avez déjà installé sinon je vous invite à suivre la seconde méthode, sans Composer ou bien à installer Composer.

Rendez vous dans le répertoire de l’extension ou du thème dans lequel vous voulez ajouter votre bloc Gutenberg.

Pour la suite du tutoriel, je partirais du principe que nous sommes dans une extension mais dans le cas d’un thème, vous initialiserez Carbon Fields dans votre functions.php.

La commande :

composer require htmlburger/carbon-fields

va installer carbon-fields dans le dossier vendor de votre projet. Si celui-ci n’existe pas, alors il sera créé.

Ensuite dans le fichier principal de votre extension, ajoutez le code suivant:

Installer Carbon Fields sans Composer

Sans Composer, vous devrez télécharger Carbon Fields, le décompresser et l’ajouter a votre projet.

Ensuite il conviendra d’adapter la fonction de chargement:

Création d’un Bloc Gutenberg en PHP

Comme je le disais en introduction, Carbon Fields est un produit similaire à ACF à ceci près qu’il ne dispose pas d’une interface graphique pour la création des champs personnalisé.

C’est un paragraphe dédié à la création de bloc Gutenberg et il nous cause de champs personnalisé… il a craqué!

mes gentils lecteurs 🙂

Effectivement, si je vous parle de champs personnalisé ici c’est que, comme ACF, ils vont être la matière première pour créer notre bloc.

Tous les types de champs que vous retrouverez dans la documentation sont utilisable pour ajouter des réglages a notre bloc Gutenberg.

En route pour la création!

Première étape, créer un fichier PHP qui accueillera vos déclarations de fonctions qui créeront le bloc.

Ici c’est selon vos habitudes, en procédural ou en POO, un simple fichier PHP ou bien une classe.

Je vais pour ce tutoriel l’écrire en PHP procédural afin qu’il soit le plus accessible possible. Ceux ayant l’habitude de développer en Orienté Objet, n’auront aucun mal à adapter leur code.Créer un fichier mon-block.php

Une fois créé, nous allons déclarer le bloc:

Expliquons ce que fais ce code:

use Carbon_Fields\Block;

va simplement dire a notre fichier PHP qu’il faut utiliser Carbon_Fields et notament la sections dédié aux Blocks.

Block::make( __( 'My Shiny Gutenberg Block' ) )

va déclarer le bloc auprès de WordPress. Il aura ici le nom de « My Shiny Gutenberg Block ». Notez que le nom du block est déclaré dans une function d’internationalisation (i18n) qui va permettre de traduire votre bloc.

Il serait d’ailleurs judicieux d’y ajouter votre text-domain ce qui donnerait:

Block::make( __( 'My Shiny Gutenberg Block', 'mon-text-domain ) )

Ensuite vient la déclaration des paramètres de votre bloc Gutenberg qui se fait via la méthode add_fields( )

Ici nous ajoutons 3 réglages:

  • un champ de texte simple
  • un champ de sélection d’image
  • un champs de texte riche.

Les champs sont tous créé sur le même modèle:

Field::make( 'type de champs', 'identifiant unique', 'libellé du champs')

Enfin, la méthode set_render_callback() va elle générer l’affichage front ainsi que la prévisualisation de votre bloc Gutenberg.

Dans les faits, écrivez une fonction qui va retourner un html valide et appelez-la dans set_render_callback( )

Dans cette fonction, vous passerez en paramètre $block qui sera un array regroupant les paramètres de votre block. Les clés de ce tableau étant les identifiants unique de votre bloc Gutenberg.

https://youtu.be/_sp4uIwvRKg
Votre Block en action!

Aller plus loin avec Carbon Fields

Je ne peux pas terminer ce tutoriel sans vous présenter un peu mieux Carbon Fields car tant qu’a l’embarquer dans vos projets pour créer facilement des blocs Gutenberg, autant en tirer tout son potentiel.

Vous pourrez donc avec Carbon Fields créer des champs personnalisés pour tout les types de publications présents sur votre site mais également créer des pages d’options pour votre thème ou vos extensions.

Si vous voulez voir ce que ca donne en live, je vous invite a installer et regarder mon extension WP GestSup Connector qui embarque Carbon Fields et avec lequel j’ai créé un block Gutenberg mais également la page d’option de l’extension.

WordPress 5.0 est sorti le 6 décembre 2018 et alors?

Si vous suivez l’actualité liée à WordPress, vous devez être au courant qu’un chantier énorme a été initié il y a plusieurs mois déjà.

Retour en arrière pour ceux qui n’ont pas suivi. Lors du WordCamp Europe 2017 qui s’est tenu  à Paris, Matt Mullenweg avait annoncé que le projet de nouvel éditeur nommé Gutenberg intégrerait le Coeur de WordPress si les 100000 activations étaient atteintes rapidement. Il n’aura fallu que quelques semaines.

Depuis, il y a eu plusieurs versions de WordPress et de Gutenberg en tant qu’extension et il est dorénavant temps de publier WordPress 5.0.

Dit comme ça, cela semble anodin mais le projet Gutenberg est – de la voix de Matt Mullenweg himself – le plus gros chantier entrepris par notre CMS préféré depuis 15 ans et il s’apprête a débouler sur 1/3 du Web, un tiers des sites internet dans le monde… ce n’est pas rien!

Gutenberg divise

WordPress bénéficiait d’une large communauté très soudée et le moins que l’on puisse dire… c’est qu’elle a pris un peu de plomb dans l’aile.

En effet, un tel changement ne peut pas satisfaire toute le monde et chacun voit l’avantage ou l’inconvénient qu’il va en tirer.

Gutenberg divise car bouscule les habitudes et l’humain est feignant, il aime pas être chamboulé… un fork de WordPress a même été créé

Le projet Gutenberg divise la communauté pour des raisons plus ou moins compréhensibles depuis plusieurs semaines toutefois il faut avancer et s’adapter.

WordPress 5.0 et Gutenberg c’est pour maintenant

On en a parlé pendant longtemps, on n’avait pas de date… mais ça c’était avant alors que devons-nous faire? Mettre à jour? tester? Ne rien faire? Partir en courant?

Ce que Thivinfo va faire

Pour mes clients, j’ai installé Classic Editor. Classic Editor est une extension WordPress permettant de désactiver le Nouvel Editeur (nom de Gutenberg dans le Coeur de WP).

Avec Classic Editor, l’expérience utilisateur de mes clients ne va certes pas changer mais leur site sera toujours actif et disposera de WordPress 5.0.

La deuxième étape, pour les clients en maintenance sera de tester sur une instance autre que le serveur de Production le même site sans Classic Editor et voir au cas par cas ce qui fonctionne et ce qui est à corriger, si c’est corrigible etc.

Il y a quelques mois, l’agence Whodunit avait écris un article concernant le passage à WordPress 50 et les différentes possibilités qui s’offre à nous:

Passer de WordPress 5.0 et à Gutenberg – en prenant soin de proposer un accompagnement au changement pour les personnes chargées de l’administration des sites.
Passer de WordPress 5.0 en conservant l’éditeur classique tout en communicant sur la sortie de Gutenberg.
Rester sur la branche 4.9 car le site ne permet pas une mise à jour maîtrisée. Ce cas est à éviter par tous les moyens (on en parlera plus loin), mais dans tous les cas, une communication est faite au client en toute transparence.


Je suis bien sûr à votre disposition si vous avez un site internet sous WordPress et ne savez pas réellement ce que le passage à WP5.0 va impliquer.

En conclusion

Je reste persuadé que le projet Gutenberg (qui va bien plus loin que le simple éditeur) est un formidable projet pour WordPress même s’il a divisé la communauté qui se remettra peut être difficilement de ce passage.

Je reste également persuadé que la communication autour de ce projet  a été mal ou peu pensé. L’erreur la plus grosse selon moi a été… Gutenberg sera intégré dans WP 5.0… 

euh… ok mais pourquoi pas décider de l’intégrer quand il sera prêt plutôt.

Aujourd’hui, en tant que professionnel du web et de WordPress, j’ai un choix a faire et pour le moment… il est fait.. Je vais continuer à proposer à mes clients la solution qui propulse  plus du tiers du web… quitte, selon les projets a faire des adaptations.