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. Empty group or column wrappers add to the problem. 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

	/**
	* Skip rendering of empty paragraph, heading, group, and columns blocks.
	*
	* – Paragraphs/headings: skipped if they contain only whitespace or
	* – Group/columns: skipped if all inner blocks are empty or filtered out
	*
	* @param string $block_content The rendered HTML content.
	* @param array $block The parsed block array.
	* @return string\|void Filtered content or null to skip rendering.
	*/
	function skip_empty_blocks($block_content, $block) {
	$block_name = $block['blockName'];

	// Return early for non-targeted blocks
	if (!in_array($block_name, ['core/paragraph', 'core/heading', 'core/group', 'core/columns'], true)) {
	return $block_content;
	}

	// Paragraph and heading: remove if only whitespace or
	if ($block_name === 'core/paragraph' \|\| $block_name === 'core/heading') {
	if (preg_match('/^<(?P<tag>p\|h[1-6])[^>]>(?:\s\| )<\/\1>$/i', trim($block_content))) {
	return;
	}
	return $block_content;
	}

	// Group and columns: skip if no inner blocks or no visible content
	if ($block_name === 'core/group' \|\| $block_name === 'core/columns') {
	if (empty($block['innerBlocks'])) {
	return;
	}

	// If content is empty, assume all inner blocks were also skipped
	if (trim($block_content) === '') {
	return;
	}
	}

	return $block_content;
	}
	add_filter('render_block', 'skip_empty_blocks', 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.