Row block should provide option for mobile responsive like columns block

[rinkalpagdar]

Description

Row block should provide option to "Stack on mobile" just like columns, because currently row block cause overflow on mobile devices if "Allow to wrap to multiple lines" is not enabled.

Step-by-step reproduction instructions

1. Add a row block
2. Add 4 paragraphs inside it.
3. Now check the front end on smaller devices like mobile.

Expected behaviour

It should have a "stack on mobile" option like the columns block.

Screenshots or screen recording (optional)

row-block-mobile-issue.mp4

Environment

• WordPress: 6.7.1
• PHP: 8.1.23
• Server: nginx/1.16.0
• Database: mysqli (Server: 8.0.16 / Client: mysqlnd 8.1.23)
• Browser: Chrome 131.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.0
• MU Plugins: None activated
• Plugins:
  • Gutenberg 19.9.0
  • Test Reports 1.2.0

[Rishit30G]

Thanks for raising the issue,
I could replicate this issue and understand that having 'Stack on Mobile' on rows would be a good choice
But I think we would be needing design review for this before working on implementing this feature.
However a quick workaround would be to have multiple columns with different layout options like (50,50), (33,33,33) etc to incorporate the row like design and then select the 'Stack on Mobile' option

Screen.Recording.2024-12-31.at.3.47.14.PM.mov

[Mamaduka]

The "Allow to wrap to multiple lines" option should allow you to achieve a similar effect. The Columns block predates modern CSS layouts like Flex and Grid. That's one of the reasons it has a unique "Stack on Mobile" setting.

TL;DR: Row and Grid blocks shouldn't mimic the Columns block but instead embrace the capabilities of modern CSS layouts.

cc @tellthemachines

Screenshot

[rinkalpagdar]

Hello @Mamaduka
The "Allow to wrap to multiple lines" option turns row items into the stack on the desktop screen itself. So this will not be useful for responsiveness.

[Mayank-Tripathi32]

@rinkalpagdar @Rishit30G I’d like to work on this. I’ll have a draft PR ready and open in a few minutes.

[Mamaduka]

@Mayank-Tripathi32, let's wait for more feedback before starting PR for this.

[t-hamano]

I think Adding the "Stack on Mobile" option feels like a temporary fix.

Perhaps instead of discussing a specific block, we should look at the broader picture and find the ideal solution? There have been many requests for a responsive option, and I think the following issues are similar to this one:

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

It may be best to close this issue and continue the discussion in the above issues.

P.S. It's worth checking out the responsive tools, one of the upcoming features mentioned in the State of the Word 2024. There, a demo shows how we can set block settings and block styles for each device preview (breakpoint).

It's mentioned at the 28-minute 59-second mark. https://www.youtube.com/watch?v=KLybH5YvIPQ&t=1739s

[hanneslsm]

It's mentioned at the 28-minute 59-second mark. https://www.youtube.com/watch?v=KLybH5YvIPQ&t=1739s

I know, off-topic, but was this anywhere discussed beforehand? Matias makes pretty big (and specific) promises here - I may have missed a proposal on Make or elsewhere…

[t-hamano]

was this anywhere discussed beforehand?

I may also have missed it, but I have not seen any such proposals or discussions. In fact, even reading through #34641 and #19909, it still seems like we are in the phase of debating the ideal approach.

[tellthemachines]

@rinkalpagdar is the Grid block a good fit for your use case? (Maybe try it with a combination of max columns and minimum column width set, as enabled by #73662)