gutenberg_render_block_core_template_part() should not call wpautop()

[bobbingwide]

Describe the bug While attempting to develop a fix for another problem in gutenberg_render_block_core_template_part() I encountered situations where wpautop() has inadvertently added end paragraph tags into the generated HTML. These were causing unwanted blank areas in the browser.

The problem is caused by wpautop(), which is not needed. Removing the call to wpautop() fixes the issue.

To reproduce Steps to reproduce the behavior:

1. Create a FSE template part that will cause the unwanted behaviour to be exhibited. One example is to include a navigation block.
2. View content that causes the template part to be processed.
3. Either view source or inspect to see the erroneous </p> tags in the page.

Expected behavior No unwanted </p> tags in the generated HTML

Screenshots hex dump of the end of $content before wpautop()

nk__label">About Fiz 6e 6b 5f 5f 6c 61 62 65 6c 22 3e 41 62 6f 75 74 20 46 69 7a 
zie</span></a></li>. 7a 69 65 3c 2f 73 70 61 6e 3e 3c 2f 61 3e 3c 2f 6c 69 3e 0a 
</ul>.</nav>.</div>. 3c 2f 75 6c 3e 0a 3c 2f 6e 61 76 3e 0a 3c 2f 64 69 76 3e 0a 
..            </div> 0a 0a 20 20 20 20 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 
.        </div>.     0a 20 20 20 20 20 20 20 20 3c 2f 64 69 76 3e 0a 20 20 20 20 
</div></div>........ 3c 2f 64 69 76 3e 3c 2f 64 69 76 3e 0a 

hex dump of the end of $content after wpautop().

bel">About Fizzie</s 62 65 6c 22 3e 41 62 6f 75 74 20 46 69 7a 7a 69 65 3c 2f 73 
pan></a></li>.</ul>. 70 61 6e 3e 3c 2f 61 3e 3c 2f 6c 69 3e 0a 3c 2f 75 6c 3e 0a 
</nav>.</div></div>. 3c 2f 6e 61 76 3e 0a 3c 2f 64 69 76 3e 3c 2f 64 69 76 3e 0a 
</p></div>.</p></div 3c 2f 70 3e 3c 2f 64 69 76 3e 0a 3c 2f 70 3e 3c 2f 64 69 76 
>.</div>............ 3e 0a 3c 2f 64 69 76 3e 0a 

See the problem in https://github.com/bobbingwide/fizzie/issues/20

Editor version (please complete the following information):

• WordPress version: [e.g: 5.3.2] 5.6-beta3
• Does the website has Gutenberg plugin installed, or is it using the block editor that comes by default? [e.g: "gutenberg plugin", "default"] 9.3.0

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows
• Browser [e.g. chrome, safari] Chrome
• Version [e.g. 22] Version 86.0.4240.111 (Official Build) (64-bit)

Additional context

• I analysed the problem in https://github.com/bobbingwide/fizzie/issues/20
• I did not attempt to simplify the problem.

[bobbingwide]

I've reduced the problem to the simplest I can.

To reproduce

1. Use the Twenty Twenty-One Blocks theme ( from https://github.com/WordPress/theme-experiments ).
2. Edit style.css to ensure that paragraphs are visible even when empty.

   p { background-color: white; border: 1px solid grey; padding: 5px;}

3. Add the 404.html template containing

   <!-- wp:template-part {"slug":"issue-26731","theme":"twentytwentyone-blocks"} /-->

4. Add the issue-26731.html template part containing a (hand crafted) group block. Notice the blank between the two </div>s

<!-- wp:group -->
<div class="wp-block-group">
<div class="wp-block-group__inner-container">
</div> </div>
<!-- /wp:group -->

5. Visit content that's not there - in order to get the 404 page.
6. Notice the empty paragraph.
7. View source to see the unwanted </p> generated by wpautop().

<div class="wp-site-blocks"><div class="wp-block-template-part"><div class="wp-block-group">
<div class="wp-block-group__inner-container">
</div>
</p></div>
</div>
</div>

Workaround

Remove the blank between the two </div> tags.

Fix

Gutenberg's already tried to fix this problem. There's a comment in do_blocks() associated with code that removes wpautop() from the_content filtering.

// If there are blocks in this content, we shouldn't run wpautop() on it later.

Solution: don't call wpautop().

[bobbingwide]

I've found another instance where wpautop() is causing problems. It affects the inline CSS generated for FSE themes using the new alignment techniques.

<style>         .wp-container-606f3a09dc6ea > * {
                max-width: 80%;
                margin-left: auto;
                margin-right: auto;
            }</p>
<p>         .wp-container-606f3a09dc6ea > .alignwide {
                max-width: 90%;
            }</p>
<p>         .wp-container-606f3a09dc6ea .alignfull {
                max-width: none;
            }
                .wp-container-606f3a09dc6ea .alignleft {
            float: left;
            margin-right: 2em;
        }</p>
<p>     .wp-container-606f3a09dc6ea .alignright {
            float: right;
            margin-left: 2em;
        }
    </style>

[fwazeter]

Following up here that this is still occurring in different areas - been trying to isolate different occurrences.