Introduction of Carbon Fields
Indeed, you can not use ACF Pro in your free plugins for example the WordPress repository.
Like ACF, Carbon Fields offers a solution entirely in PHP to create blocks compatible with the new WordPress editor: Gutenberg!
The Gutenberg blocks appeared in Carbon Fields 3.0.
Install Carbon Fields
Be care, the available version on the WordPress repository is far from being up to date.
Install Carbon Fields with Composer
This method has a more “developer-oriented” approach, it is the one that is highlighted in Carbon Fields documentation.
Of course, your system must have Composer but if you follow this section, I guess you know, have already installed it or I invite you to follow the second method, without Composer or to install Composer.
Go to the directory of the extension or theme in which you want to add your Gutenberg block.
For the continuation of the tutorial, I would assume that we are in an extension but in the case of a theme, you will initialize Carbon Fields in your functions.php.
composer require htmlburger/carbon-fields
will install carbon-fields in vendor project’s folder. If it will be created if it doesn’t exist.
Then in the main file of your extension, add the following code:
Install Carbon Fields without Composer
Without Composer, you should download Carbon Fields, unzip it and add it to your project.
Then it will be necessary to adapt the loading function:
Creating a Gutenberg Block in PHP
As I said in the introduction, Carbon Fields is a product similar to ACF except that it does not have a GUI for creating custom fields.
This is a paragraph dedicated to the creation of Gutenberg block and he causes us to custom fields … he cracked!my kind readers us 🙂
Actually, if I’m talking about custom fields here it’s that, like ACF, they’re going to be the raw material for creating our block.
All the types of fields that you will find in the documentation can be used to add settings to our Gutenberg block.
On the way to creation!
First step, create a PHP file that will host your function declarations that will create the block.
Here it is according to your habits, in procedural or in OOP, a simple file PHP or a class.
I’m going for this tutorial to write it in procedural PHP so that it is as accessible as possible. Those who are used to developing Object Oriented, will have no trouble adapting their code.Create a file mon-block.php
Once created, we will declare the block:
Let’s explain what this code does:
will just say to our PHP file that you have to use Carbon_Fields and in particular the sections dedicated to Blocks.
Block::make( __( 'My Shiny Gutenberg Block' ) )
will declare the block with WordPress. He will have here the name of “My Shiny Gutenberg Block”. Note that the name of the block is declared in an internationalization function (i18n) that will translate your block.
It would be wise to add your text-domain which would give:
Block::make( __( 'My Shiny Gutenberg Block', 'mon-text-domain ) )
Then comes the declaration of the parameters of your Gutenberg block which is done via the method
Here we add 3 settings:
- a simple text field
- an image field
- a richtext field.
The fields are all created on the same model:
Field::make( 'type de champs', 'identifiant unique', 'libellé du champs')
Finally, the method
set_render_callback() will generate the front display as well as the preview of your Gutenberg block.
In fact, write a function that will return a valid html and call it in
In this function, you will pass in parameter
$block as an
array grouping the parameters of your block. The keys to this array are the unique identifiers of your Gutenberg block.
Go further with Carbon Fields
I can not finish this tutorial without presenting you a little better Carbon Fields because as to embark on your projects to easily create blocks Gutenberg, as much to draw all its potential.
So with Carbon Fields you can create custom fields for all types of publications on your site but also create options pages for your theme or plugins.
If you want to see what it gives live, I invite you to install and watch my extension WP GestSup Connector which embeds Carbon Fields and with which I created a block Gutenberg but also the option page of the plugin.
Ne ratez aucun de mes articles, abonnez vous à ma newsletter
(1 mail par mois s'il y a du nouveau contenu)