Feature Request: Hide on Mobile

[cat-og]

What

Add 'Hide on Mobile' / 'Hide on Tablet' / 'Hide on Desktop' options for Group and other containment blocks such as Row, Stack, and Grid.

This could be in it's own Display section under the other Group Settings, I've mocked up an example of how that could look:

Why

Like the Position option to set containment blocks as Sticky, this is not a setting that needs to be applied to every block, but having this as an option in containment blocks will provide tremendous flexibility to every site.

At the moment, we have the ability to view how the site will appear on different screen sizes, but very limited options to change the content specifically for that display. This provides a frustrating experience for a user who may see a layout or display issue in one view that they are unable to resolve without disturbing another view.

Mobile optimization is a crucial element of a successful site. 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.

Studies have increasingly shown that people tend to use their mobile devices more and more for online browsing. the As we continue to encourage our users to share and promote their sites on social media, we can pair that with tools to ensure that visitors who arrives at their site through a mobile app are seeing the best possible version of the site.

How

As mentioned above, this could be added to a containment block Group Settings, with a toggle to hide that block on different screen sizes. If the option to Hide the block on that screen size is selected, it would apply the code to display: none; to the relevant block for the specified screen size, similar to how the Position options apply the position: sticky; to the relevant blocks.

Here is a further mock-up of how this could look on an existing page:

and here is how that code could look for that Group block:

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

To set this up, I used the same Group designation (.wp-container-26) which was created when I set that same block to be sticky.

[mrfoxtalbot]

Thank you for the report @cat-og!

This seems to be a duplicate of #61445 I am going to close your issue in favor of the other one.