Debugging templates, template parts and post content

There are a number of techniques to debug templates, template parts and post content.

  1. Add some debugging output.
  2. Add some debugging styling.
  3. Use a custom template that mixes the two.

Add some debugging output

In this theme the templates have a custom HTML block at the top indicating the template name and sometimes a timestamp. I use this to check that the template that’s being displayed is the one I expect it to be.

<!-- wp:html -->
<div class="WP_DEBUG">my-template-name.html timestamp</div>
<!-- /wp:html -->
 

Add some debugging styling

The style.css file contains CSS to style the .WP_DEBUG class so that it’s not too in your face.

I also use custom CSS, either added to the content using the CSS block or edited on the fly in the inspector

Custom template output-input

Proposal for a Debug block

I have started to develop a Single Block plugin debug block bobbingwide/sb-debug-block. For this to work I need to develop some additional debugging capability built into Gutenberg / WordPress core.

The code needs to be able to determine the current template and current template part.

A simple hack is to add this into gutenberg_override_query_template() saving the current template returned by gutenberg_resolve_template() into a global $_wp_current_template. This can then be referenced in the debug block.

function gutenberg_override_query_template( $template, $type, array $templates = array() ) {
        global $_wp_current_template_content;
        global $_wp_current_template;
        $current_template = gutenberg_resolve_template( $type, $templates );
        // Set the current template's details.
        $_wp_current_template = $current_template;
[contents]

WordPress version: 5.7.2

Gutenberg version: 10.8.0

Site:  sneak-peek.me
Problems? p { border: 1px solid red; }
br { background: #eee; padding: 0px; content: "A" !important;
    display: block !important; border: 1px red dotted;}