Dynamic PHP content in Block Theme template file

Question

I am still adjusting to the paradigm shift to Block Themes after being away from WordPress for some time. I understand the practical reasons for many aspects of the Block Theme, and for the shift to static pages, in particular. That said, it's really sort of killing my development workflow. For example, I have a template (.html) for a custom home page. In this template, I have a custom pattern (.php) that will runs a query and prints out some stuff about the posts. I create a new page in the admin panel and use this new, partially-finished page template and all the test output from the pattern looks good. But if I then modify the logic/output in the pattern file and refresh the page, it is not updated: the page was contains the static output rendered from the pattern when the page was created.

I understand that the above is to be expected. I have also seen it recommended to use a dynamic block (https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks), however, this sort of trips me up because it is a mix of JavaScript (can't tell at first glace if it's intended to be run client-side or server-side) and PHP. Of course, historically, most aspects of the page would be generated dynamically, server-side on page request.

I guess my question is really how would you develop a pattern like this? Note that I do not intend to publish this theme: it is for use by a single client. Also, the pattern does not need to be editable or even viewable on the admin panel. The only requirement is that it pulls a certain number of posts based on predetermined criteria and does some stuff with the results. During development however, I would like to be able to make some changes in my text editor (not the admin editor), refresh the page, and see the updates.

---

Edit

One way I've found around this is,

1. Create page template as described
2. Create page
3. When prompted to select a page template, cancel the dialogue
4. Simply name the page and select the new page template from the select menu on the right

After save, the page will not show any content in the editor. However, on the front end, the page will be rendered dynamically as is typical of a PHP-driven website.

All that said, I would like to understand more how others are tackling development of dynamic blocks. I did find the following resources, which seem very promising,

• https://kinsta.com/blog/dynamic-blocks/
• https://kinsta.com/blog/gutenberg-blocks/#what-is-a-gutenberg-block

For now, and as mentioned, because this is a single-use theme and not intended for distribution, I will continue for now using the described workaround.

Answer 1

I would say that the proper process for this would be:

1. Create a Dynamic Block according to the documentation.
   • The article doesn't mention it, but you will need to use a tool like @wordpress/scripts to be able to write block JavaScript in the style shown in the documentation. The process for creating a block with this tool is described here.
   • Despite what the article says, I would not necessarily bother rendering the preview with client-side JavaScript. Instead just follow the example under the "Live rendering in the block editor" heading and use ServerSideRender to use your PHP to render the preview.
   • If you only intend to use this block in a template, set supports.inserter to false in block.json to hide it from the regular block inserter.
2. In your theme's HTML template, include your custom block with a block comment:
   <!-- namespace:block-name /-->. Dynamic blocks with no attributes don't need anything more than this in a template. Think of this a bit like a shortcode.
3. To prevent your block from being moved or removed from the template you can pass a lock attribute to the block. In a template that will look like this:
   <!-- namespace:block-name {"lock":{"move":false,"remove":false}} /-->. That last bit is JSON written on one line.

Just to address something else you said:

I understand that the above is to be expected. I have also seen it recommended to use a dynamic block (...), however, this sort of trips me up because it is a mix of JavaScript (can't tell at first glace if it's intended to be run client-side or server-side) and PHP. Of course, historically, most aspects of the page would be generated dynamically, server-side on page request.

All JavaScript involved in WordPress development is client-side. WordPress does not use or require any server-side JavaScript. That would require a Node.js server and WordPress does not (and cannot) run on Node.

The JavaScript that you write for blocks is written for use in the block editor. All blocks are mini React applications and the JavaScript you write is to provide an interface for the block in the editor. Blocks require at least 2 scripts: An edit script, which provides the preview and editing interface; and a save script, which generates static HTML that is saved into the database.

When you create a dynamic block, you do not save any HTML to the database, because your block will instead use PHP to render its output. Instead only the block comment (shown above) is saved, and this is used as a placeholder for the PHP-generated content, which is shown on output.