Hide Gutenberg Classes With WP Ghost

With WP Ghost you can hide the Gutenberg wp-block classes in the frontend.

Hide Gutenberg with Text Mapping

We didn’t add this class name automatically to the plugin, but we will show you how to do that using the text mapping feature.

  1. Go to WP Ghost> Mapping > Text Mapping section.
  2. Add the class name wp-block and change it to something new like block to hide the wp- prefix.
  3. Switch on the Text Mapping in CSS and JS files option to apply the changes in all files as this class name is widely used by WordPress.
  4. Click the Save button to apply the changes.

Note! As the CSS and JS files are now loading dynamically to change the wp-block in all files, we recommend using a cache plugin to speed up the loading after the files are changed.

Avoid Loading Gutenberg Block

If your theme does not use Gutenberg blocks, we recommend avoiding loading the wp-block library in the frontend to improve the loading speed and security.

  1. Navigate to your WordPress admin dashboard.
  2. Go to Appearance > Theme File Editor.
  3. Select the functions.php file from the right-hand side menu.
  4. Add the following code at the end of the functions.php file
add_filter( 'should_load_separate_core_block_assets', '__return_true' );

add_action( 'wp_enqueue_scripts', function() {
    wp_dequeue_style( 'wp-block-library' ); // Gutenberg blocks
    wp_dequeue_style( 'wp-block-library-theme' );
    wp_dequeue_style( 'wc-block-style' ); // WooCommerce
    wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
    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' );

With these two solutions applied, the wp-block library will no longer be loaded in the frontend, and the class names will be changed to not reflect any more WordPress Gutenberg blocks.

Tagged: