Clean up empty block editor spaces that break your layout

The Block Editor brought flexible content creation to WordPress, but it also introduced a new problem: empty paragraph and heading blocks that create unwanted spacing. These invisible elements weren’t an issue with the classic editor.

Empty blocks sneak into content when editors work with Gutenberg or Full Site Editing themes. Content teams accidentally leave them behind during editing, and they’re nearly impossible to spot in the Block Editor interface. Unlike the classic editor, where you could see empty paragraphs directly in the HTML, the Block Editor hides these gaps.

These invisible elements mess up your design spacing and frustrate content teams. They show up as empty <p> or <h1-h6> tags in your HTML, creating gaps where none should exist. The Block Editor doesn’t always make it obvious when a block contains only whitespace or non-breaking spaces.

I filter out these empty blocks before they render on the frontend. Two simple functions check paragraph and heading blocks for actual content and prevent empty ones from appearing in your markup. This approach keeps your HTML clean without requiring content editors to hunt down invisible blocks.

Here’s the solution:

	<?php

	/**
	* Filter out empty paragraph blocks from rendering
	*
	* Checks if a paragraph block contains only whitespace or   and prevents it
	* from being rendered in the final output. This helps keep the markup clean by
	* removing empty p tags that may have been accidentally left in the content.
	* Preserves any classes or attributes that may be on the paragraph tag.
	*
	* @param string $block_content The block content to filter
	* @param array $block The full block object
	* @return string\|void Returns block content or void to remove empty paragraphs
	*/
	add_filter('render_block_core/paragraph', function ($block_content, $block) {
	$cleaned_content = preg_replace('/\s+/', '', $block_content);
	// Check for empty p tags with any attributes
	if (!preg_match('/<p[^>]>(?:\s\| )<\/p>/', $cleaned_content)) {
	return $block_content;
	}
	}, 10, 2);

	/**
	* Filter out empty heading blocks from rendering
	*
	* Checks if a heading block contains only whitespace or   and prevents it
	* from being rendered in the final output. This helps keep the markup clean by
	* removing empty h1-h6 tags that may have been accidentally left in the content.
	*
	* @param string $block_content The block content to filter
	* @param array $block The full block object
	* @return string\|void Returns block content or void to remove empty headings
	*/
	add_filter('render_block_core/heading', function ($block_content, $block) {
	$cleaned_content = preg_replace('/\s+/', '', $block_content);
	// Check for empty h1-h6 tags with any attributes
	if (!preg_match('/<h[1-6][^>]>(?:\s\| )<\/h[1-6]>/', $cleaned_content)) {
	return $block_content;
	}
	}, 10, 2);

view raw empty_spaces.php hosted with ❤ by GitHub

Add these functions to your theme’s functions.php file or a plugin for code snippets to automatically clean up empty blocks.