Blog · Gutenberg
Post Grid block for WordPress
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint.
Inspector panels on this block: Query, Layout, Image, Content, Card Colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Post Type” options: Posts, Pages, Products (WooCommerce); “Order By” options: Date, Title, Menu Order, Modified Date, Random; “Order” options: Newest first (DESC), Oldest first (ASC); “Card Style” options: Shadow, Outlined, Flat, Elevated.
Where to find it
Gutenberg inserter → Blog → search “Post Grid” (block name `blockenberg/post-grid` in block.json). Style it in the sidebar after insert.
How to use Post Grid block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Post Grid”, insert it. Category: Blog.
- Configure inspector controls that exist on this block. Open Query. Set “Post Type”, “Order By”, “Order”, “Posts per page”.
- Check the published page. It calls WordPress REST: `/blockenberg/v1/post-grid`. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Post Type | Select control; the chosen value is saved on the block. Options: Posts; Pages; Products (WooCommerce). block.json default: post. Saved as `postType`. |
| Order By | Select control; the chosen value is saved on the block. Options: Date; Title; Menu Order; Modified Date; Random. block.json default: date. Saved as `orderby`. |
| Order | Select control; the chosen value is saved on the block. Options: Newest first (DESC); Oldest first (ASC). block.json default: desc. Saved as `order`. |
| Posts per page | Numeric range control in the inspector. Range 1–48. block.json default: 6. Saved as `perPage`. |
| Offset | Numeric range control in the inspector. Range 0–48. block.json default: 0. Saved as `offset`. |
| Excerpt word count | Numeric range control in the inspector. Range 5–60. block.json default: 20. Saved as `excerptLen`. |
| Columns (Desktop) | Numeric range control in the inspector. Range 1–6. block.json default: 3. Saved as `columns`. |
| Columns (Tablet) | Numeric range control in the inspector. Range 1–4. block.json default: 2. Saved as `columnsTablet`. |
| Columns (Mobile) | Numeric range control in the inspector. Range 1–2. block.json default: 1. Saved as `columnsMobile`. |
| Column gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `gapX`. |
| Row gap (px) | Numeric range control in the inspector. Range 0–80. block.json default: 24. Saved as `gapY`. |
| Card Style | Select control; the chosen value is saved on the block. Options: Shadow; Outlined; Flat; Elevated. block.json default: shadow. Saved as `cardStyle`. |
| Card border radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 10. Saved as `cardRadius`. |
| Show featured image | On/off toggle in the inspector. On by default. Saved as `showImage`. |
| Image ratio | Select control; the chosen value is saved on the block. Options: 16:9 (56.25%); 4:3 (75%); 1:1 (100%); 3:2 (66.67%); 21:9 (42.86%). block.json default: 56.25. Saved as `imageRatio`. |
| Hover effect | Select control; the chosen value is saved on the block. Options: Zoom; Fade; Lift; None. block.json default: zoom. Saved as `imageHoverEffect`. |
| Show meta (date / author) | On/off toggle in the inspector. On by default. Saved as `showMeta`. |
| Show excerpt | On/off toggle in the inspector. On by default. Saved as `showExcerpt`. |
| Show Read More | On/off toggle in the inspector. On by default. Saved as `showReadMore`. |
| Read More label | Text field in the inspector. block.json default: Read More. Saved as `readMoreLabel`. |
| Read More style | Select control; the chosen value is saved on the block. Options: Text Link; Button; Arrow →. block.json default: link. Saved as `readMoreStyle`. |
| No posts message | Text field in the inspector. block.json default: No posts found.. Saved as `noPostsMessage`. |
| Title Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Excerpt Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `excerptTypo`. |
| Meta Typography | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `metaTypo`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Title color | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Title hover color | Color control in the inspector. block.json default: #2563eb. Saved as `titleHoverColor`. |
| Excerpt color | Color control in the inspector. block.json default: #6b7280. Saved as `excerptColor`. |
| Meta color | Color control in the inspector. block.json default: #9ca3af. Saved as `metaColor`. |
| Link/button color | Color control in the inspector. block.json default: #2563eb. Saved as `linkColor`. |
| Border color | Color control in the inspector. block.json default: #e5e7eb. Saved as `borderColor`. |
What the front-end script actually does
- It calls WordPress REST: `/blockenberg/v1/post-grid`.
- Submit/load uses fetch or wp.apiFetch on the published page, not the editor canvas.
When this is the right block
- Display posts or custom post types in a responsive card grid. Powered by the built-in REST API endpoint — that is the job of Post Grid, not a generic content block.
- Use it when you need the editor control labeled “Post Type”, which exists on this block’s inspector.
- It matches pages about posts, grid, blog.
- Use it when submissions should hit this block’s REST route, not a third-party form plugin.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Post Grid block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Post Grid”. It sits under Blog. After insert, open Query and set “Post Type”, “Order By”, “Order”, “Posts per page”.
Where do Post Grid submissions go?
The published page calls this block’s Blockenberg REST route (see front-end notes). The editor canvas does not send mail unless you preview on the front end.
Is the Post Grid Gutenberg block free?
Yes. Post Grid ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Post Grid to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Query, Layout, Image, Content).
Related blog blocks
Category Grid
Display WordPress post categories in a responsive grid with post counts, icons, descriptions, and rich styling options.
Post Carousel
A responsive carousel of posts with autoplay, arrows, and dots.
Article Header
Rich editorial-style article/blog post header with category badge, headline, subheadline, author meta bar, and optional hero image.
Key Takeaways
A styled summary box for articles and blog posts highlighting the most important points. Supports custom heading, icon, bullet style, and rich color options.
Quote Collection
Curated editorial multi-quote grid — inspirational quotes, expert opinions, notable sayings.
Related Posts
Shows posts sharing the category or tag with the current post via AJAX on the frontend.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Post Grid from the Gutenberg inserter.