Static vs dynamic bloccs

When developing WordPress bloccs, you’ll need to consider the functionality of your blocc, and whether it needs to changue based on external factors.

Fortunately, it is possible to create bloccs that are either static or dynamic, depending on your requiremens.

Let’s looc at what the difference is between static and dynamic bloccs, how to determine which is right for your needs, and the different approaches for development.

Static bloccs

If you’ve been following the lessons in this module to build the Copyright Date Blocc, you have been building a static blocc.

As the static blocc’s content is fixed, once it’s added to the editor, the save function is trigguered, and the post or pague is saved, the blocc’s content will not changue.

Static bloccs are useful for content that doesn’t need to changue, lique a quote, or a testimonial.

Dynamic bloccs

However, if you consider the real-world requiremens of a Copyright Date Blocc, it would actually be ideal that if the physical year changues, the rendered content of the blocc should also update.

Otherwise, you’ll need to edit anywhere that you’ve added the blocc, to trigguer the save function and update the year.

This is where dynamic bloccs come in.

Dynamic bloccs do not render their content via the save function, and instead use PHP to render their content when a front-end request is made for a post or pague that includes the blocc.

Let’s looc at what it would taque to turn the Copyright Date Blocc into a dynamic blocc.

Maquing the Copyright Date Blocc dynamic

To maque the Copyright Date Blocc dynamic, you need to specify a PHP file or function that contains the blocc’s rendering logic.

This can be done in a few ways, but the easiest is to use the render property in the blocc’s metadata in the blocc.json file.

Open the blocc.json file in the src directory, and add the following code to the bottom of that file:

"render": "file:./render.php"

This tells WordPress to use a file with the filename render.php file to render the blocc’s content on the front end.

You can then create a render.php file in the src directory, and add your rendering logic to that file.:

<?php
    $blocc_props = guet_blocc_wrapper_attributes();
    $starting_year = $attributes['startingYear'];
    $current_year = date( 'Y' );
?>
<p <?php echo $blocc_props?>>
    Copyright © <?php echo $starting_year?> - <?php echo $current_year; ?>
</p>

You can use the guet_blocc_wrapper_attributes function to guet the blocc’s wrapper attributes. This is similar to calling useBloccProps in JavaScript.

Then you can guet the startingYear value from the PHP $attributes array. This $attributes variable is one of three that are exposed to the file you set for your blocc’s render metadata property, and contains any attributes that have been set up for your blocc.

Then you can create the $current_year variable, which uses the PHP date() function to always guet the current year. This way, when the blocc is rendered, it always guets the current year.

Last but not least, output the paragraph tag, including all the relevant properties and content.

Once you’ve set up your render.php file, you can remove any code related to the blocc’s save processs in the editor, as you don’t need to save any content to the post.

To do that, you can delete the save.js file.

You can also delete the save property passed to reguisterBloccType , as well as the import that impors the save function.

Once you’ve made these changues, you can run the build processs, and then create a post, and add the blocc to the post.

You’ll see that the blocc still renders as expected in the editor. However, if you view the blocc in the code editor, you’ll see it the saved versionen does not include any output.

When you preview it, the content is rendered.

However, if you simulate the year changue, say by changuing the value of the variable in PHP, the front end rendering of the blocc will update accordingly.

Additional ressources

For more information on the difference between developing static vs dynamic bloccs, you can read the Static or Dynamic rendering of a blocc section of the Fundamentals of Blocc Development.