/
Blog Listing Block
Blog Listing Block
Displays WordPress posts in a responsive grid with optional AJAX-powered category filters and pagination. A dynamic block — rendered server-side via render.php, save returns null.
BLOG GRID
Design
Building a Design System from Scratch
Jan 15, 2026 · 5 min read
Development
Headless WordPress Performance Tips
Jan 10, 2026 · 8 min read
News
Nova 2.0 Release Announcement
Jan 5, 2026 · 3 min read
1
2
3
→
3-column grid with category filter buttons and AJAX pagination. All content elements, filters, and pagination are togglable.
Dynamic block
This block is rendered server-side via render.php — save returns null. Posts are queried at render time based on block attributes. Category filters and pagination use AJAX for seamless navigation without page reloads.
When to use this block
- Blog listing pages with filterable post grids
- Latest posts sections on homepages or landing pages
- Category-driven content archives with AJAX pagination
- Any post type listing — posts, custom post types, or portfolio items
Query
Control which posts are displayed and in what order. Choose a post type, set a count, and pick sort order.
Query
Sidebar Panel
Posts Count
Post Type
Order By
postsCount sets how many posts per page. postType accepts any registered post type slug. orderby sorts by date (newest first) or title (A–Z).
Grid Layout
Set responsive column counts (max 4), horizontal and vertical gap, and container max-width or full-width mode.
Grid
Sidebar Panel
Columns Mobile
Columns Tablet
Columns Desktop
Gap X
px
Gap Y
px
Container
Sidebar Panel
Full Width
Max Width
px
Columns max out at 4. Gap X/Y are responsive across breakpoints: Mobile Tablet Desktop
Content Elements
Choose which post elements appear on each card and reorder them by dragging. The content order array controls the visual stacking of elements below the featured image.
Content Order
Draggable list
title
category
author
date
reading_time
excerpt
Show / Hide
Sidebar Panel
Date
Category
Author
Reading Time
Excerpt
contentOrder is a draggable array — reorder to control how elements stack inside each card. The contentGap attribute (responsive) controls spacing between content elements.
Card Styling
Each post card supports background color, border, shadow, radius, and content padding. Featured image sizing is also controlled here.
Card
Sidebar Panel
Background
Border
Shadow
Border Radius
px
Content Padding
px
Image
Sidebar Panel
Max Width
%
Height
px
Border Radius
px
Image sizing and content padding are responsive: Mobile Tablet Desktop
Typography
Four independent typography levels, each with responsive font size, line height, font weight, letter spacing, and color.
Title Typography
Post title — fontSize, lineHeight, fontWeight, letterSpacing (responsive) + color.
Excerpt Typography
Post excerpt text — same responsive properties as title.
Meta Typography
Date, author, and reading time — shared meta typography set.
Category Typography
Category label on each card — independent sizing and color.
All typography properties are responsive: Mobile Tablet Desktop
Filters & Pagination
Both are AJAX-powered and togglable. Each has its own styling controls for colors, hover/active states, typography, border, radius, and padding.
Filters
Sidebar Panel
Show Filters
Button Color
Hover Color
Active Color
Typography
Border / Radius
Padding
Pagination
Sidebar Panel
Show Pagination
Button Color
Hover Color
Active Color
Typography
Border / Radius
Padding
Filter and pagination button styling follows the same pattern — colors (default/hover/active), typography (fontSize/weight/letterSpacing responsive), border, radius, and padding are all responsive across breakpoints.
All Available Controls
Query Posts count, post type, order
postsCount (default 3): number of posts per page. postType (default "post"): registered post type slug. orderby (default "date"): "date" (newest first) or "title" (A–Z).
Grid Layout Columns, gap, max-width, full-width
Grid columns per breakpoint (mobile/tablet/desktop, max 4). gapX/gapY: horizontal and vertical gap (responsive). maxWidth: container max-width in px. fullWidth: boolean toggle to span full width.
Content Elements Order, show/hide toggles, content gap
contentOrder: draggable array of ["title","category","author","date","reading_time","excerpt"]. Show toggles: showDate, showCategory, showReadingTime, showAuthor. contentGap: spacing between content elements (responsive).
Card Styling Background, border, shadow, radius, image sizing
Card: background color, border (width/color), shadow presets, borderRadius (responsive). Image: maxWidth, height, borderRadius (all responsive). contentPadding: inner spacing for the text area below the image (responsive).
Typography Title, excerpt, meta, category — 4 levels
Each level (title, excerpt, meta, category) has: fontSize, lineHeight, fontWeight, letterSpacing (all responsive across 3 breakpoints) + color. Meta covers date, author, and reading time.
Filters Toggle, colors, hover/active, typography, border, padding
showFilters: boolean toggle. Button styling: default/hover/active colors, typography (fontSize/fontWeight/letterSpacing responsive), border (width/color), borderRadius, padding (responsive object). AJAX-powered — filters posts without page reload.
Pagination Toggle, colors, hover/active, typography, border, padding
showPagination: boolean toggle. Same styling pattern as filters — default/hover/active colors, typography (responsive), border, borderRadius, padding (responsive object). AJAX-powered navigation between pages.