{"id":2096,"date":"2026-10-14T04:41:10","date_gmt":"2026-10-14T04:41:10","guid":{"rendered":"https:\/\/shapekode.com\/product\/shapeblock\/?post_type=docs&#038;p=2096"},"modified":"2026-10-18T06:40:43","modified_gmt":"2026-10-18T06:40:43","password":"","slug":"post-grid","status":"publish","type":"docs","link":"https:\/\/shapekode.com\/product\/shapeblock\/docs\/post-grid\/","title":{"rendered":"Post Grid"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Post Grid Block displays WordPress posts in a customizable grid. You can select posts by category or individual post, control the number and order of posts, configure featured images, titles, excerpts, metadata, Read More buttons, and pagination. You can also customize the card design, typography, spacing, and responsive column layout.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add a Post Grid Block<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Add the Post Grid Block<\/h3>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post where you want to display your blog posts.<\/li>\n\n\n\n<li>Click the <strong>+ (Add Block)<\/strong> button in the Gutenberg editor.<\/li>\n\n\n\n<li>Search for <strong>Post Grid<\/strong>.<\/li>\n\n\n\n<li>Select the Post Grid Block to insert it into your page.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1564\" height=\"771\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123.png\" alt=\"\" class=\"wp-image-2478\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123.png 1564w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123-300x148.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123-767x378.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123-1024x505.png 1024w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-123-1536x757.png 1536w\" sizes=\"auto, (max-width: 1564px) 100vw, 1564px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Configure the Post Grid Block<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Select the Post Grid Block and open the block settings panel. The available tabs are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Settings:<\/strong> Configure the post query, title, excerpt, metadata, Read More button, and pagination.<\/li>\n\n\n\n<li><strong>Layout:<\/strong> Choose the card style, number of columns, image size, and thumbnail height.<\/li>\n\n\n\n<li><strong>Style:<\/strong> Customize card backgrounds, borders, images, titles, excerpts, metadata, buttons, and pagination.<\/li>\n\n\n\n<li><strong>Advanced:<\/strong> Configure the block&#8217;s spacing and background.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Settings Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Query<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control which WordPress posts appear in the grid and how they are ordered.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Per Page:<\/strong> Set the number of posts to display.<\/li>\n\n\n\n<li><strong>Includes:<\/strong> Select specific posts to include. Choose <strong>All<\/strong> to include all posts.<\/li>\n\n\n\n<li><strong>Excludes:<\/strong> Select specific posts to exclude from the grid. Choose <strong>No Excludes<\/strong> if you do not want to exclude any posts.<\/li>\n\n\n\n<li><strong>Ignore Sticky Posts:<\/strong> Enable this option to ignore the special ordering of sticky posts.<\/li>\n\n\n\n<li><strong>Categories:<\/strong> Select the post categories to display. If no category is selected, posts from all categories are displayed.<\/li>\n\n\n\n<li><strong>Order:<\/strong> Choose the post order:\n<ul class=\"wp-block-list\">\n<li><strong>Ascending:<\/strong> Display posts in ascending order.<\/li>\n\n\n\n<li><strong>Descending:<\/strong> Display posts in descending order.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Order By:<\/strong> Choose how posts are sorted.\n<ul class=\"wp-block-list\">\n<li><strong>Date:<\/strong> Sort by publication date.<\/li>\n\n\n\n<li><strong>Title:<\/strong> Sort by post title.<\/li>\n\n\n\n<li><strong>Name:<\/strong> Sort by post slug.<\/li>\n\n\n\n<li><strong>ID:<\/strong> Sort by post ID.<\/li>\n\n\n\n<li><strong>Random:<\/strong> Display posts in random order.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Offset:<\/strong> Set the number of posts to skip before displaying results.<\/li>\n\n\n\n<li><strong>Only Featured (Sticky) Posts:<\/strong> Display only posts marked as sticky in WordPress.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Title<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure how post titles are displayed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Title HTML Tag:<\/strong> Choose the HTML heading tag for post titles: H2, H3, H4, H5, or H6.<\/li>\n\n\n\n<li><strong>Title Length (words):<\/strong> Set the maximum number of words displayed in a post title.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Excerpt<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control whether post excerpts appear and how much text is displayed.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Excerpt:<\/strong> Enable or disable post excerpts.<\/li>\n\n\n\n<li><strong>Excerpt Length (words):<\/strong> Set the maximum number of words displayed in each excerpt. This option appears when <strong>Show Excerpt<\/strong> is enabled.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Meta<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure the post metadata displayed in each card.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Meta:<\/strong> Enable or disable post metadata.<\/li>\n\n\n\n<li><strong>Items to Show:<\/strong> Select the metadata items to display. Multiple options can be selected.\n<ul class=\"wp-block-list\">\n<li><strong>Author:<\/strong> Display the post author.<\/li>\n\n\n\n<li><strong>Date:<\/strong> Display the publication date.<\/li>\n\n\n\n<li><strong>Category:<\/strong> Display the post category.<\/li>\n\n\n\n<li><strong>Tag:<\/strong> Display post tags.<\/li>\n\n\n\n<li><strong>Comments Count:<\/strong> Display the number of comments.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Author Prefix:<\/strong> Add text before the author&#8217;s name, such as \u201cby.\u201d This option appears when Author is selected.<\/li>\n\n\n\n<li><strong>Position:<\/strong> Choose where the metadata appears.\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> Use the default position.<\/li>\n\n\n\n<li><strong>Above Title:<\/strong> Display metadata above the post title.<\/li>\n\n\n\n<li><strong>Below Title:<\/strong> Display metadata below the post title.<\/li>\n\n\n\n<li><strong>Below Content:<\/strong> Display metadata below the post content.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Show Date Badge:<\/strong> Display the post date as a badge near the top of the card.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The metadata controls appear when <strong>Show Meta<\/strong> is enabled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure the Read More button displayed on post cards.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Button:<\/strong> Enable or disable the Read More button.<\/li>\n\n\n\n<li><strong>Keep the button at the bottom of the card:<\/strong> Align buttons along the bottom of cards when excerpts have different lengths. This option is intended for the Default card style.<\/li>\n\n\n\n<li><strong>Button Text:<\/strong> Customize the button label, such as \u201cRead More.\u201d<\/li>\n\n\n\n<li><strong>Button Icon:<\/strong> Select an icon to display with the button.<\/li>\n\n\n\n<li><strong>Icon Position:<\/strong> Choose where the icon appears relative to the button text.\n<ul class=\"wp-block-list\">\n<li><strong>Before:<\/strong> Display the icon before the text.<\/li>\n\n\n\n<li><strong>After:<\/strong> Display the icon after the text.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The button options appear when <strong>Show Button<\/strong> is enabled.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Pagination<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure pagination for the post grid.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Show Pagination:<\/strong> Enable or disable pagination.<\/li>\n\n\n\n<li><strong>Pagination Type:<\/strong> Choose the pagination type. The default available option is <strong>Numeric<\/strong>, which displays numbered page links.<\/li>\n<\/ul>\n\n\n<style id=\"shapeblock-block-css-3-inline-css\">\n.shapeblock-layout-row-sq5vdt { flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:20px;--bp-gap:20px; }\n@media (max-width: 1024px) { .shapeblock-layout-row-sq5vdt { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px) { .shapeblock-layout-row-sq5vdt { padding-right:15px;padding-left:15px; } }\n@media (max-width: 767px){.shapeblock-layout-row.shapeblock-layout-row-sq5vdt > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(1){flex:0 1 100% !important;max-width:100% !important;}.shapeblock-layout-row.shapeblock-layout-row-sq5vdt > .shapeblock-layout-row__inner > .shapeblock-column:nth-child(2){flex:0 1 100% !important;max-width:100% !important;}}.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-s09vg8 { flex:0 1 calc(50.00% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50.00% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-1-inline-css *\/\n\n\n.shapeblock-layout-row > .shapeblock-layout-row__inner > .shapeblock-column.shapeblock-col-q3mfgl { flex:0 1 calc(50.00% - var(--bp-gap, 0px) * 50 \/ 100) !important;max-width:calc(50.00% - var(--bp-gap, 0px) * 50 \/ 100) !important; }\n\/*# sourceURL=shapeblock-block-css-2-inline-css *\/\n\/*# sourceURL=shapeblock-block-css-3-inline-css *\/\n<\/style> <div class=\"shapeblock-block shapeblock-layout-row shapeblock-layout-row-sq5vdt is-content-boxed wp-block-shapeblock-layout-row\"><div class=\"shapeblock-layout-row__inner\"> <div class=\"shapeblock-block shapeblock-column shapeblock-col-s09vg8 wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1468\" height=\"742\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-124.png\" alt=\"\" class=\"wp-image-2479\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-124.png 1468w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-124-300x152.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-124-768x388.png 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-124-1024x518.png 1024w\" sizes=\"auto, (max-width: 1468px) 100vw, 1468px\" \/><\/figure> <\/div><\/div> <div class=\"shapeblock-block shapeblock-column shapeblock-col-q3mfgl wp-block-shapeblock-column\"><div class=\"shapeblock-column__inner\"> <figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1466\" height=\"702\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-125.png\" alt=\"\" class=\"wp-image-2480\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-125.png 1466w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-125-300x144.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-125-766x367.png 766w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-125-1024x490.png 1024w\" sizes=\"auto, (max-width: 1466px) 100vw, 1466px\" \/><\/figure> <\/div><\/div> <\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\">Layout Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Grid<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Choose the card design and configure the responsive grid.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Card Style:<\/strong> Choose the appearance of the post cards.\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> Use the standard card layout.<\/li>\n\n\n\n<li><strong>Style 1:<\/strong> Use the alternative card layout.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Columns:<\/strong> Set the number of columns for Desktop, Tablet, and Mobile devices. Available column counts range from 1 to 6.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Image<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Configure the featured image displayed on each post card.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Image Size:<\/strong> Choose the WordPress image size to use. Available options depend on the image sizes registered by your WordPress theme and plugins.<\/li>\n\n\n\n<li><strong>Thumbnail Height:<\/strong> Set the height of the post thumbnail. This control supports responsive settings and units.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1473\" height=\"591\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-126.png\" alt=\"\" class=\"wp-image-2481\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-126.png 1473w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-126-300x120.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-126-768x308.png 768w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-126-1024x411.png 1024w\" sizes=\"auto, (max-width: 1473px) 100vw, 1473px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Style Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Card<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the overall appearance of post cards.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set the card background color or gradient.<\/li>\n\n\n\n<li><strong>Background (Hover):<\/strong> Set the card background color or gradient when visitors hover over a card.<\/li>\n\n\n\n<li><strong>Border Color:<\/strong> Set the card border color.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Customize the default card shadow.<\/li>\n\n\n\n<li><strong>Lift the card on hover:<\/strong> Enable a lifting effect when visitors hover over a card.<\/li>\n\n\n\n<li><strong>Overlay:<\/strong> Set the overlay background color or gradient used by the card design.<\/li>\n\n\n\n<li><strong>Box Shadow:<\/strong> Customize the card shadow for the applicable card state.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Configure the card border, including its width, color, and style.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the roundness of the card corners.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing of the card. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the card. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Content Area<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the area below the featured image that contains metadata, the title, excerpt, and button.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text Align:<\/strong> Align the content to the Left, Center, Right, or Justify. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing of the content area. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Thumbnail<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the featured image&#8217;s hover effect and corners.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Hover Animation:<\/strong> Choose the image hover animation.\n<ul class=\"wp-block-list\">\n<li><strong>None:<\/strong> Disable the hover animation.<\/li>\n\n\n\n<li><strong>Left Right:<\/strong> Apply a horizontal movement effect.<\/li>\n\n\n\n<li><strong>Top Bottom:<\/strong> Apply a vertical movement effect.<\/li>\n\n\n\n<li><strong>Zoom:<\/strong> Enlarge the image on hover.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the roundness of the thumbnail corners.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Title<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance and spacing of post titles.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Normal:<\/strong> Set the title color in its default state.<\/li>\n\n\n\n<li><strong>Hover:<\/strong> Set the title color when visitors hover over the card.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing around the title. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the title. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Text Align:<\/strong> Align the title text. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the title typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. Excerpt<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance and spacing of post excerpts.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the excerpt text color.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing around the excerpt. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the excerpt. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Text Align:<\/strong> Align the excerpt text. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the excerpt typography, including font family, size, weight, style, text transform, line height, and letter spacing. This control supports responsive settings.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6. Date Badge<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the badge used to display the post date.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the date text color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set the date badge background color or gradient.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">7. Meta<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of post metadata.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Meta Style:<\/strong> Choose the metadata design.\n<ul class=\"wp-block-list\">\n<li><strong>Default:<\/strong> Use the default metadata layout.<\/li>\n\n\n\n<li><strong>Style 1:<\/strong> Use the first alternative metadata style.<\/li>\n\n\n\n<li><strong>Style 2:<\/strong> Use the second alternative metadata style.<\/li>\n\n\n\n<li><strong>Style 3:<\/strong> Use the third alternative metadata style.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Text \u2014 Normal:<\/strong> Set the metadata text color in its default state.<\/li>\n\n\n\n<li><strong>Text \u2014 Hover:<\/strong> Set the metadata text color when visitors hover over a card.<\/li>\n\n\n\n<li><strong>Icon \u2014 Normal:<\/strong> Set the metadata icon color in its default state.<\/li>\n\n\n\n<li><strong>Icon \u2014 Hover:<\/strong> Set the metadata icon color when visitors hover over a card.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the spacing around the metadata area.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the metadata typography, including font family, size, weight, style, text transform, line height, and letter spacing.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8. Button<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of the Read More button.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background \u2014 Normal:<\/strong> Set the button background color or gradient.<\/li>\n\n\n\n<li><strong>Background \u2014 Hover:<\/strong> Set the button background color or gradient on hover.<\/li>\n\n\n\n<li><strong>Color \u2014 Normal:<\/strong> Set the button text color.<\/li>\n\n\n\n<li><strong>Color \u2014 Hover:<\/strong> Set the button text color on hover.<\/li>\n\n\n\n<li><strong>Padding:<\/strong> Set the inner spacing of the button.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the button.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the roundness of the button corners.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Customize the button border, including its width, color, and style.<\/li>\n\n\n\n<li><strong>Text Align:<\/strong> Align the button text. This control supports responsive settings.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the button typography, including font family, size, weight, style, text transform, line height, and letter spacing.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9. Pagination<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the appearance of the pagination controls.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Color:<\/strong> Set the pagination text color.<\/li>\n\n\n\n<li><strong>Background:<\/strong> Set the pagination background color or gradient.<\/li>\n\n\n\n<li><strong>Border:<\/strong> Customize the pagination button border.<\/li>\n\n\n\n<li><strong>Border Radius:<\/strong> Adjust the roundness of the pagination button corners.<\/li>\n\n\n\n<li><strong>Typography:<\/strong> Customize the pagination typography, including font family, size, weight, style, text transform, line height, and letter spacing.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1473\" height=\"536\" src=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-127.png\" alt=\"\" class=\"wp-image-2482\" srcset=\"https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-127.png 1473w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-127-300x109.png 300w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-127-767x279.png 767w, https:\/\/shapekode.com\/product\/shapeblock\/wp-content\/uploads\/2026\/10\/image-127-1024x373.png 1024w\" sizes=\"auto, (max-width: 1473px) 100vw, 1473px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Advanced Tab<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Spacing<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Control the spacing around the entire Post Grid Block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Padding:<\/strong> Set the inner spacing around the block. Responsive settings are available.<\/li>\n\n\n\n<li><strong>Margin:<\/strong> Set the outer spacing around the block. Responsive settings are available.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Background<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Customize the background of the entire Post Grid Block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Background:<\/strong> Set a background color or gradient for the block.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Post Grid Block displays WordPress posts in a customizable grid. You can select posts by category or individual post, control the number and order of posts, configure featured images, titles, excerpts, metadata, Read More buttons, and pagination. You can also customize the card design, typography, spacing, and responsive column layout. How to Add a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[20],"doc_tag":[],"class_list":["post-2096","docs","type-docs","status-publish","hentry","doc_category-theme-builder-block"],"year_month":"2026-10","word_count":1532,"total_views":"3","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Sojib","author_nicename":"shapekode-admin","author_url":"https:\/\/shapekode.com\/product\/shapeblock\/author\/shapekode-admin\/"},"doc_category_info":[{"term_name":"Theme Builder Block","term_url":"https:\/\/shapekode.com\/product\/shapeblock\/docs-category\/theme-builder-block\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2096","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/comments?post=2096"}],"version-history":[{"count":1,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2096\/revisions"}],"predecessor-version":[{"id":2483,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/docs\/2096\/revisions\/2483"}],"wp:attachment":[{"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/media?parent=2096"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_category?post=2096"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/shapekode.com\/product\/shapeblock\/wp-json\/wp\/v2\/doc_tag?post=2096"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}