What and When to use static blocks vs dynamic blocks: WordPress Native Gutenberg Blocks Development
Watch on YouTubeVideo summary
The video explores the fundamental differences between static and dynamic blocks within the WordPress Gutenberg editor, guiding developers on when to use each type for their specific needs. The presenter demonstrates how to scaffold both block types simultaneously using command-line tools to compare their file structures directly. While both setups share common files like `package.json` and `editor.js`, the critical distinction lies in the presence of a `render.php` file in dynamic blocks versus a `save.js` file in static blocks. This structural difference dictates how content is handled: dynamic blocks utilize server-side PHP to generate output, whereas static blocks rely on JavaScript to save data directly into the database as serialized information.
A primary argument made in the video concerns the stability and maintenance of these block types, particularly when modifying their markup. With dynamic blocks, developers can update the HTML or logic within `render.php` without breaking the existing installation because WordPress automatically handles the deprecation of old structures. In contrast, static blocks are prone to breaking if the saved data structure changes in the database but the editor does not recognize the new format. The presenter illustrates this by changing a date output in a dynamic block, which updates instantly after a build, while making similar changes to a static block causes it to fail until the plugin is re-registered or the database schema is manually aligned with the new expectations.
Furthermore, the tutorial highlights differences in asset management and user experience within the editor interface. Dynamic blocks enqueue additional assets such as `style` and `render` scripts alongside the standard editor files, allowing for more complex rendering logic on the server side. Static blocks, however, only enqueue the editor script and style, meaning all visual changes must be managed entirely through JavaScript in the browser. This gives dynamic blocks a distinct advantage when converting legacy shortcodes or PHP-based content, as they allow developers to reuse existing code without worrying about breaking the front-end display upon saving. The presenter concludes that for any project requiring server-side rendering or where data persistence might evolve, a dynamic block is the safer and more flexible choice.
Ultimately, the video advises developers to choose dynamic blocks when they need to render output using PHP or when they anticipate needing to update content structures frequently without risking plugin breakage. Static blocks are better suited for simple, static content that does not require server-side processing and where the data structure is unlikely to change. The presenter emphasizes that while JavaScript offers reactive capabilities for immediate visual feedback in the editor, the reliance on database serialization makes static blocks fragile when their internal logic shifts. By understanding these nuances, developers can make informed decisions to ensure their Gutenberg plugins remain robust, maintainable, and compatible with future WordPress updates.
Read the full video transcript
welcome back to the channel in our
previous video where we're developing
native Gutenberg blocks who are able to
create this blog and we are able to
change the alignment and so on and we
can be able to add other native features
that are in the block editor now there's
one particular concept that I want to
expound on and that is basically using
static and dynamic blocks now what are
these what are Dynamic blocks what are
static blocks in their very nature
so right now I'm going to open up two
different instances of a dynamic block
and a static block and we can start
comparing them so that you understand
which one is the best for your
particular use case sometimes you're
going to find that using a dynamic block
makes more sense other times having a
static block is the best way to go so if
you want to see that then jump with me
in the code
so the first thing that I'm going to do
is go back to my plugin section
and I'm going to disable this particular
block so that we don't have it showing
up I'll disable all these other blocks
as well because we don't need them
and then in here I'm going to open up my
integrated terminal and in here I'm
going to use npx which is basically an
npm command but this one allows you to
install only what you need and not into
your system and I'm going to go for the
WordPress slash create Dash block and if
I hit enter on this so you will see that
it will start asking me questions and I
can fill in whether I want a dynamic or
a static block now what I'm going to do
is stop running of this command I'm
going to do something different where I
say
static block plugin is going to be the
name of our plugin and I'm going to add
dash dash variant which is a command
line variable that we can change and say
we want to have a static block so when
we hit that WordPress will start
scaffolding for us this new plugin and
when we open it we're going to see that
all the files that we need are starting
to be added I'm going to open another
terminal window and I'm going to do the
same thing so instead of using the
static variant I'm going to use the
dynamic variant and I'm going to change
this from static to Dynamic block plugin
I'll hit enter And since these are two
different things they're all going to
install two different times but that
will allow me to save on time so I'm
going to split this so that I can see
this
and then I can be able to also see
what's going on here we can see that my
static block is installing as well as my
Dynamic block at the same time and we
see we have these two here we'll wait
for them to just complete installing
now you can see that all our plugins
have finished installing our static
which was here has actually finished
installing as well as our Dynamic one so
we have this here now I'm going to
compare those two by just looking at the
file structure you'll see that in these
cases both we have the name of the file
that kicks off the process we have
package.json readme gitignoreeditor dot
config we have the node modules a source
under build so we're going to go into
the source folder because that's where
we usually have the differences we have
a block Json in both instances we have
an edit.js which is the same we have
editor.css
index.js and then we have our rendered
PHP here which is not here and when we
look at this we have a save.js which is
not here so those are the two files that
are not available in this case now if I
was to look into inside this file the
save.js you'll see that they tell us
that this is the particular file that
allows us to have the final markup which
is serialized and then used in the post
content area now if we look at the
render.php you're going to see that it
actually has some PHP in it and then you
can actually have content that is in
there that is one of the biggest
differences in that with a dynamic block
we have a render.php so it allows us to
do PHP stuff or server-side stuff in PHP
basically you could even have like a
date for example so if I was to add some
PHP here and say okay let's Echo and
we're going to have date and we want to
have the debt as a year we can be able
to save this and you're going to be able
to see this so I'm going to add a dash
and then we'll be able to see this
change now I'm going to go back into my
plugin section and reload and I'm going
to load both I'm going to load Dynamic
block and my static block and when I go
to Pages go to the sample page I'm going
to just check out this block that is
broken and down here I'm going to say so
we'll just have a static block
which we shall say this is slash static
block plugin and then after doing that
we're going to have a dynamic block
below it so slash Dynamic block plugin
I'll hit save here
and then I'm going to go to preview the
pages so you will see that here we have
the static block showing this and the
dynamic block showing us what we have
here now I want to make a few
modifications to this particular log so
I'm going to erase this and I'm going to
leave this part that says you know what
let's Echo the date and we want to get
there so I'm going to save this I'll
come back here and I'll reload now
you're not going to see a change simply
because I have not compiled our new
changes in here so what I'm going to do
here is I'm going to open up this in the
integrated terminal and I'm going to hit
npm run build which is a function that's
already in my package.json so basically
it's just going to rebuild this package
if I reload now you'll see that it shows
a wire which is 2023 and if I want to
make more changes to this I can do
anything in PHP now you realize I didn't
have to go back into my editor and fix
this particular block and change
anything about it everything was done on
the server side and this is actually
showing up now with our static block
there is a bit of a difference so if I
want to change what we have inside our
static block I'll have to go to rsf.js
and then say change this I'm going to
run this also in the editor I'm going to
npm run build
hit enter and if I reload you're going
to see that this actually breaks the
Block in comparison to the dynamic which
is not broken in as much as we change
them and that is simply because
WordPress does not know how to deal with
this particular block it has changed in
its structure and so WordPress needs to
know how this was deprecated and how to
handle the HTML and that is simply
because when I go to the editor here the
weather static block is handled all the
information is actually saved it's
actually saved as information in here
and then also saved in our database now
because of this little change that we've
done here and say change WordPress
cannot understand because it only knows
this that doesn't have a change so I'm
going to go back so in this particular
case I'd have to remove this come back
and then say let's add a static block
and then once I hit save and update we
are able to see that this actually
changed and in here it's not breaking so
static blocks are most likely going to
break
in comparison to the dynamic blocks and
that is simply because any change that
you do in the markup on the static block
needs to be reflected in the database
and also WordPress needs to know how to
handle it so you need to know how to do
deprecations and that's a thing we shall
see in the future I'll make a video
about how to make a deprecation for your
static block so these two files being
different is the biggest difference
inside handling static blocks and
dynamic blocks so if you want to convert
a short code that you had with PHP
previously I would advise you to use a
dynamic block so that you can reuse some
of that code if you want to but go ahead
you can try to make it a static block
because with all the elements that you
get from JavaScript you're able to
handle reactive like differences for
example when someone changes one small
thing here the change is visible to
their eye in that very instance so you
have that reactive nature of JavaScript
helping you in the behavior your own
layer so that's the biggest difference
with the dynamic and the static blocks
now the other difference that you will
see with a static block is that when you
go to the block.json you're actually
going to see that down here you only
enqueue the editor script you enqueue
the editor style and then you add the
style as well but with the dynamic block
you actually have all those coming up
the editor script editor style the style
and then you have the render file also
being enqueued right here otherwise all
the other things remain the same and
you're able to do with them as much as
you want
so the things that happen in the
editor.js actually going to show up in
the back end when someone is editing so
if you want your user to see the changes
happening in your back end you'll be
able to do those changes in both
instances because both files actually
have an editor.js whether it's static or
whether it is actually Dynamic the
purpose of the editor.js in both cases
is so that we can add controls and
different items that allow us to
manipulate our block and we'll see those
on the back end it is important that we
make all our changes while on the back
end but then also do not distort the
front end which is in the server.js if
we are to make changes to the HTML
that's going to be passed in the
server.js we then need to have
deprecations added to our particular
block plugin otherwise we end up
breaking the block this is the big issue
for the static blocks and yet for the
dynamic ones we're going to be using PHP
to render out our output so we're not
going to be having the front end braking
just because we made changes to the back
end now remember the choice is yours if
you are going to make something that
renders the output using PHP then go
ahead use the dynamic block now if you
enjoyed the video or if I confuse the a
little bit please let me know in the
comment section don't forget to give
this a thumbs up if it was clear enough
for you share with a friend the video
and also leave a like now if you want to
see me convert a shortcode into a modern
day block I'll be doing that in a video
that is coming soon so make sure you hit
your notification Bell so that you don't
miss out otherwise enjoy whatever you're
developing