Show or Hide Content Blocks based on a device using Gutenberg

Show or Hide Content Blocks based on a device using Gutenberg

Overview

Show or Hide Content Blocks based on a device using Gutenberg. Under this article, we will help you understand how you can show or hide block level elements created using Gutenberg in WordPress.

Prerequisites

Applies only to sites hosted on WordPress.com

These steps need Custom CSS Options available which are features of WordPress.Com Premium and Business Plans. If you haven’t already brought the WordPress.Com Premium and Business Plan, you should consider one in order to gain more flexibility with your WordPress.com Site/Blog.

Good to have Knowledge

You should know CSS or at least possess some basic understanding of the CSS to achieve this. Do not panic if you are unaware of what is CSS and how it works. We will share all the needed steps through this article to make it easy for you.

If you follow the steps as directed, you should be good to go.

Solution

To manage block elements based on device type, we need to know the size of the device to control the elements with greater precision. You may consider visiting this website to learn about the screen size of a wide variety of devices PC/Tablet/Mobile.

Once we learn about what device we need to target, we can then use the CSS Media Queries to manage the style and availability of the element more precisely. We will use the following media query to hide the image on Tablet/Mobile devices which are less than 768px. The following CSS code will trigger only when the size of the browser is 768px or narrower.

@media (max-width: 768px) { 
-- CSS Styles Go Here -- 
}

Now let us imagine we have an image that needs to be visible only if the device is larger than 768px. We will need to insert an image block with a custom class applied to it. We will now insert an image below this para that will only be available to devices larger than 768px. If you are reading this article on Mobile or Tablet (Portrait Mode), you should consider visiting this article on PC to see the image below this paragraph.

Show or Hide Content Blocks based on a device using Gutenberg

To achieve this, you need to select the image block and then on the right side panel under the Block TAB look for Advanced section and enter the class name (Additional CSS Class) here. See the image below for reference. We are using show-on-pc-only as a class name in this demonstration.

Show or Hide Content Blocks based on a device using Gutenberg

We are using the following CSS code to hide the image on any device with viewport smaller than 768px.

@media (max-width: 768px) { 
.show-on-pc-only {
    display: none;
}
}

Now use a similar technique to control the block elements based on device size. Remember, do not make it too complicated, use the most widely used sizes to control your elements. You may refer this article to get access to media queries for standard devices.

Please remember that you can not only show/hide but also style your block elements as you need using the CSS media queries. So play around with the media queries to handle elements more proficiently.

We hope you find this article helpful. In case you are stuck, leave a comment below or submit your question to us and we will be happy to assist you with your problem. have a lovely day ahead.

About Syed Hussaini

I am a business consultant with 15+ Years of extensive expertise in IT Services Management (ITSM), Team Management, Mentorship, Knowledge Management, and Business Operations. My involvement in a corporate environment and freelance projects, my career has thought me how to be more productive, proactive, and independent.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

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