One of my favorite tools in the past few days is the Block X-ray Attributes plugin by Sal Ferrarello. It is geared toward developers and shows block attributes in the WordPress editor.
After seeing his tweet on Friday, I immediately installed it.
The plugin is currently only available via its GitHub repository, and anyone who wants to give it a spin can grab the latest build from the 1.0.0 release page. (Update: it is now on WordPress.org.)
Ferrarello and his colleagues get a full day on company time to give back. WebDevStudios’s employees consistently devote one day each month to Five for the Future, an initiative that encourages organizations to contribute five percent of their resources to the WordPress project.
The company’s first Five for the Future day of 2022 landed last Friday. Ferrarello opted to build a plugin that will likely be immensely helpful to other developers who are building blocks.
Block X-ray Attributes adds a new tab under the Post sidebar panel in the editor named “Block X-ray.” It simply shows a code field with the currently-selected block’s attributes in JSON format.
When I first installed the plugin, I expected the tab to be under the “Block” panel. Since the attributes are specific to the block, it made sense that it would be there. It is instead under the “Post” or “Page” panel, depending on what type of content you are editing.
One missing feature that I would like to see is a copy button. For nested blocks, the output can be lengthy to copy with a mouse, and having a quick way to grab and paste it in my code editor would save some effort on my part.
I imagine that other developers would find the plugin invaluable in taking a quick look at attributes while building new blocks. That would also be my primary use case for it, so I inserted a breadcrumbs plugin that I need to finish at some point:
Being able to quickly look at custom attributes for my blocks allows me to see everything I need to know about them. I can note if the values are being added and correct when I toggle options on and off.
Another use case is the wealth of information available when the dreaded invalid block error appears.
If there is one feature I want to put to the test, this is it. There are times when WordPress randomly gives me a block validation error within custom patterns for seemingly no reason. Maybe it is stray whitespace or some other invisible ghost poking around underneath it all. The block recovery options do not help. Therefore, I am leaving Block X-ray Attributes installed until I can finally catch one of those oddly-random cases. Will it help? We will see in time.
For now, I recommend anyone developing anything related to blocks to install and activate this plugin. It is a handy tool that could mitigate a headache or two.
I thought I was the only one getting these random invalid block errors…
I did not test it yet, but I’m guessing this also another great tool to get the necessary code to create hand coded patterns…
Good find Justin, and many thanks to the developers !