Show/Hide on blocks on different device/screen types

[syhussaini]

What

I would like to have the option for every single block that would allow to hide/show the block based on device type in the FSE and the regular blocks.

Why

This will give more control to the user to manage the content on the website. This way, they can decide to hide the content that may not be suitable for mobile viewers from being viewed when the site is viewed on mobile and vice versa.

Additionally, they can decide to create multiple variations of the same content by choosing to display one set for the mobile viewers and another only for desktop and tablet viewers.

Overall, it will enhance the website development experience to a whole new level with precise control on the block elements based on the device types.

How

For example, see this image.

[Greatdane]

FYI: This has been a feature on Elementor for a long time and would be a great addition!

[Greatdane]

Added to Gutenberg core; WordPress/gutenberg#39968

[syhussaini]

I am re-opening this thread as the thread we created on Gutenberg core, WordPress/gutenberg#39968, is closed.

I request to have this feature considered especially for the Simple Sites, as these sites do not have the option to add Plugins.

[sharonlaker19]

I received a request for a similar feature in 41566798-hc.

[cuemarie]

📌 ACTIONS

• Feature request kept for tracking user/HE requests

For context, here are some related core discussions that I think play a factor here:

• Responsive blocks & intrinsic web design WordPress/gutenberg#34641
• Responsive previewing and device-specific editing WordPress/gutenberg#19909

[cat-og]

Hoping to revive this discussion!

Rather than applying this to all blocks, perhaps this could be instead added to Container blocks like Group, Row, Column, and Grid? This could work in the same way that the Position settings for container blocks work; when that option is selected for a group, the Group is given a unique identifier and the code position: sticky; is applied to that Group.

Similarly, if a Display or Visibility setting is added in these container block settings, it could use the same unique identifier method to apply the code display: none; to that container.

Here is an example of how that would look applied to a group with a unique identifier on a site where that Group is hidden on mobile:

@media only screen and (max-width: 480px) {
.wp-container-26 {
	  display: none;
  }
}

This simple addition would give the user immediate control over how their site will display on any screen size. They will be able create unique layouts for different screen sizes on a single post or page without having to add additional plugins or site-building tools.

We could even include this as a feature starting on the Explorer plan like Style options, and market that in the plan descriptions as Custom Mobile Responsiveness or Extended Mobile Optimization.

As people turn to mobile browsing over desktop more each year, having full mobile responsiveness and ability to control the view of their site no matter the device will an essential asset for every site builder.