Back to contents

JetEngine: How to Use JetEngine Widgets in Gutenberg

This tutorial presents a detailed guide on building a listing using JetEngine Blocks for Gutenberg.

JetEngine functionality can be used not only in Elementor builder but also in Gutenberg editor. The JetEngine plugin contains a set of blocks that are added to the Gutenberg. With the help of those blocks, you will be able to create listings and listing grids with dynamic content. Let’s take a look at how the JetEngine blocks work.

Creating the Listing template in Gutenberg

Open the JetEngine > Listings block in the WP Dashboard and click the “Add New” button. In the Setup Listing Item pop-up window choose the Listing source and From post type options. Set the Listing Item Name and select the “Blocks” option in the Listing view line.

Gutenberg-listing-item

Click the “Create Listing Item” button and proceed to build the listing directly in the blocks editor. Click the plus-shaped icon, and scroll to the Design section of the dropdown list. Open the tab and there are all JetEngine dynamic widgets, which can be used for showing the content from the custom meta fields.

jetengine blocks

Select the needed widget and click it. On the right side, there are the content settings of the widget, where you should choose a corresponding Source, customize the Layout, and add CSS Class if necessary in the Advanced block. The settings of the widgets are similar to the ones presented in Elementor page builder, so you can use these tutorials to get along with the dynamic content blocks.

dynamic widget in block
ATTENTION!
You can showcase certain information, tags, repeater fields and images using varied JetEngine dynamic widgets. Furthermore, set them by the analogy with the Dynamic Field displayed on the screenshot above.
It is possible to style the widget’s appearance in Customizer > Additional CSS by adding a needed CSS code or in the style files of your theme.

When the listing is ready, click the “Update” button. The listing you have just created can be displayed either in the Gutenberg Editor or in the Elementor page builder. The same goes for the listings created in Elementor – you can use them for the Gutenberg listing grid.

NOTE. Be aware, that all the styling options of the listings, created in Elementor, won’t be applied if you will use it for the Gutenberg listing grid.

Creating the Listing Grid in Gutenberg

Listing Grid widget can be found in the Gutenberg blocks set that is placed in the Design section. Its settings are similar to the widget in Elementor but without the Style block. You can use the CSS to customize it. The more detailed information about Listing Grid settings is in this overview.

Let’s have a look at the process:

Well done! Now you know how to use JetEngine Blocks for Gutenberg. Form listings easily and quickly using blocks editor in the WP Dashboard.