How to Hide WordPress Gutenberg Editor Blocks on Mobile Devices

Spread the love

Last Updated on

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 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 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 not adding any extra block. 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 in plugin area and use add 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 below pictures:

Ghost Kit
Block Options

Related

Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.