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 &nbsp;
 * - 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 &nbsp;
    if ($block_name === 'core/paragraph' || $block_name === 'core/heading') {
        if (preg_match('/^<(?P<tag>p|h[1-6])[^>]*>(?:\s|&nbsp;)*<\/\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.