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 obsahu. V HTML se zobrazují jako prázdné tagy <p>, <h1-h6>, bloky pro Sloupce a Skupiny bez vnitřního obsahu, čí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

	/**
	* 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

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.