Look Under the Hood With the Block X-Ray WordPress Plugin

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— Sal Ferrarello (@salcode) January 28, 2022

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.

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.

Viewing attributes of a Columns block.

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:

Testing custom attributes for a block.

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.

Diving into block validation issues.

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.

Category: News, Opinion, Plugins

Tags: Reviews
Share this:Click to email this to a friend (Opens in new window)Click to share on Facebook (Opens in new window)Click to share on Twitter (Opens in new window)Click to share on Telegram (Opens in new window)Click to share on WhatsApp (Opens in new window)Click to share on Pocket (Opens in new window)Click to share on Reddit (Opens in new window)Like thisLike Loading…

Share:

Facebook
Twitter
Pinterest
LinkedIn

Leave a Comment

Your email address will not be published.

Table of Contents

On Key

Related Posts

Best Google Maps Plugins for WordPress

Before we start looking at any plugins, it’s good to review the way Google Maps work. There are several components in the Google Maps API family, all of which can be found on the Google Maps API Family page. When working with WordPress, we are mainly interested in two of these APIs: Static Maps APIMaps

How to Get a Custom Field Value via Shortcode

Sometimes we want to make it easy for site administrators to include the value of a custom field (maybe created as part of a custom meta box) into a post. An ideal solution to this challenge is to use shortcodes. You can either do this through these two plugins: Get Custom Field Values Custom Fields

Best Auto Translation Plugins for WordPress

Having the content of your website available in different languages can mean a much bigger audience for you. A very simple way to do this is to provide automatic translators, they’re not the same as manually translating all your content, but do a pretty good job. It’s better to have an automatic translation plugin than

Best WordPress Multilanguage Plugins

The two main contenders as best multilanguage plugins for WordPress are WPML and QTranslate. If you want a quick answer to which one comes out on top, I would say go for WPML. If you have enough time to give them a test drive, by all means, do so and judge for yourself which one