Jak vyčistit zapomenuté prázdné bloky v Gutenbergu Editoru, které narušují layout stránky

Blokový editor přinesl do WordPressu flexibilní tvorbu obsahu, ale také s sebou přinesl nový problém: zapomenuté prázdné odstavce a bloky nadpisů, které vytvářejí nežádoucí mezery. Tyto neviditelné prvky nebyly v klasickém editoru problémem.

Prázdné bloky se dostnou do obsahu, když editoři pracují obsahem nebo šablonou přes Full Site Editing (FSE). Člověk zodpovědný za obsah je při úpravách omylem opomenou a v rozhraní editoru bloků je téměř nemožné je najít. Na rozdíl od klasického editoru, kde byly prázdné odstavce viditelné přímo v HTML, editor bloků tyto mezery skrývá, ale zobrazí se.

Tyto neviditelné prvky narušují design a frustrují tvůrce obashu. V HTML se zobrazují jako prázdné tagy <p> nebo <h1-h6>, čímž vytvářejí mezery tam, kde by neměly být.

Jako řešení tyto prázdné bloky filtruji předtím, než se zobrazí na frontendu. Dvě jednoduché funkce zkontrolují odstavce a nadpisy, zda obsahují skutečný obsah, a zabrání zobrazení nevyužitých bloků. Výsledkem je poladěný výstup, aniž by se musel někdo zabývat prázdnými bloky.

Řešení je následující:

	<?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

Přidejte tyto funkce do souboru functions.php svojí šablony nebo do pluginu pro správu tzv. code snippets a zbavíte se tak rendrování prázdných bloků bez obsahu.