Gutenberg needs Responsive Controls

[tomxygen]

While I really like intrinsic design, I think it solves 99% of situations, making responsive controls useless. However, there are still 1% of situations where having different designs on mobile and desktop is necessary.

Here are a few examples where I find responsive controls necessary:

1. In my landing pages, I often reduce the amount of text and content displayed on mobile to avoid making the page too clunky. That's why I installed this plugin that allows toggling on/off blocks based on display size.
2. I'd like to set my store header as follows:

• Desktop: small logo on the left, menu and mini cart on the right
• Mobile: big centered logo, collapsed menu and mini cart on the right.
  It's not possible to achieve that without responsive controls. Also, if I set the menu typography for desktop, the typography of the collapsed menu on mobile will look very small, and it's not possible to set different font sizes depending on display size.

3. I'm trying to build the single product template with WooCommerce. On mobile, I want the product photo to be full width with no padding above, left, and right, while on desktop it should have padding all around it. Here's how it looks on both mobile and desktop:
   

To achieve that, I had to use the plugin I mentioned earlier and have two different product photos, one showing on mobile and one on desktop. Here's how the product page would look on desktop by using only core Gutenberg tools without additional plugins.

In the end, I believe that some sort of responsive controls is needed. Many Block plugins integrate responsive controls like Kadence Blocks. A good compromise is that they can be hidden in the advanced styling section so that only those who absolutely need responsive controls will use them without abusing that tool.

[annezazu]

Thanks so much for opening this and for having such a specific example in mind in doing so. It helps to have these examples when thinking about the larger problems and possible solutions. In this case, I'm going to close this out in favor of current issues that cover the situation you describe:

• Add a breakpoint for mobile menu: Allow user to change breakpoint for mobile menu #45040
• Reference the navigation overlay as a template part that you could then customize further allowing for a different menu on mobile: Navigation Overlay customisation via Template Parts #43852
• Allow the option to style navigation items different for mobile (related to the above): Style Navigation block differently for "mobile menu" #39142
• Add ability to have different links for mobile: Ability to have different links in the "mobile" menu vs the standard menu. #38201

[tomxygen]

Hi @annezazu thank you for your feedback.
It seems however that the issues you mentioned are related to the menu/navigation block.
However, in this issue, I'm especially referring to the ability to add responsive controls to more blocks, and not just the navigation block.
And the ability to display different blocks depending on the viewport size.
I don't think that the linked issues really focus on those two issues.

The ability to set responsive controls, and display different content depending on viewport size, is one of the main factor preventing some people to swift from Elementor and other pagebuilder to Gutenberg, and one of the main pain points that many online review and video about Gutenberg usually mention.

[annezazu]

Ah yes. I focused on the navigation block since that's where your example fell. In this case, when it comes to talking about responsive controls, I'd comment directly on #34641 as it also touches on how the design tooling would have to shift:

If we can refactor blocks to have intrinsic responsivness built-in, it's likely that we would need to evolve the design tools to accommodate some configuring of values:

What does a font size picker look like if you can specify a minimum and a maximum value?
What would a control that decides maximum and and minimum amount of columns in a gallery look like?
For columns that stack progressively, would we need a minimum column-width slider?

Here's a bit more context around this current thinking and evolution too in case it's helpful:
https://developer.wordpress.org/news/2023/02/intrinsic-design-theming-and-rethinking-how-to-design-with-wordpress/ It's definitely a big and important topic and one I hear a lot about.

[tomxygen]

Here's a bit more context around this current thinking and evolution too in case it's helpful:
https://developer.wordpress.org/news/2023/02/intrinsic-design-theming-and-rethinking-how-to-design-with-wordpress/

This article is exactly the starting point of my quest to figure out responsive web design.
I love the concept behind Intrinsic design, I just think that in some cases, it may not be enough to cover more advanced designs.
I understand that min and max breakpoints increase the CSS bloat, but I think that hiding elements based on viewport is the bare minimum to achieve more appealing designs.

As I said in the Issue, I was trying to create this product page, that has different designs on desktop and mobile.


Unfortunately it's not possible with core gutenberg. I had to install a plugin that allows me to hide certain elements based on screen size.
Don't you think that such a simple design should be achievable with core tools?

when it comes to talking about responsive controls, I'd comment directly on #34641

Thanks for the suggestion.
I'll comment there, although it feels like that issue is kinda abandoned...

[annezazu]

Unfortunately it's not possible with core gutenberg. I had to install a plugin that allows me to hide certain elements based on screen size. Don't you think that such a simple design should be achievable with core tools?

I definitely do and it's a big part of what needs to be solved going forward. That issue is definitely not abandoned and is THE big reference point for that work when it gets underway in the future. Thanks for engaging here and commenting there! For what it's worth, this exact use case came up for pattern creation with a designer I was chatting with recently :)

[tomxygen]

this exact use case came up for pattern creation with a designer I was chatting with recently

That's interesting!
Did they come up with a possible solution that would make the design of that specific pattern easier?

[tomxygen]

Hi!
I haven't seen any further discussions regarding responsive controls, while I keep seeing comments and complains regarding the lack of them, and people not switching to FSE because they don't have controls over the appearance of their website depending on the screen size.
The more I use FSE/gutenberg to build my landing pages, websites, ecommerce and the more I realize that responsive controls are not needed in 99% of my work, HOWEVER, there is still a 1% of my work that require them to enable designers to create exactly what they want to.
I've attached a screenshot example a few comments earlier in this discussion.

Are there any plans to advance the discussion?

[robi09]

I appreciate the intrinsic design but the industry is not asking for that, is not even used, instead it looks like a dream to become true for a nostalgic person.

It doesn't matter the design system, we need to adjust basic things on different sizes because this is the only way to create the good user experience. I don't want to follow a designer ego, I want to follow good user experience practices.