How to Display Custom Fields Data in Gutenberg (Without Coding)

Updated: November 8, 2021

Custom fields allow you to store additional information about a content type in WordPress. With custom fields, you can create website types like listing website, directory website, e-commerce website, or review website with minimum plugins possible. ACF, Pods, and Meta Box are example of WordPress plugins that you can use to create custom fields without coding. However, they have no default feature to display the custom fields data. To display the custom fields data, you need to edit the template file of the content type (e.g., blog post) where you want to display the custom fields data on. For this matter, PHP knowledge is required. Or, if you have no PHP knowledge, you can create a custom template using theme builder plugins like Elementor and Divi Builder and assign it to the content type you want to display the custom fields data on.

Is there a way to display the custom fields data directly in Gutenberg? Yes, there is. You can do so using JetEngine.

JetEngine is another WordPress plugin that you can use to create custom fields (you can also use it to create custom post type). It was previously built specifically for Elementor, but it now supports Gutenberg as well. In JetEngine, you can display custom fields data in Gutenberg using a block. No need to deal with code.

Here is how to display custom fields data in Gutenberg using JetEngine.

Step 1: Create the Custom Fields

Before getting started, make sure you have installed the JetEngine plugin. The plugin itself is developed by Crocoblock. You can get it on the official website of Crocoblock at $26 per year. Once the plugin is installed and activated, go to JetEngine -> Meta Boxes to create the custom fields. Click the Add New button to create a new custom fields group.

Give you custom fields group a name on the Meta Box Title field. On the Meta Box for field, select a content type you want to assign the custom fields to, followed by selecting the post type on the Enable For Post Types field. If you want to assign the custom fields to blog posts, you can select Posts.

Once done with the basic settings above, go to Meta fields section and click the New Meta Field to add a custom field.

Give your custom field a label on the Label field. On the Name/ID field, you can give your custom field a name. Select the field type as well on the Field type dropdown.

Once done with the first custom field, you can click the New Meta Field button to add a new custom field.

Once done adding the custom fields, you can click the Add Meta Box button to publish the custom fields group.

Step 2: Adding and Displaying Custom Fields Data in Gutenberg

One crucial thing to note before you add and display the custom fields data in Gutenberg. You can only add custom fields data to a post type where you assigned the custom fields group to. For instance, if you assigned the custom fields group to default post type (blog posts), you can only add the custom fields data to blog posts.

Create a new blog post just like usual (Posts -> Add New). Fill in the fields on the custom fields group you have created on step one above.

Next, add a new block and select Dynamic Field.

Go to the settings panel on the right side (click the gear icon next to the Publish button if you don’t see the icon). On the General settings block under the Block tab, set the source to Meta Data. Select the custom field you want to display the data of on the Meta Key dropdown.

You can go to the Layout settings block to add an icon to the custom field. Simply click Select Image on Field Icon/Image to select the icon you want to add. You can also set the HTML tag of the custom field on the Field tag dropdown.

The Bottom Line

JetEngine is a great plugin to add custom content in WordPress. Not only you can use it to create custom fields, but you can also use JetEngine to create custom post type, custom form, listing template, and so on. JetEngine was originally developed for Elementor only, but Crocoblock decided to make it available on Gutenberg too in the end. Unlike ACF, Pods, and the similar plugins, JetEngine allows you to directly display the custom fields data via a dedicated Gutenberg block. No PHP knowledge is required to display custom fields data in Gutenberg with JetEngine.

Original posted on: November 8, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

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

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.