{"id":22563,"date":"2021-04-22T12:17:37","date_gmt":"2021-04-22T12:17:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=22563"},"modified":"2023-07-28T08:28:04","modified_gmt":"2023-07-28T08:28:04","slug":"jetengine-how-to-add-pagination-to-listing-grid-block","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/","title":{"rendered":"How to Add Pagination to Listing Grid Block"},"content":{"rendered":"\n<p>Pagination is functionality that divides the content of the block into several parts and afterward shows how many \u201cpages\u201d of content there are and on what \u201cpage\u201d the user currently is. If you have lots of items in the Listing Grid and want to give the user an opportunity to see them all, the Pagination block will be a perfect tool.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"add-the-pagination-block-to-the-page\">Add the Pagination block to the Page<\/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>Go to the page with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-grid-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Grid<\/strong><\/a> block and click on the \u201c<strong>Add Block<\/strong>\u201d button. Find the <strong>Pagination <\/strong>block and click on it to add it under the <strong>Listing Grid<\/strong> block.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-block.png\" alt=\"pagination block\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deal-with-the-pagination-general-settings-section\">Deal with the Pagination General Settings Section<\/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>Take a look at the right-side settings menu. In the <strong>This filter for<\/strong> drop-down menu, choose the \u201cListing Grid\u201d option. Make sure there are no other Listing Grids on the page. There is also an option to add pagination to the WooCommerce products.<\/p>\n\n\n\n<p><strong>Apply type<\/strong> drop-down allows you to choose how the changes will be applied:<\/p>\n\n\n\n<ul>\n<li><strong>AJAX <\/strong>\u2013 when the user clicks on the next page, it opens without reloading the page;<\/li>\n\n\n\n<li><strong>Page reload<\/strong> \u2013 the part of the Listing Grid appears after page reload;<\/li>\n\n\n\n<li><strong>Mixed <\/strong>\u2013 it won\u2019t reload the page but transforms the URL, so you can copy the address of the specific page of pagination.<\/li>\n<\/ul>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-general-settings.png\" alt=\"pagination general settings\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"deal-with-the-controls-settings-section\">Deal with the Controls Settings Section<\/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>This settings section defines how the pagination controls will look like.&nbsp;<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-controls-settings.png\" alt=\"pagination controls settings\">\n\n\n\n<ul>\n<li><strong>Prev\/Next Text<\/strong>. The text you will type into those two bars will be visible on the \u201c<strong>Prev Page<\/strong>\u201d and \u201c<strong>Next Page<\/strong>\u201d buttons;<\/li>\n\n\n\n<li><strong>Items center offset<\/strong>. If you have more than 10 pages in the pagination, you would probably like to hide the part of the number range to make it smaller. In this bar, you can type in the number of pages that will be shown on both sides of the current page;<\/li>\n\n\n\n<li><strong>Items edge offset<\/strong>. This feature works with the <strong>Items center offset. <\/strong>It allows you to define how many pages will be visible on each edge of the range;<\/li>\n\n\n\n<li><strong>Provider top offset<\/strong>.  After using pagination, there will be a top offset on N pixels.  <\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"do-the-styling\">Do the Styling<\/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>If you have installed and activated the free <a href=\"https:\/\/wordpress.org\/plugins\/jet-style-manager\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetStyleManager<\/strong><\/a> plugin, you will see the \u201c<strong>Block Style<\/strong>\u201d button on the top toolbar. There you will find all the style settings for the <strong>Pagination <\/strong>block. If you have trouble understanding what those features do, check out this <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetstylemanager-block-style-settings-overview\/\"><strong>Block Style overview<\/strong><\/a>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-block-style.png\" alt=\"pagination block style settings\">\n\n\n\n<p>After customizing the design, you can go to the front end and look at how the pagination works.<\/p>\n<\/div><\/div>\n\n\n\n<p>That&#8217;s all. Now you know how to link the <strong>Pagination<\/strong> and <strong>Listing Grid<\/strong> blocks on the page created with the help of the Gutenberg editor.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to combine the Listing Grid and Pagination blocks of the JetEngine plugin on the page created via the WordPress block Editor.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[422,394],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.\" \/>\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-add-pagination-to-listing-grid-block\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T08:28:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-block.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=\"3 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-add-pagination-to-listing-grid-block\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/\",\"name\":\"JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2021-04-22T12:17:37+00:00\",\"dateModified\":\"2023-07-28T08:28:04+00:00\",\"description\":\"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/#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 Add Pagination to Listing Grid Block\"}]},{\"@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":"JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock","description":"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.","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-add-pagination-to-listing-grid-block\/","og_locale":"en_US","og_type":"article","og_title":"JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock","og_description":"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T08:28:04+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2021\/04\/pagination-block.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/","name":"JetEngine: How to Use Pagination Block in Gutenberg | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2021-04-22T12:17:37+00:00","dateModified":"2023-07-28T08:28:04+00:00","description":"Learn how to create a connection between the Listing Grid and Pagination blocks of the JetEngine plugin in Gutenberg Editor.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-add-pagination-to-listing-grid-block\/#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 Add Pagination to Listing Grid Block"}]},{"@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\/22563"}],"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=22563"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=22563"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=22563"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}