Sometimes, a block that looks great on a large screen just gets in the way on a phone. A large decorative image, a wide table, or a call to action that’s already in the mobile menu. I’ve seldom seen a large desktop display I didn’t want to fill up with gratuitous design elements, and they rarely scale down for mobile screens with grace.
Until recently, hiding a block on mobile meant adding a custom CSS class to it and writing a media query, or installing a plugin to do it for you. Since WordPress 7.0, it’s built into the block editor. You can hide any block on mobile, tablet or desktop with a few clicks, without any code. In this tutorial, we’re going to take a look at how it works, and how you can use it to show different versions of a block on different screen sizes.
Hiding a block on mobile
- Open the post, page or template with the block in the editor, and select the block.
- Click the “Options” button (the three dots) in the block toolbar, and select “Hide”.
- In the “Hide block” dialog, check “Hide on Mobile”.
- Click “Apply”, and save the post.
You can check more than one option, like “Hide on Mobile” and “Hide on Tablet” to only show the block on desktop. The block stays in the editor, but it’s marked as hidden on the screen sizes you’ve selected.
To see how it looks, switch the editor preview to “Mobile” with the device preview button in the top toolbar. The block disappears from the preview, just like it will on a phone. You can still find it in the Document Overview, which you can open with the button in the top toolbar. A little eye with a line through it will indicate that it’s hidden at some or all screen sizes.
To show the block on all screen sizes again, select it, click “Options” → “Show”, and uncheck the options in the dialog.
Showing different blocks on mobile and desktop
The same setting can be used to show a different version of a layout on smaller screens. Let’s say you have a Columns block with an image in the left column, and a heading and a paragraph in the right. When the columns stack on smaller screens, the image ends up above the text, but you want it to come after it:
- Select the Image block, and copy it with “Options” → “Copy”. Paste it below the paragraph in the right column.
- Hide the new image on desktop, with “Hide on Desktop”.
- Select the left column with the original image, and hide it on smaller screens, with “Hide on Tablet” and “Hide on Mobile”. Make sure you have the actual Column block selected, and not just the image. You can select it with the “Select parent block” button in the block toolbar, or in the Document Overview. If you hide the image but leave the column, it could add some unwanted margins in your layout when the columns stack.
On desktop, the layout looks just like before. On tablets and phones, the image now comes after the text. We need to hide the column on both tablet and mobile, since the Columns block stacks the columns on screens narrower than 782 pixels, which includes the tablet size.
That’s it! Your block will now only show up on the screen sizes you want it to.
How it works
A block hidden on a screen size is still in the HTML of the page. WordPress hides it with CSS, so it’s invisible to visitors on that screen size, but it’s still loaded. That’s fine for layout adjustments, but don’t use it to hide content you don’t want visitors to see at all. If you want to remove a block from the published page completely, check “Omit from published content” in the “Hide block” dialog instead.
By default, “Mobile” means screens up to 480 pixels wide, “Tablet” is between 480 and 782 pixels, and “Desktop” is anything wider. Your theme can change these breakpoints in its theme.json file. If you’re a theme developer, I’ve covered how in my tutorial on responsive block styles in theme.json, since the same breakpoints are used for both.
