How to Implement Custom Fields in Gutenberg Blocks
Posted on 16th June 2023
The new Gutenberg editor for WordPress is a great way to create custom content blocks for your pages and posts. However, one of the most common requests from users is how to add custom fields to a Gutenberg block.
In this article, we’ll show you how to add custom fields to a Gutenberg block. We’ll also provide a few examples of how custom fields can be used in Gutenberg blocks.
What are Custom Fields?
Custom fields are a way to add extra data to a post or page. For example, you might want to add a custom field to a post that stores the author’s name.
Custom fields can be used in Gutenberg blocks by adding the Custom Fields control to the block. This will allow you to select a custom field from a drop-down list and insert its value into the block.
Creating a Custom Field
To create a custom field, you’ll need to edit the post or page where you want to add the custom field. In the right-hand sidebar, you’ll see a section labeled “Custom Fields”.
Click on the “Add New” button to create a new custom field. You’ll need to give the custom field a name and a value. The name is what you’ll use to identify the custom field in the Gutenberg editor. The value is the actual data that you want to store in the custom field.
In the example below, we’ve created a custom field named “author” with a value of “John Smith”.
Adding a Custom Field to a Gutenberg Block
Once you’ve created a custom field, you can add it to a Gutenberg block by selecting the “Custom Fields” control from the block toolbar.
In the “Custom Fields” control, you’ll see a list of all the custom fields that are available for the post or page. Select the custom field you want to add to the block and its value will be inserted into the block.
Examples of Custom Fields in Gutenberg Blocks
Custom fields can be used in a variety of ways in Gutenberg blocks. Here are a few examples:
1. Adding an Author Name to a Block
If you have a custom field that stores the author’s name, you can add it to a Gutenberg block by selecting the “Custom Fields” control and choosing the “author” custom field.
2. Adding a Featured Image to a Block
If you have a custom field that stores the URL of a featured image, you can add it to a Gutenberg block by selecting the “Image” control and choosing the “featured_image” custom field.
3. Adding a Product Price to a Block
If you have a custom field that stores the price of a product, you can add it to a Gutenberg block by selecting the “Text” control and choosing the “price” custom field.
Conclusion
Custom fields are a great way to add extra data to a Gutenberg block. In this article, we’ve shown you how to create a custom field and add it to a Gutenberg block. We’ve also provided a few examples of how custom fields can be used in Gutenberg blocks.
In this article, we’ll learn how to implement custom fields in Gutenberg blocks. We’ll cover how to:
1. Register a new block type
2. Add custom fields to our new block type
3. Save our custom field data
4. Display our custom field data in our block
Let’s get started!
1. Register a new block type
First, we need to register a new block type. We’ll do this by using the `register_block_type` function.
function my_plugin_register_block_type() {
register_block_type( ‘my-plugin/my-block-type’, array(
‘editor_script’ => ‘my-plugin-editor-script’,
) );
}
add_action( ‘init’, ‘my_plugin_register_block_type’ );
2. Add custom fields to our new block type
Next, we’ll add our custom fields to our new block type. We’ll do this by using the `register_block_type_args` filter.
function my_plugin_register_block_type_args( $args, $name ) {
if ( ‘my-plugin/my-block-type’ === $name ) {
$args[‘supports’][] = ‘custom-fields’;
}
return $args;
}
add_filter( ‘register_block_type_args’, ‘my_plugin_register_block_type_args’, 10, 2 );
3. Save our custom field data
Now that our custom fields are registered, we need to save their data. We’ll do this by using the `save_post` action.
function my_plugin_save_post( $post_id ) {
if ( isset( $_POST[‘my-plugin-custom-field’] ) ) {
update_post_meta( $post_id, ‘_my_plugin_custom_field’, $_POST[‘my-plugin-custom-field’] );
}
}
add_action( ‘save_post’, ‘my_plugin_save_post’ );
4. Display our custom field data in our block
Finally, we need to display our custom field data in our block. We’ll do this by using the `render_callback` argument when we register our block type.
function my_plugin_register_block_type() {
register_block_type( ‘my-plugin/my-block-type’, array(
‘editor_script’ => ‘my-plugin-editor-script’,
‘render_callback’ => ‘my_plugin_render_block’,
) );
}
add_action( ‘init’, ‘my_plugin_register_block_type’ );
And that’s it! Now you know how to implement custom fields in Gutenberg blocks.
In the previous article, we looked at how to create a custom field for a Gutenberg block. In this article, we will look at how to implement that custom field in a Gutenberg block.
First, we need to register the field with the block. We do this by calling the register_block_type() function and passing it an array of arguments. In the array, we need to specify the name of the block, the render callback, and the attributes. The attributes key is where we specify the fields that we want to register with the block. We do this by creating an array of field objects. Each field object needs to have a type and a name. The type can be one of text, number, checkbox, select, radio, or range. The name is the key that will be used to access the field value in the render callback.
Next, we need to create the render callback function. This function needs to take two arguments, the props and the attributes. The props argument contains information about the block, such as the className and the block type. The attributes argument contains the values of the fields that we registered with the block. In the function, we need to return the output that we want to display in the block.
In this example, we will return a simple
Finally, we need to enqueue the block’s JavaScript and CSS files. We do this by calling the wp_enqueue_scripts() function and passing it the block’s name.
That’s all there is to it! Now you know how to create and implement a custom field in a Gutenberg block.
