How to Hide WordPress Gutenberg Editor Blocks on Mobile Devices

Table Of Contents

Share Article

Gutenberg Editor is not the default editor in WordPress and is offering some extra functionalities that you can use. Some of the blocks you may choose to display only on certain devices like desktops or mobile or tablets.

Having the Gutenberg blocks displayed in the function of the device can be done easily and with the help of a plugin. You just need to install a plugin and you are set, after you have the option to choose the device.

There are 2 Gutenberg plugins that is offering the device choosing options:

Ghost Kit – Blocks Collection

This is a more complete plugin as is offering also has some custom blocks along with the option to hide the blocks. This is the one I am actually using on this site. Besides adding the option to choose the display option for the core block and the blocks offered by Ghost Kit it is offering also the below blocks:

  • Responsive grid block to build layouts of all shapes and sizes thanks to a twelve column system.
  • Progress bar to show the progress of your work, skills or earnings
  • Alert to inspire user actions
  • Accordion to toggle the visibility of content across your project
  • Video. Plain and Fullscreen YouTube, Vimeo and Self-Hosted videos
  • Carousel. Carousel for any type of content – images or other blocks
  • Pricing Table to facilitate the selling of ​​your products or services and show all features
  • Testimonial
  • Google Maps. Show maps with custom styles, markers and settings
  • GitHub Gist. Embed code parts from GitHub Gist to your site or documentation
  • Widgetized Area. Select registered sidebars and put it in any place

Block Options

This is a plugin that is offering basically some conditional options to the Gutenberg Blocks and does not add any extra blocks. With this you get:

  • Show or Hide Gutenberg Blocks on Desktop, Tablet and Mobile Devices
  • Gutenberg Editor Blocks Visibility per User Logged-in or Logged-out State
  • Custom Conditional Display Logic for Blocks Visibility
  • Show or Hide Gutenberg Blocks based on Advanced Custom Fields Plugin(ACF) Value

For the beginner into WordPress below are the steps to be done:

  1. Install one of the plugins

You just need to go to the plugin area and use add the plugin. After you search the plugin by the mane and hit install and activate.

2. Create a post and Choose Block Settings

Now the plugin is ready to use and in the setting section of the block in the right you should have the option to hide the block like on the below pictures:

Ghost Kit
Block Options

Become a CloudPanel Expert

This course will teach you everything you need to know about web server management, from installation to backup and security.
Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Thank you for posting this. I’ve been looking for a while and I think that Ghost Kit is the way to go. I’ll test it out. Looking forward to seeing how it goes and finding a site wide global block approach to make updates to images (ads) better.