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.
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).