{"id":22531,"date":"2021-04-22T08:43:27","date_gmt":"2021-04-22T08:43:27","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=22531"},"modified":"2023-10-18T17:32:00","modified_gmt":"2023-10-18T17:32:00","slug":"jetengine-how-to-create-a-listing-template-in-gutenberg","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/","title":{"rendered":"How to Create a Listing Template in Gutenberg"},"content":{"rendered":"\n<p>If you want to display the Custom Post Type or Custom Taxonomy items you\u2019ve created via the JetEngine functionality in the Listing Grid, you will first have to make the <strong>Listing Template<\/strong> for that CPT. The Listing Template defines the layout and appearance of the item in the grid. You have to set what elements will be shown, their order, and styling options. When you finish that task, you can use the Listing Template in the Listing Grid, and it will be applied to all the items in the grid. So, let\u2019s get started.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"choosing-the-listing-source\">Choosing the Listing Source<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>You can create several objects via the <em>JetEngine <\/em>plugin or default WordPress tools that can be shown in the Listing Grid afterward. These are Posts, Terms, Users, Repeater Fields, REST API Endpoints, and Custom Content Types.<\/p>\n\n\n\n<p>Login to your website\u2019s WordPress dashboard, go to <strong><em>JetEngine &gt; Listings,<\/em><\/strong> and click the \u201c<strong>Add New<\/strong>\u201d button on the top of the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-posts\">Listing template for Posts<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-posts-2x.png\" alt=\"listing for posts\">\n\n\n\n<p>You can create a Listing Template not only for the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-custom-post-type-based-on-jetengine-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Post Type<\/a> made via JetEngine functionalities. Default WordPress posts, pages, or media, and WooCommerce products can also be displayed in a Listing Grid, which means you can create a Listing Template for them too.&nbsp;<\/p>\n\n\n\n<p>After choosing the \u201cPosts\u201d option in the <strong>Listing source<\/strong> drop-down menu, choose the type of post in the <strong>From post type<\/strong> select field.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-query-builder\">Listing Template for Query Builder<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-query-builder-2x.png\" alt=\"listing query builder\">\n\n\n\n<p><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-query-builder-posts-query-type\/\" target=\"_blank\" rel=\"noreferrer noopener\">Build a Query<\/a> to set a request on received posts and choose items to build a list. Items included in the list can be displayed with the help of the <strong>JetEngine Listing Template<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Select the Query you have created as the source.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-terms\">Listing template for Terms<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-terms-2x.png\" alt=\"listing for terms\">\n\n\n\n<p>The JetEngine plugin allows you to create <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/creating-custom-taxonomy-with-jetengine\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Taxonomies<\/a> and afterward add separately built meta boxes to it. However, you can add a meta box to a default WP Category or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-create-meta-boxes-for-product-categories\/\" target=\"_blank\" rel=\"noreferrer noopener\">WooCommerce product category<\/a>. For all those categories, along with the created taxonomies, you can build a Listing Template and afterward use it to display them in a Listing Grid.<\/p>\n\n\n\n<p>Choose the \u201cTerms\u201d option in the Listing source menu and specify it in the <strong>From taxonomy<\/strong> drop-down list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-users\">Listing template for Users<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-users-2x.png\" alt=\"listing for users\">\n\n\n\n<p>By default, WordPress has the functionality to add new users (you can find it in the Users tab of your website\u2019s dashboard). Every user has a set of default meta fields:<\/p>\n\n\n\n<ul>\n<li><strong>ID<\/strong>. The numeric value of the user\u2019s id;<\/li>\n\n\n\n<li><strong>Login<\/strong>. The name you place in the <strong>Username <\/strong>bar;<\/li>\n\n\n\n<li><strong>Nickname<\/strong>. This name you can set after creating the user. If you haven\u2019t put it, it will be the same as the username by default;<\/li>\n\n\n\n<li>Email. The address you put in the Email field;<\/li>\n\n\n\n<li>URL. Represents the URL you placed to the Website bar;<\/li>\n\n\n\n<li>Registration Date. This value is recorded the next moment automatically after you hit the \u201cAdd New User\u201d button, and you can\u2019t change it;<\/li>\n\n\n\n<li>Display Name. After creating the user in its editing window, you can set the name that will be shown publicly on the website in the <strong>Display name publicly as<\/strong> drop-down menu.<\/li>\n<\/ul>\n\n\n\n<p>Besides that default metadata, you can also add a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-group-the-custom-meta-fields-for-the-certain-post-types-into-meta-boxes\/\" target=\"_blank\" rel=\"noreferrer noopener\">custom meta box<\/a> to the user. Both the default and custom meta fields can be added to the Listing Template and shown in the Listing Grid afterward.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-repeater-field\">Listing template for Repeater Field<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-repeater-2x.png\" alt=\"listing for repeaters\">\n\n\n\n<p>Repeater meta field is, actually, a set of subfields that can be repeated as many times as you or users need. That is why you will need a separate Listing Template for it. You can read more about it in this <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-repeater-with-jetengine-repeater-usage-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Repeater meta field overview<\/a>.<\/p>\n\n\n\n<p>Choose the post type to which you have applied the repeater meta field in the <strong>From post type<\/strong> drop-down menu. As a <strong>Repeater source<\/strong>, you can choose the <strong>JetEngine <\/strong>or <strong>ACF <\/strong>plugin. <strong>JetEngine Options Pages<\/strong> go separately because they make a meta box that contains a single meta field, which can be used all over the website. If you need a hint, go through this <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-options-page-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Options Page overview<\/a>. Type the Repeater field\u2019s name into the <strong>Repeater field<\/strong> bar or choose the Options Page from the <strong>Repeater option<\/strong> drop-down list.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-rest-api-endpoint\">Listing template for REST API Endpoint<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-rest-2x.png\" alt=\"listing for rest api ednpoints\">\n\n\n\n<p>With the help of REST API, you can display in the Listing Grid on your page the items of the Custom Content Type located on another website. For more details, check this <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-display-custom-content-type-items-using-rest-api\/\" target=\"_blank\" rel=\"noreferrer noopener\">REST API usage tutorial<\/a>.<\/p>\n\n\n\n<p>Select the necessary endpoint in the <strong>From API endpoint<\/strong> drop-down menu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"listing-template-for-custom-content-type\">Listing template for Custom Content Type<\/h3>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-cct-2x.png\" alt=\"listing for custom content type\">\n\n\n\n<p>It is almost the same here as in the creation of the Listing template for the Posts. Just choose the necessary CCT in the <strong>From content type<\/strong> drop-down. And if you have any questions, go through this <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-create-a-custom-content-type\/\" target=\"_blank\" rel=\"noreferrer noopener\">Custom Content Type guide<\/a>.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"building-the-listing-template\">Building the Listing Template<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>When you choose the Listing source and specify it, you have to name the listing template and set the Listing view to \u201cBlocks (Gutenberg)\u201d. Afterward, click the \u201cCreate Listing Item\u201d button, and you will be redirected to the Gutenberg editing window, where you will be able to create the Listing template.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"what-blocks-can-you-use-for-the-listing-template\"> What blocks can you use for the Listing template? <\/h3>\n\n\n\n<p>Any of them. You can take any block that is available for you and add it to the listing template. However, there is a difference between standard blocks and the dynamic ones that go with the JetEngine plugin.<\/p>\n\n\n\n<p>The common block will add a static element to the Listing template. For example, you added an <strong>Image <\/strong>block with your website\u2019s logo to the template. Afterward, when you use that Listing template in the Listing Grid, all the grid items will have that same logo image.<\/p>\n\n\n\n<p>On the contrary, dynamic blocks (<strong>Dynamic Field<\/strong>, <strong>Dynamic Image<\/strong>, <strong>Dynamic Meta<\/strong>, <strong>Dynamic Repeater<\/strong>, <strong>Dynamic Terms<\/strong>, and<strong> Dynamic Link<\/strong>) add information that depends on the value of the item\u2019s meta field. So, if that value varies for different items, it will also be different in the Listing Grid.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/dynamic-blocks.png\" alt=\"dynamic blocks\">\n\n\n\n<p>To learn how to use dynamic blocks, check out these tutorials:<\/p>\n\n\n\n<ul>\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-field-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Field<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-image-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Image<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-link-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Link<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-meta-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Meta<\/a>;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-repeater-with-jetengine-repeater-usage-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Repeater<\/a>;&nbsp;<\/li>\n\n\n\n<li><a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-dynamic-terms-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Terms<\/a>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"how-to-add-blocks-and-build-the-layout-of-the-listing-template\">How to add blocks and build the layout of the Listing template?<\/h3>\n\n\n\n<p>Everything is simple here \u2013 you just add the blocks to the page, as you do it for any other WordPress page.&nbsp;<\/p>\n\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Pay attention to the structure of the template you are creating. Keep in mind that the template will be further used in the Listing Grid and shown sufficiently smaller than it looks here, on the editing page.<\/p><\/div><\/div>\n\n\n\n<p>Add the blocks by hitting the \u201c<strong>Add Block<\/strong>\u201d button. For this tutorial, let\u2019s add a <strong>Dynamic Field<\/strong> and <strong>Dynamic Image<\/strong>, as well as a simple <strong>Image <\/strong>block.<\/p>\n\n\n\n<p>In the <strong>Dynamic Field<\/strong> settings menu, set the <strong>Source <\/strong>to \u201cMeta Data\u201d and choose the meta field with the item\u2019s title in the <strong>Meta Key<\/strong> field.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/dynamic-field-2x.png\" alt=\"dynamic field\">\n\n\n\n<p>For the <strong>Dynamic Image<\/strong> block, choose the meta field with a picture in the <strong>Source <\/strong>drop-down menu and define the <strong>Image Size<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/dynamic-image-2x.png\" alt=\"dynamic image\">\n\n\n\n<p>Let\u2019s also add a static picture to see the difference between dynamic and static blocks. When you are done, click the \u201c<strong>Publish<\/strong>\u201d button on the top of the screen.<\/p>\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"displaying-the-listing-template-in-a-listing-grid\">Displaying the Listing template in a Listing Grid<\/h3>\n\n\n\n<p>Now, go to the <strong><em>Pages &gt; All Pages<\/em><\/strong> menu tab of your dashboard and find the page where you would like to place the Listing Grid. Find the <strong>Listing Grid<\/strong> block in the menu and add it to the page.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-grid-block-1.png\" alt=\"listing grid block\">\n\n\n\n<p>In the <strong>Listing <\/strong>drop-down menu of the <strong>General <\/strong>settings section, find the template you\u2019ve just created. As you can see, all the items have the same layout and style. The <strong>Dynamic Image<\/strong> block pulled out different pictures for every item, and the <strong>Image <\/strong>block remained the same throughout the whole grid.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-grid-example-2x.png\" alt=\"listing grid example\">\n<\/div><\/div>\n\n\n\n<p>That\u2019s all for the Listing template creation. You now know how to build and display them in the Listing Grid.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to build a Listing template for your Custom Post Type with the help of Gutenberg blocks.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[388],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-18T17:32:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-posts-2x.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\",\"name\":\"How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-04-22T08:43:27+00:00\",\"dateModified\":\"2023-10-18T17:32:00+00:00\",\"description\":\"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Create a Listing Template in Gutenberg\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock","description":"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/","og_locale":"en_US","og_type":"article","og_title":"How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock","og_description":"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/","og_site_name":"Help Center","article_modified_time":"2023-10-18T17:32:00+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2022\/12\/listing-posts-2x.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/","name":"How to Build Listing Templates in Gutenberg \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-04-22T08:43:27+00:00","dateModified":"2023-10-18T17:32:00+00:00","description":"Learn how to create listing templates for posts, terms, and users with the help of Gutenberg Editor blocks and afterward display them on the page.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-create-a-listing-template-in-gutenberg\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Create a Listing Template in Gutenberg"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/22531"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=22531"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=22531"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=22531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}