Back to contents

How to Manage JetEngine Blocks for Gutenberg: Dynamic Widgets in Listing Template

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

Let us introduce you JetEngine Blocks for Gutenberg functionality. With the help of this editor, you will be able to create and enrich a listing with the content via dynamic widgets in the WP Dashboard. Then, you will be able to display the listing using the Listing Grid widget in Elementor. We are going to view how to work with JetEngine Blocks for Gutenberg.

Creating the listing in JetEngine Blocks for Gutenberg

1 Step — Working in JetEngine dashboard

Open the JetEngine > Listings block in the WP Dashboard and click the Add New button. In the listing settings set the required fields and select the Blocks option in the Listing view line.

listing item

2 Step — Managing JetEngine Blocks for Gutenberg

We proceed to build the listing directly in the blocks editor. Click the plus icon and scroll to the Layout Elements tab in 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.

listing in blocks editor

Select the needed widget and click it. On the right side, we can see the content settings of the widget, where we should choose a corresponding source, customize the layout and add CSS Class if necessary in the Advanced block.

dynamic widget in block
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.
blocks listing

Displaying the listing in the Listing Grid with Elementor

1 Step — Proceed to Elementor Editor

Open the page, where we want to display the created listing, in Elementor.

2 Step – Drop Listing Grid widget

Find the Listing Grid widget in the elements panel and drop it into a particular place on the page. In the widget’s General block select the created listing and adjust needed options according to your requirements right here. 

elementor listing grid

3 Step — Check on frontend

When everything is set, click the Update button and view the listing on the frontend.

listing grid on frontend

Displaying the listing in the Listing Grid with Blocks Editor

There is one more good option, you can display your Listing Grid in Blocks Editor, no matter in what way it was created. For those who prefer the Gutenberg, which is already integrated with WordPress, it is an interesting and easier way to work with the dynamic content. Just open the Editor in WordPress.

There are only a few steps:

  • Open WP Dashboard;
  • Add a new page;
  • Display Listing Grid.

Listing Grid widget can be found in the Gutenberg set that is placed in the Layout Elements. It’s setting are similar to the widget in Elementor but without the Style block. Use the CSS to customize it.

Let’s have a look at the process:

Editors Block in action

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