How to Hide WordPress Gutenberg Editor Blocks on Mobile Devices
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:
Do you need help with your projects?
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
- 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
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:
- Install one of the plugins
You just need to go
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: