Mark Each Block in the Page Source for Administrators
Wraps every rendered block in HTML comments with its name, such as core/group or a plugin's block, when an administrator views a page with ?wpide_blocks=1, to see which block produced which markup.
Opens WPIDE on
Code
add_filter( 'render_block', function ( $content, $block ) {
if ( empty( $block['blockName'] ) || ! isset( $_GET['wpide_blocks'] ) || ! current_user_can( 'manage_options' ) ) {
return $content;
}
$name = sanitize_text_field( $block['blockName'] );
$attrs = ! empty( $block['attrs'] ) ? ' ' . wp_json_encode( array_keys( $block['attrs'] ) ) : '';
// Strip "--" so attribute names cannot close the comment early.
return "\n<!-- block: " . str_replace( '--', '', $name . $attrs ) . " -->\n" . $content . "\n<!-- /block: " . str_replace( '--', '', $name ) . " -->\n";
}, 999, 2 );Notes
View the page source after adding ?wpide_blocks=1 to the address; visitors never see the comments.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.