Learn in this tutorial how to display the name of the blocks that make up a page to better understand its structure.
Blocks are becoming increasingly important within WordPress. They have long been used for content creation and with the arrival of block themes they will also be vital for the creation of the entire website.
Getting used to the paradigm shift takes time but it is worth incorporating it into the way you work. The more “controlled” you have the blocks the better.
In the backend you can see what blocks are being used on a page and get an idea of the structure, especially if you use the “list view”, but you are not seeing the end result.
That’s why having the option to see the block name overprinted in the frontend can be very interesting for several reasons:
- Better understand the structure of a page, template or theme.
- Identify which block you want to modify using a filter.
Yes, you read that right, you can also use the blocks to “hook” what you need programmatically. I will soon publish tutorials with practical examples of this.
The idea is to get something similar to what plugins like Genesis Visual Hook Guide or WooCommerce Visual Hook Guide show.
This is how the content of a page would look like:
And this is how it would look like a block theme (in this case Twenty Twenty-Two):
If you’re interested, read on.
Steps to display the names of the blocks of a page in WordPress
1. Get and display the names of each block
Add the following code at the end of functions.php or in your functionality plugin:
To see this and another 919 code snippets of this website, login or subscribe here.
In this code you use the render_block filter to get the attributes and content of the blocks and modify the result.
You use the conditional tags is_user_logged_in and current_user_can to make sure that the name of the blocks are only added if the user is logged in and has the role of administrator.
The block name is added just before the block content and has a CSS class that allows us to customize the layout.
2. It provides CSS styling
To customize how the blocks are displayed and their name add the following to the style.css file:
To see this and another 919 code snippets of this website, login or subscribe here.
In addition to modifying the color and style of the block name text you also add a dotted border to make the blocks more distinct.
Obviously, you can customize it to look the way you prefer.
As I mentioned at the beginning, being able to display the content with the name of the blocks can be practical for several reasons:
- Better understand the structure of a page, template or theme.
- Identify which block you want to modify using a filter.
In addition, if you were interested you could also display, not only the name of the block but also the attributes you are interested in.
For example, view the CSS classes:
It can be a very versatile and practical tool during the implementation, creation and modification of a website.
The idea is that you add the code temporarily, when you need some of the above mentioned and then remove it.
If I see that there are more people interested I will consider creating a plugin in which the display of the name of the blocks can be activated or deactivated from the administration bar.
Conclusions
Now you know how to display the blocks’ names in the frontend.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
