Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

gutenberg_render_block_core_template_part() should not call wpautop() #26731

Open
bobbingwide opened this issue Nov 5, 2020 · 3 comments
Open
Labels
[Block] Template Part Affects the Template Parts Block [Type] Bug An existing feature does not function as intended

Comments

@bobbingwide
Copy link
Contributor

bobbingwide commented Nov 5, 2020

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 bobbingwide/fizzie#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

@bobbingwide
Copy link
Contributor Author

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;}
  1. Add the 404.html template containing
<!-- wp:template-part {"slug":"issue-26731","theme":"twentytwentyone-blocks"} /-->
  1. 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 -->
  1. Visit content that's not there - in order to get the 404 page.
  2. Notice the empty paragraph.
  3. 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>

image

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().

image

@bobbingwide
Copy link
Contributor Author

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
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Template Part Affects the Template Parts Block [Type] Bug An existing feature does not function as intended
Projects
None yet
3 participants