Block Cleanup

  • JNext lesson
  • KPrevious lesson
  • FSearch lessons
  • EscClear search

Every Gutenberg block stamps its own CSS class into your HTML: wp-block-heading, wp-block-list, wp-block-image, on every element, on every page. If your theme styles elements directly and never references those classes, that’s dead weight in your DOM. The Block Cleanup module removes wp-block classes from frontend output, selectively, block type by block type.

To be clear about scope: this is a markup hygiene module. It won’t transform your Core Web Vitals, but on a content-heavy page it strips hundreds of unused attributes, and cleaner HTML is easier to style, diff, and debug.

Block Cleanup module to remove wp-block CSS classes from WordPress frontend HTML

What You Can Strip

Fourteen block classes have individual toggles, so you remove only what your stylesheet genuinely never targets:

  • Text: wp-block-heading, wp-block-paragraph, wp-block-list, wp-block-quote
  • Media: wp-block-image, wp-block-cover, wp-block-media-text
  • Layout: wp-block-group, wp-block-columns, wp-block-column, wp-block-separator, wp-block-table
  • Interactive: wp-block-buttons, wp-block-button

Before You Enable Anything

Search your theme’s CSS for wp-block- first. If the stylesheet references a class, stripping it breaks that styling, and so do plugins that target block classes for styling or JavaScript hooks. The per-block toggles exist precisely so you can strip the classes nothing uses and keep the ones something does. Enable one, check the front end, repeat.

Developer Filters

The class list and the processing are both filterable. Add a custom class to the cleanup list, or veto cleanup on specific content:

// Strip an extra class everywhere.
add_filter( 'functionalities_block_cleanup_classes', function( $classes ) {
    $classes[] = 'my-theme-helper-class';
    return $classes;
});

// Skip cleanup on a specific post type.
add_filter( 'functionalities_block_cleanup_enabled', function( $enabled ) {
    return is_singular( 'docs' ) ? false : $enabled;
});

Framework Safety

The cleanup filter parses your rendered HTML, so it ships with the same guard as the other DOM-touching modules: content containing Vue or Alpine.js directives is skipped entirely, and class matching uses a properly escaped XPath query, so class names with unusual characters can’t break the parser.

If markup cleanliness is your thing, this pairs naturally with Performance & Cleanup for the head section and Schema Settings for giving the cleaned markup semantic meaning. All three run from the same Dynamic Functionalities install.