This plugin adds a panel to the WordPress block editor that allows you to inspect and modify the selected block. You can:

• Copy the block name
• Copy the block client ID
• View the block object (from select('core/block-editor').getBlock())
• View the block type object
• View the output of useBlockProps()
• View and copy the serialized block HTML
• View and edit most block attributes (see the "Editing Attributes" section below)

You can install the plugin via Composer:

composer require alleyinteractive/wp-block-debug

The interface for editing block attributes is generated by passing the block type's attributes schema to react-jsonschema-form. Some attributes might be easier to edit than others, and some attributes might not be editable at all, depending on how well-defined the attributes are in the schema (you can use the "Dump block type" feature in the debug panel to see it).

Only attributes with a type of string, number, integer, boolean, object, array, or null are supported; items of type array must also define an items schema.

The debug panel is available to users with the view_block_debug capability, which is mapped to edit_posts by default.

GPL-2.0-or-later

Alley Interactive