Create an Output Input Debugging custom template to aid debugging

[bobbingwide]

In the UK Community Slack #gutenberg channel Dan Atrill reported a problem with unwanted paragraphs. I thought I'd already resolved this problem as reported in #20.

• I'd removed wpautop() processing from template-part.php
• And a fix has been developed for Gutenberg. But it isn't yet in a released version; it's wasn't in 10.4.0

While investigating a problem with the site logo image size I noticed the unexpected paragraph problem reappear in my page-footer template part. There were empty paragraphs around generated shortcode content. For this particular problem I discovered a simple workaround. Change from using the wp:shortcode block to the custom HTML block. wp:html

I achieved this without having to look deeply into the code. Instead I developed a custom template that displays the minimum output to debug the generated HTML.

This issue is to formally document the requirements for a custom template to help debug blocks in the front end.

Requirements

• To be able to visually check that blocks display the expected HTML
• To see both the formatted output and the original HTML for the block
• To provide a little styling to highlight paragraphs and other tags that can often appear unexpectedly and which throw off the expected styling.

Proposed solution

• [x] Custom template called Output Input Debugging configured as below.
• [x] Minimum amount of HTML in the template to go wrong
• [x] Display the raw source of the contents of the post as escaped HTML
• [x] Use the [contents] shortcode initially.
• [x] Show WordPress and Gutenberg versions
• [x] And a link back to home.
• [x] Optionally style paragraphs and divs with unexpected borders to help spot these unwanted tags.

Custom template definition

{
      "name": "output-input",
      "title": "Output Input Debugging",
      "postTypes": [
        "page",
        "post",
        "block",
        "block_example"
      ]
    }

input-output.html is

<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"contents-shortcode","theme":"fizzie"} /-->

contents-shortcode.html template part is

[contents]
[guts]
[bw_wpadmin]

<!-- wp:oik-css/css {"css":"p { border: 1px solid red; }\nbr { background: #eee; padding: 0px; content: \u0022A\u0022 !important;\n    display: block !important; border: 1px red dotted;}    ","text":"Problems? "} /-->

where

• [contents] is a shortcode from oik-block
• [guts] is a shortcode from oik-blocks
• [bw_wpadmin] is a shortcode from oik
• and the oik-css/css block is from oik-css.

All of which are needed on the site for which Fizzie is targetted.

[bobbingwide]

Here's an example where I put shortcode blocks into columns, discovered the unwanted paragraphs then added the equivalent using custom HTML blocks. Also there's a custom HTML block with hand crafted <br /> tags between A, B and C

[bobbingwide]

Here are two screen captures attempting to debug the columns blocks problem. In the first capture wpautop() IS being run. In the second it's NOT. You can see one red block disappear, just above the "Blocks" widget title. The rest of the output seems reasonable to me given the HTML input.

[bobbingwide]

delivered in v0.5.0