Remove Gutenberg Editor Block-CSS from WordPress front end

WordPress 5.0 is already out and I am sure all of you have already upgraded your WordPress. Gutenberg is a new addition of editor in 5.0 and it is the default editor that WordPress 5.0 is forcing but we as a WordPress users also have options to keep our favorite Editor with us using Classic editor WordPress plugin.

I was quite happy with the results but suddenly noticed that WordPress is adding block-CSS in my Website’s front-end beside my wish and it is also taking valuable http request to load my website. Gtmetrix and other website speed mapping websites recommend minimum HTTP request to load your website.

So here in this small code snippet I am going to disable Block-CSS loaded by WordPress 5.0. As you people are well aware that I hate extra plugins for small works so here I would share a small WordPress code.

Open your theme’s functions.php file and add the following code

if (!is_admin()) add_action( 'wp_print_styles', 'my_deregister_javascript', 100 );
function my_deregister_javascript() {

The above code will remove that extra block-css from your website.

Here is a lists of CSS files that most of the time loaded on your website and probably you are not aware, these are the names of stylesheets automatically loaded by jetpack.

  1. Contact-form-7                 –  Contact form 7
  2. jetpack-subscription        –  JetPack subscription
  3. jetpack-widgets                 – JetPack widgets loads
  4. AtD_style                            –  after the deadline plugin
  5. jetpack-likes
  6. jetpack_related-posts
  7. jetpack-carousel
  8. the-neverending-homepage          – jetpack infinite scroll
  9. infinity-twentyten
  10. infinity-twentytwelve
  11. post-by-email
  12. jetpack-widgets
  13. jetpack-slideshow
  14. jetpack-subscriptions
  15. tiled-gallery
  16. jetpack_display_posts_widget

and if you would like to remove some javascript library that you are currently not using in your websit, Just open your theme’s functions.php file and copy paste the following code.

   add_action( 'wp_enqueue_scripts', 'binarynote_enqueue_scripts_styles' );
    function binarynote_enqueue_scripts_styles() {
     remove_action( 'wp_head',      'rest_output_link_wp_head');
     wp_dequeue_script( 'devicepx' );

Above code will remove devicepx.js javascript from your website that is basically responsible for loading retina ready images on high resolution devices.

Related Posts

Leave a Reply

Your email address will not be published.