Dynamic Posts Grid Block

A server-rendered posts grid for WordPress. Show your latest posts as a responsive grid or list, filter by category, and add pagination, all from the block editor.

Try it live in WordPress Playground (no install needed)

Why this exists

Blog and portfolio pages need content that updates itself. This is a dynamic block: the markup is generated by PHP on every request, so new posts appear automatically with no editing, and the editor shows a live preview.

Features

• Grid (1-4 columns) or list layout, responsive on mobile
• Filter by one or more categories
• Order by newest or title
• Toggle featured image, excerpt, date and pagination
• Live preview in the editor using ServerSideRender
• Secure by default: every attribute is validated and all output is escaped

Quick start

Option A: install the plugin

1. Download this repository as a ZIP (Code → Download ZIP).
2. In WordPress go to Plugins → Add New → Upload Plugin, upload the ZIP and activate it.
3. Edit a page and add the Dynamic Posts Grid block.

The compiled build/ folder is included, so no build step is needed.

Option B: build from source

git clone https://github.com/YOUR-USERNAME/dynamic-posts-grid-block.git
cd dynamic-posts-grid-block
npm install
npm run build

Requires Node 18+ and WordPress 6.4+.

Block settings

Attribute	Type	Default	Description
postsToShow	number	6	Posts per page (1-24)
columns	number	3	Grid columns (1-4)
layout	grid / list	grid	Display style
categories	number[]	[]	Category IDs, empty means all
orderBy	date / title	date	Sort order
showImage / showExcerpt / showDate	boolean	true	Card content
showPagination	boolean	false	Newer / Older links

How it works

Editor (edit.js)  ──attributes──▶  ServerSideRender  ──REST──▶  render.php
                                                                    │
Front end request ─────────────────────────────────────────────────▶│
                                                                    ▼
                                              sanitize → WP_Query → escaped HTML

Project structure

src/
├── block.json     Attributes and the "render" file
├── index.js       Registers the block (no save function, it is dynamic)
├── edit.js        Inspector controls + live preview
├── render.php     Server-side output (WP_Query)
├── style.scss     Front-end styles
└── editor.scss    Editor-only styles
dynamic-posts-grid-block.php   Plugin bootstrap

Security notes

• Numeric attributes are cast with absint() and clamped to safe ranges.
• Enumerated attributes (layout, orderBy) are checked against allow-lists.
• Output uses esc_html(), esc_url() and esc_attr().
• The pagination query var is read-only and cast to a positive integer.

Development

npm run lint:js
npm run lint:css
npm start        # watch mode

Roadmap

• Support custom post types
• "Load more" button using the Interactivity API
• Tag filter

License

MIT © Mehul Dave