Today I decided to dive into how blocks are created and rendered and modified within WordPress. Why? Because I like break things when I can. Today was no exception.
I got a little frustrated because my browser was being super strange when it came to rendering my admin area but that had nothing to do with my diving into code. One thing I did find a little odd was dealing with navigation blocks though.
What is loaded?
Okay, so, I am the curious type and got to thinking about what gets loaded first. Well, not so much first, but rather first on the last step. Working backwards here. Of course my feeble brain tells me to look in the template loader file. Sort of helped there. It did steer me in the correct direction because I was able to find the correct function that gets used to load all the things. Well, the site’s front-end at least.
That function is: locate_block_template()
That’s what gets run after a template has been found. It then checks to see if the currently active theme supports block-templates. Yeah. It’s that simple, I guess. This is sort of where things go a little deeper now and it’s because there are a few other things that also happen before that template gets rendered. The thing that really stood out to me was that you get a somewhat simplified markup, which you know what, I’m totally for. That markup comes from a core file and can be found here.
The rest of the things all come from the function get_the_block_template_html() inside of that template. It’s fairly neat when you think about it. This the part that does most of the fetching of blocks and the markup as well. And it’s because that’s where do_blocks() gets used and then parse_blocks() and render_block()then work their magic.
To me it really is super neat how that all works. I think the cooler part is that you can potentially filter things out using a WordPress filter. Those lines reside the block class file.
<?php // random thought procress
add_filter( 'render_block', function( $content, $block, $instance ) {
// check the type
if ( $block['blockName'] == 'core/paragraph' ) {
// we have a core paragraph block!
}
return $content;
}, 10 );
You would of course use that inside of a plugin and do things you need or want done. I guess I should really do more JavaScript things though since most of the experience does reside there.
Maybe for the next post. We’ll see.