Docs: Fundamentals of Block Development - Static or Dynamic rendering of a block

[juanmaguitar]

Static or Dynamic rendering of a block
This PR fixes #56274

[fabiankaegy]

Left two comments in here :)

Also I would ideally want to see some code examples alongside these.

Also is this really new documentation that we don't already have multiple times over? I feel like this something that used to exist at least 🤔

I'm a fan of how this developer blog post from earlier this year covered the topic: https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/

[fabiankaegy]

I feel like this is very confusing. This explains how to use dynamic rendering without explaining first what dynamic rendering even is / letting the reader know that there are two different kinds of rendering

[fabiankaegy]

Technically this is not entirely correct. Yes static blocks save their markup to the database and return said markup on the frontend. However both core and extenders can and do modify that markup before it gets rendered on the frontend via the render_callback or render_block hook.

An example of this is the core cover block which is a static block that does some PHP magic if the "use featured image" setting to dynamically inject the featured image.

Same with the Image block. Yes it saves markup to the DB. But when the image is served through the media library the sourceset generation etc is done on the server.

The List block is a static block that dynamically gets it's wrapping class name (wp-block-list) injected into the blocks markup on the server.

---

My point here is not that this should all be documented here. Instead I worry that the current explanation makes one feel too "safe" that the markup generated in the save function in JS is output 100% as is without modification. Which is not true.

[juanmaguitar]

My point here is not that this should all be documented here. Instead I worry that the current explanation makes one feel too "safe" that the markup generated in the save function in JS is output 100% as is without modification. Which is not true.

Thanks for this explanation. Based on your explanations I agree the current text may be misleading.
I'll work on a different text proposal to take these cases into account.

[juanmaguitar]

Left two comments in here :)

Thanks @fabiankaegy for your comments.
This is still a draft that contains some rough ideas but your feedback is already useful in shaping the direction of the content.

Also I would ideally want to see some code examples alongside these.

Yes! I was planning to reference some examples from https://github.com/WordPress/block-development-examples

Also is this really new documentation that we don't already have multiple times over? I feel like this is something that used to exist at least 🤔
I'm a fan of how this developer blog post from earlier this year covered the topic: https://developer.wordpress.org/news/2023/02/27/static-vs-dynamic-blocks-whats-the-difference/

The main purpose of this Fundamentals of Block Development is to surface some content that is considered essential for block development (at least from a practical point of view)

Regarding this static vs dynamic rendering, one of the ideas that we'd like to reinforce is that there is no strictly "static blocks" or "dynamic block" but more blocks with static rendering or blocks with dynamic rendering. Based on feedback received, we believe this new approach will make it easier to understand the real possibilities of rendering a block.

[fabiankaegy]

This is still a draft

🤦 sorry, I somehow missed that since I somehow got pinged for a review

[juanmaguitar]

@fabiankaegy I have finally opened the PR for review with the first version for this page.
Please, let me know your thoughts.

One of the purposes of the Fundamentals of Block Development is to surface the knowledge for the most relevant topics in Block Development.

This page takes some content from How-to Guides > Blocks > Creating dynamic blocks with the intention of removing this part from that page it once this PR has been approved and merged

[github-actions]

Flaky tests detected in 9f629b7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7299803797
📝 Reported issues:

• [Flaky Test] Should show Columns block only if selected blocks are between limits (1-6) #40369 in specs/editor/various/block-switcher.test.js

[juanmaguitar]

@justintadlock thanks a lot for your feedback.
I have addressed it and updated the PR with the changes.