• Skip to primary navigation
  • Skip to main content
Sal Ferrarello
  • About Sal Ferrarello
  • Speaking
  • Connect
    Mastodon GitHub Twitter (inactive)
You are here: Home / Dev Tips / WordPress View Block Attributes

WordPress View Block Attributes

Last updated on February 8, 2023 by Sal Ferrarello

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.

Block X-ray Attributes WordPress plugin showing the attributes of a 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.

WordPress Gutenberg sidebar, showing the "Code editor" option.

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

Share this post:

Share on TwitterShare on FacebookShare on LinkedInShare on EmailShare on Reddit

Filed Under: Computing, Dev Tips, Programming, Solution Tagged With: block, Gutenberg, WordPress, WordPress Plugin

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Copyright © 2023 · Bootstrap4 Genesis on Genesis Framework · WordPress · Log in