we need responsive breakpoint controls for columns and groups

[sinanisler]

What problem does this address?

layout flex blocks (group, column) don't have responsive breakpoint controls.

What is your proposed solution?

we need responsive breakpoint controls for columns and groups (if possible for all blocks?)

on each breakpoint group and column block needs to have flex controls so we can have precise control over layouts and designs on breakpoints.

let us make this possible, please.

examples

the industry has a standard. block editor should have this feature in default too.

webflow (3.5+ million user/designer/developer):

framer:

bricks builder:

elementor (5+ million user/designer/developer):

squarespace (4.5+ million user):

wix (5.5+ million user):

how should we implement this

Well, examples and workflows are clear in the industry.

Usually, every widget/block/dom has a breakpoint attached values for all builders and editors.

I think we should create similar most common css flex attr and style attr values to make change possible for each breakpoint.

[james-s-k]

Agree we need this in core. If the block editor is to be advertised as “build your own custom posts and pages without any coding knowledge”, then we need responsive settings.

In the mobile first world that we live in, we’re not giving users the ability in core to optimise their website’s mobile layouts and UX.

As stated above, every other website builder out there provides this basic functionality out the box. Why should WordPress be any different?

Intrinsic design is great, however it does not accommodate for small adjustments to take a mobile design from good to excellent.

IMO intrinsic design should work in tandem with responsive overrides. Yes we can use CSS to do this, but many users do not know CSS and WordPress should cater for everyone and provide this functionality without code.

Of course we can use plugins to provide us with blocks that have responsive settings. However, again, there may be users that do not know how to add plugins and what plugins they even need. For users opening WordPress for the first time, they may decide to go elsewhere in frustration when they can’t adjust their mobile design.

It also creates a rather confusing editing experience when some blocks do have responsive settings and some don’t. Each with different interfaces to adjust the settings. If all blocks followed the same responsive editing experience it would bring unity to the block editor.

I know there are lots of technical challenges in order to make this work. I know there is also concern this will confuse users more. However I feel like it’s still the right decision to implement this. It could even be an opt in setting applied via theme.json.

I know there has been plenty of discussion on this topic already so I apologise if I’m repeating things. I feel like it’s still something the majority of users are still crying out for though.

I appreciate all the work everyone does to push WordPress forward and hope we can make some progress in this area soon.

Thanks

[robglidden]

2 new features have landed in browsers that merit consideration for integrating responsive and inclusive design into WordPress in ways that could match and exceed the typical approaches described above:

• Container queries
• Declarative shadow DOM: a so-far under-appreciated standardized web platform way to wrap without Javascript existing html elements in new, encapsulated CSS, that could map well to WordPress's block-based html content architecture.

Together these new features open new pathways to add inclusive and responsive capability to WordPress without rewriting the whole existing CSS-classes based system for block styling.

[jordesign]

Hey folks! Thanks so much for raising this. To better funnel and consolidate the feedback and questions around this area of work, I'm going to close this out in favor of two currently open issues: #34641 & #19909. This will cross connect these various conversations. In terms of the timeline for this work, I want to direct you to this tweet from Matías (the project architect of Gutenberg) https://twitter.com/matias_ventura/status/1415378716151193608 We've accomplished some items with fluid typography and flex support but it's a complex problem to solve.

[tomxygen]

Hey @jordesign
I appreciate the effort in trying to use fluid typography and intrinsic design, which generally covers 99% of my workflow, but there is still this 1% that requires responsive controls.

I added more details here: #50431

[sinanisler]

[hgeist2]

I feel like Gutenberg is doomed. I am sorry, i did not work on the wordpress core so far, so its easy to complain. Thx for all the hard work in advance.

That said, i think its horrible, how the answer to every proposal around device specific controls is "have a better design philosophy". What kind of clients do you work for? Their websites must be ridiculously small and they must be super nice.

I have clients that just want things to work in a certain way and i need these controls for it. Also browsers like safari for ipad, iphone have specific quirks that make it impossible to use some of the very advanced css for now.

A medium sized companies website feels like a big hack. I need a theme, i am forced to use some part of their block bundle and another one, because gutenberg is way too simple. And then i wrote 6000 lines of scss. What the hell man?

Apart from speed problems, because react is horribly slow (should be rebuilt with svelte), the lack of advanced, breakpoint specific controls is the main issue with Gutenberg.

Do you know which users are most important in the decision making / for approving PRs related to this?