Tutoriels

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.

Carbon fields propose 2 méthodes d’installation: la première et la seconde.

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:

PHP

Installer Carbon Fields sans Composer

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

A Lire Aussi:  Géocoder une adresse sans utiliser Google Maps

Ensuite il conviendra d’adapter la fonction de chargement:

PHP

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:

PHP

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.

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.

A Lire Aussi:  Présentation de WP GestSup Connector, l'extension qui lie votre site WordPress au helpdesk GestSup

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.

WP GestSup Connector

WP GestSup Connector

Wp GestSup Connector vous permets de connecter votre Site WordPress au logiciel de ticket GestSup http://gestsup.fr

Sébastien Serre

Ne ratez aucun de mes articles, abonnez vous à ma newsletter

(1 mail par mois s'il y a du nouveau contenu)

A Propos de l'auteur

Avatar - Sebastien Serre

Sebastien Serre

Passionné par le web depuis la fin des années 1990, j'ai développé au fil des ans des compétences en matière de création web. Créant des sites internet sous WordPress depuis 2006 et développant exclusivement sur Wordpress depuis 2014. Je créerai le site ou l'extension WordPress dont vous avez besoin. Développeur d'extensions, Contributeur au Core, Modérateur sur le forum WPFR, responsable de traduction WordPress et orateur lors de WordCamp, ma vie est rythmée par WordPress.

7 commentaires

  1. Hello,

    Et bravo pour cet article. J’ai utilisé les premières versions de carbon field et j’ai été séduit par son approche plus orienté développeur. Par contre je ne savais pas qu’on pouvait faire des blocks Gutenberg avec ce plugin.

    L’éditeur de ce plugin est assez productif en outil alternatif pour wordpress. Ils ont lancé wp emerge, un outil poussé pour développer sous wordpress un peu dans la lignée de roots ou themosis…

    Vous l’avez déjà testé ?

    En tout cas, Merci et bravo pour l’article

  2. Bonjour Sébastien,
    Merci pour ton ton post! Carbon Field a l’air d’être une super alternative à ACF!

    Par contre, je rencontre un problème :
    Lorsque je crée des champs simples, complex, ou même des theme options RAS.
    Par contre si je veux créer un block j’ai une erreur : “Class ‘Carbon_Fields\Block’ not found”
    Une idée d’où ça peut venir?

    Merci

  3. Oui j’utilise bien la V3 et pour être certaine j’ai c/c la code d’exemple de la doc.
    mais rien y fait..

  4. Je suis en “WordPress learning curve”.
    Avec ACF (gratuit) et Block Lab j’ai compris le mécanisme des custom fields et des blocks et puis cette page m’a incité à tester Carbon Fields.
    Une super boite à outils qui peut tout faire. Bien conçu, gratuit, écrit en POO donc gage de qualité, export de la config hyper simple…
    Faut mettre un peu les mains dans le code mais c’est concis et plus gratifiant.
    Dommage qu’il semble assez confidentiel, cela pourrait-il nuire à sa pérennité?
    Une question: Pour la réactivité du site (rapidité des requêtes) faut-il privilégier les blocks ou les fields?
    Dans Drupal on peut entièrement construire ses articles et ses pages à base de custom fields. Chaque field crée une table mais ça ne ralenti pas l’affichage, au contraire grâce a un puissant système de cache. Mais faut le serveur qui va avec!

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Donec leo justo ipsum ipsum non dictum