WordPress View Block Attributes

When developing a WordPress plugin that creates a Gutenberg block, it is invaluable to be able to view the attributes on the block. Here are some tricks I use to view this information.

Display Block Attributes in Browser Console

If you run the following command in the browser console, it will display the attributes of the current selected block in the browser console.

wp.data.select( 'core/block-editor' ).getSelectedBlock().attributes;

See Lara Schenck’s Log a Gutenberg block’s attributes to the console blog post.

Block X-ray Attributes Plugin

I found myself running Lara’s code snippet from above often enough that I wrote my Block X-ray Attributes Plugin.

Block X-ray Attributes

This plugin adds a section called “Block X-ray” to the Document sidebar in the editor. This “Block X-ray” section displays the attributes for the currently selected block.

Why I Don’t Use the Code Editor View

While the Gutenberg Code editor view does allow you to see the information that gets stored in in the database for a block, when developing it does have a drawback.

When you set a default block attribute that value does NOT get stored in the database. I assume the idea is, if it is the default value, we still have the value even though it is not explicitly stored. Therefore when viewing a block in the Code editor view, we’re only getting part of the picture since any attributes set to the default value are omitted.

Both displaying the block attributes in the browser console and using the Block X-ray Attributes plugin overcome this short-coming. In both of these cases, all attributes and their values are displayed (even if they are the default value).

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.