Tutorials

Easily create your own Gutenberg blocks with Carbon Fields

Introduction of Carbon Fields

Carbon Fields is a competing solution of the famous Advanced Custom Field (ACF) but has the distinction of being able to be embedded in your themes and plugins.

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.

Carbon fields offers 2 installation methods: the first and the second.

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.

Command :

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:

PHP

Install Carbon Fields without Composer

Without Composer, you should download Carbon Fields, unzip it and add it to your project.

A Lire Aussi:  Using Lando to develop under Docker !

Then it will be necessary to adapt the loading function:

PHP

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:

PHP

Let’s explain what this code does:

use Carbon_Fields\Block;

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 add_fields( )

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 set_render_callback( )

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.

Votre Block en action!

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.

A Lire Aussi:  Create a Composer repository to manage your premium extensions

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.

WP GestSup Connector

WP GestSup Connector

WP GestSup Connector allow you to connect your WordPress Website to the helpdesk GestSup

Sébastien Serre

About the Author

Avatar - Sebastien Serre

Sebastien Serre

Passionate about the web since the late 1990s, I have developed over the years skills in web creation. Creating WordPress websites since 2006 and developing exclusively on Wordpress since 2014. I would create the site or WordPress extension you need. Developer of extensions, Core contributor, Moderator on the WPFR forum, WordPress translator and speaker on WordCamp, my life is punctuated by WordPress

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

fringilla libero ut id nec ut elit. Aenean