Remove Ghost Blocks

Removes the ghost blocks from the rendered output

link Extension name

t2/remove-ghost-blocks

In the recent core versions, empty elements are being rendered on the front end for several blocks, when nothing is configured in the editor (buttons, post excerpts, etc).

It's especially problematic for:

• flex or grid layouts, as these “ghost” blocks take up space and create unexpected gaps inside their wrappers
• templates, patterns, blocks that start preconfigured with innerBlocks
• blocks that have background colors by default
• PHP checks that innerBlocks are empty are failing, because the output is there

We could use a way to globally turn off this new type of output by configuring this extension.

link Configure

Without the extension, the core blocks will output the empty elements:

<div class="wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex"></div>
<h2 class="wp-block-heading"></h2>
<p></p>
<div class="wp-block-media-text is-stacked-on-mobile"><figure class="wp-block-media-text__media"></figure><div class="wp-block-media-text__content"><p></p></div></div>

The settings in the theme t2.json file allow the use of exclude or include (exclude has priority).

• skip - list of blocks excluded from the cleanup check
• only - list of blocks included to the cleanup check
• tags - some blocks should be rendered when at least specific tags are provided

Example for excluding some blocks from the assessment, and everything else will be checked.

	"t2/remove-ghost-blocks": {
		"skip": ["core/code", "core/verse"],
		"tags": {
			"img": ["core/media-text", "core/gallery"],
			"iframe": ["core/video", "core/embed"],
			"embed": ["core/video", "core/embed"],
			"video": ["core/video", "core/embed"]
		},
		"comment": true
	}

Example for including some blocks from the assessment.

	"t2/remove-ghost-blocks": {
		"only": [
			"core/buttons",
			"core/heading",
			"core/gallery",
			"core/media-text",
			"core/paragraph",
			"core/list",
			"core/code",
			"core/embed",
			"core/quote",
			"core/details",
			"core/preformatted",
			"core/pullquote",
			"core/cover",
			"core/video",
			"core/columns",
			"core/group",
			"t2/accordion",
			"t2/faq",
			"t2/hero",
			"t2/tabs",
			"t2/statistics",
			"t2/statistic-item",
			"t2/link-list",
			"t2/files"
		],
		"tags": {
			"img": ["core/media-text", "core/gallery"],
			"iframe": ["core/video", "core/embed"],
			"embed": ["core/video", "core/embed"],
			"video": ["core/video", "core/embed"]
		},
		"comment": false
	}

The markup on the front-end is cleanup, none of these blocks will output something when these are not configured and so not have some content set up.

If you set to true the helper comment from the output:

<!-- empty core/buttons -->
<!-- empty core/heading -->
<!-- empty core/paragraph -->
<!-- empty core/media-text -->