{"id":20866,"date":"2026-10-21T08:29:00","date_gmt":"2026-10-21T06:29:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=20866"},"modified":"2026-10-09T22:33:53","modified_gmt":"2026-10-09T20:33:53","slug":"dynamic-block-block-json","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/en\/wordpress-plugins-tricks\/tutorials-en-wordpress-plugins-tricks\/dynamic-block-block-json\/","title":{"rendered":"A dynamic Gutenberg block with block.json and render.php"},"content":{"rendered":"

A block whose output depends on data that changes after the post was saved (the newest posts, a price, a list of events) cannot store its final HTML in post_content<\/code>. Every new post in the category would leave the saved markup behind. Static blocks have a second weakness: once the markup of the save<\/code> function changes, older posts no longer match, the editor reports invalid content and the block needs a deprecation entry. A dynamic block avoids both problems. The editor stores only the block comment with its attributes, and PHP renders the markup on every request.<\/p>\n

This article builds such a block from scratch: a list of the latest posts of one category, with the attributes categoryId<\/code> and count<\/code>. It describes what @wordpress\/create-block<\/code> generates as of 29.09.2026, how block.json<\/code> connects the editor with the server, why the scaffold now registers blocks through a generated manifest, and which variables render.php<\/code> receives. All code is complete; the plugin runs on WordPress 6.9 or newer, and the current release at the time of writing is 7.1.2.<\/p>\n

What the create-block scaffold produces today<\/h2>\n

The official tool is the npm package @wordpress\/create-block<\/code>; the latest published version on the retrieval date is 4.99.0 from 23.09.2026. It needs Node.js 20.10.0 or newer. The standard template knows two variants, static<\/code> and dynamic<\/code>. The dynamic variant differs in exactly three places: block.json<\/code> receives a render<\/code> field pointing to render.php<\/code>, index.js<\/code> registers the block without a save<\/code> function, and the npm scripts copy PHP files into the build folder. The commands for the example look like this:<\/p>\n\n\n

Shell<\/span>