Hide My WP Ghost
Buy Now

How to Hide Gutenberg Block Classes in WordPress with WP Ghost

February 7, 2019

Category:

Moved

This tutorial has moved to the new WP Ghost Knowledge Base where each feature is presented in detail.

View on new site
Table of Contents

Hide Gutenberg wp-block class names from your WordPress source code using WP Ghost’s (formerly Hide My WP Ghost) Text Mapping feature. The wp-block prefix appears dozens of times in every page’s HTML and is one of the strongest WordPress fingerprints that CMS detectors look for. Replace it with a custom name to break detection.

Every WordPress site using the block editor generates HTML with class names like wp-block-image, wp-block-media-text, wp-block-columns, and wp-block-group. Theme detectors like Wappalyzer and BuiltWith scan for these class prefixes. Even if you have changed every WordPress path, a single wp-block class in your source confirms WordPress instantly. Text Mapping handles this final fingerprint layer.

How to Hide Gutenberg Block Classes

Go to WP Ghost > Mapping > Text Mapping. Add the class name wp-block in the left field and a replacement like block in the right field. This removes the “wp-” prefix from all Gutenberg block class names across your site.

Switch on Text Mapping in CSS and JS files to apply the changes in all files, not just HTML. The wp-block class is widely used by WordPress in both HTML markup and CSS stylesheets, so this option ensures consistency.

Click Save.

WP Ghost Text Mapping showing wp-block replaced with block to hide Gutenberg classes

Use a caching plugin

When Text Mapping in CSS and JS files is enabled, files load dynamically so the class names can be replaced in all files. Use a caching plugin (WP Rocket, LiteSpeed Cache, etc.) to cache the processed output and maintain fast loading speeds.

Optional: Stop Loading the Gutenberg Block Library Entirely

If your theme does not use Gutenberg blocks at all, you can prevent the wp-block CSS library from loading in the frontend. This improves loading speed and removes the fingerprint completely instead of just renaming it.

Go to Appearance > Theme File Editor. Open your theme’s functions.php file. Add this code at the end:

add_filter( 'should_load_separate_core_block_assets', '__return_true' );
add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' );
    wp_dequeue_style( 'classic-theme-styles' );
}, 100 );
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );

This dequeues the WordPress block library, block theme styles, WooCommerce block styles, and classic theme styles from the frontend. Only use this if your theme does not rely on Gutenberg blocks for layout.

Troubleshooting

Theme layout breaks after replacing wp-block classes

Your theme’s CSS targets wp-block class names for styling. When Text Mapping renames them in HTML but not in CSS, the styles no longer match. Make sure Text Mapping in CSS and JS files is enabled. This replaces the class name in both HTML and CSS consistently. If issues persist, your theme may use the class names in JavaScript interactions. Test thoroughly on a staging site first.

Site loads slower after enabling Text Mapping in CSS and JS

When this option is active, CSS and JS files are processed dynamically to replace class names. Use a caching plugin to cache the processed output. The first uncached load may be slightly slower, but subsequent loads from cache are normal speed.

Frequently Asked Questions

Why does WP Ghost not hide Gutenberg classes automatically?

Because many themes use wp-block class names for their layouts and styling. Automatically renaming them could break the appearance of any theme that targets these classes in CSS. Text Mapping gives you control over exactly which class names to replace and what to replace them with.

Do I need to replace every wp-block class individually?

No. Text Mapping does partial matching. Replacing “wp-block” with “block” changes every class that contains this prefix: wp-block-image becomes block-image, wp-block-columns becomes block-columns, wp-block-group becomes block-group. One rule covers all Gutenberg block classes.

Can I also hide Elementor and WooCommerce class names?

Yes. Text Mapping works for any text in your source code. Add “elementor-” and replace it with a custom prefix. Add “woocommerce-” and do the same. WP Ghost includes a predefined list of common WordPress class names you can add with one click. See the Text Mapping tutorial for the full setup guide.

Will this affect the block editor in the WordPress admin?

No. Text Mapping only applies to the frontend source code that visitors and bots see. The WordPress admin dashboard and block editor continue using the original class names. Your editing experience is unaffected.

Does WP Ghost modify WordPress core files?

No. Text Mapping replaces class names in the HTML output at runtime through WordPress filters. The actual CSS, JS, and PHP files on disk are untouched. Disabling Text Mapping restores all original class names instantly.

Text Mapping and URL Mapping – the full guide to replacing class names and URLs in source code.

Hide from WordPress Theme Detectors – complete CMS hiding strategy including class names.

Activate Security Tweaks – hide HTML comments, version tags, and other WordPress fingerprints.

Customize All WordPress Paths – change paths before using Text Mapping for class names.

Website Security Check – verify your configuration after making changes.

Tags: