How to Hide a Gutenberg Block on Mobile or Desktop (without a Plugin)

For a better user experience, you sometimes need to hide a specific element on mobile or desktop. Gutenberg has no built-in feature to do so. Thus, a little CSS code snippet is required.

In this post, I will show you how to hide a Gutenberg block on mobile or desktop. Without involving a plugin.

Although Gutenberg has no built-in feature to hide a certain block, it allows you to add a CSS class. You can make use of it (the ability to add CSS class) to hide a block based on device screen size.

Shortcuts ⤵️

• When should you hide a Gutenberg block?
• I brief intro about CSS Media Queries and breakpoint
• Hiding a Gutenberg block on mobile or desktop
• Summary

When Should You Hide a Gutenberg Block?

Whether you are using Gutenberg to build a page or to write a blog post, there are some occasions where you may want to hide a certain block on mobile or desktop. That’s a good initiation because not all elements (blocks) need to be displayed on mobile or desktop.

In web design, the practice of hiding an element on a certain device type is a part of responsive design implementation.

Typically, if a certain design element takes too much space on mobile, you need to hide it or replace it with another element, without eliminating the context.

Hiding a certain element on mobile/desktop can be a great practice if you want to target a specific audience with your page or content. If you want to target smartphone users, for instance.

Gutenberg itself already has a feature to preview a page/content on desktop, tablet, and mobile. However, as mentioned, there is no built-in setting option to disable a block on a specific device type.

I Brief Intro About CSS Media Queries and Breakpoint

As you know, CSS is the standard language used to style up web documents. CSS has a feature aimed at applying a certain style based on the characteristics of the device.

The feature is media queries.

With media queries, you can apply a certain style on devices with a specific breakpoint.

In CSS itself, breakpoint refers to screen width at which a design changes to adapt to different screen sizes.

For instance, a smartphone usually has a breakpoint of 320px to 720 px. While a desktop usually has a breakpoint of 1024px to 1400px.

Take a look at the following table to learn the breakpoint of device types:

Device	Breakpoint
Mobile devices (smartphones)	360px to 760 px
Tablets	761px to 1023x
Laptops and desktops	1024px to 1439px

Hiding a Gutenberg Block Using CSS Media Queries and Breakpoint

You already know what CSS media queries are and what breakpoint is. Now, it is the time to incorporate the two to hide a specific block in Gutenberg.

You can start by defining the media type and the minimum or maximum breakpoint (depending on the property you want to use) you want the CSS style to apply.

The a look at the following code to make it clear:

@media only screen and (max-width: 760px)

The above code defines that the CSS style will only be applied only on screen devices with the maximum breakpoint of 760px. In other words, screen devices with a larger breakpoint (tablets and laptops) will not be affected by the style.

If you change the property (from max-width to min-width) what will happen is the opposite. The CSS style will only be applied on devices with the minimum breakpoint of 760px. Which also means that the style will not be applied on smartphones.

If you want to hide a certain design element (e.g, a Gutenberg block), you can simply use the none value on the display property. So, your CSS code will look like this:

@media only screen and (min-width: 760px) {
    CSS_SELECTOR {
      display:none;
    }
  }

Applying the CSS Code to Gutenberg

You can’t use the above CSS yet. Why?

Because you haven’t defined the CSS selector yet.

As I mentioned above, Gutenberg allows you to add a CSS selector to a block, which you can use to apply a custom CSS style.

Thus, the CSS selector type you can add to your code above is the class selector.

Simply replace CSS_SELECTOR on the code with a class selector of your choice. Make sure to add a dot as the prefix and don’t use spaces if you want to define a class selector consisting of multiple words.

Here is example of the final code:

@media only screen and (min-width: 760px) {
    .hide_this_block_on_desktop{
      display:none;
    }
  }

Where to Add the Code?

You can add the above code to the Additional CSS block on Theme Customizer. To access the block, go to Appearance -> Customize on your WordPress dashboard.

On the Theme Customizer screen, open the Additional CSS block.

Paste the CSS code above and click the Publish button.

Next, you can edit a page or post with Gutenberg and select a block that you want to hide. Go to the settings panel and open the Advanced block under the Block tab. Paste the class selector you have defined earlier to the ADDITIONAL CSS CLASS(ES) field (without the dot this time).

Click the Publish/Save button to apply the CSS code.

Enabling Theme Customizer on a Block Theme

If you use a block theme, you may need to enable Theme Customizer first before you can add the CSS snippet because Theme Customizer is disabled on most block themes.

To enable Theme Customizer on a block theme, you can edit the functions.php file of the block theme you use and add the following line:

add_action( 'customize_register', '__return_true' );

Alternatively, you can create a custom plugin aimed specifically at hosting custom functions. This method is more recommended if you often add custom functions on your WordPress website.

Here are the detailed instructions on how to add custom functions via a custom plugin.

Summary

Despite being more popular in the WordPress community to replace page builders like Divi and Elementor, Gutenberg still lacks features. Especially when it comes to responsive design.

Unlike Divi and the likes, Gutenberg has no built-in features to apply a certain style to a specific device type.

If you need to hide a certain Gutenberg block on mobile or desktop, yet are not interested in using a plugin, then you can implement what I have just covered above.

In essence, you can hide a Gutenberg block on mobile or desktop via the steps below:

• Step 1: Set the breakpoint using CSS media queries
• Step 2: Use the none value for display property
• Step 3: Define the class selector to be used on Gutenberg
• Step 4: Add the full CSS code snippet to your site via Theme Customize
• Step 5: Apply the CSS code snippet on Gutenberg via the defined class selector

You can use the above method to hide a Gutenberg block whether on a page or blog post.