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.
Thanks to @webdevstudios, for today's #5FTF I got to create a WordPress plugin that displays the attributes of the currently selected block in the block editor.https://t.co/pW17NcwYEX pic.twitter.com/JvZff5anbR
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 !
Thanks for sharing this with your readers.
Just a heads up, since this article was published the plugin was approved and added to the wordpress.org repository (Block X-ray Attributes).
Thanks for the heads up. I updated the post.
Valuable information Justin. I will install it and see how I get the most out of it 👍
Your email address will not be published.
document.getElementById( “ak_js_1” ).setAttribute( “value”, ( new Date() ).getTime() );
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable