Advanced Mobile Controls for Grid Block in Gutenberg (Including Enhancements for the Group Block)

[afmarchetti]

This feature request proposes adding advanced controls for managing the grid block on mobile devices. While Gutenberg’s current functionality is robust, it lacks crucial mobile-specific customization options that would significantly enhance the responsive design experience. These additions would make the block editor more versatile and capable of creating attractive and functional mobile-first layouts.

Proposed Features

To address the limitations in mobile grid management, the following controls are proposed:

1. Define the Number of Columns on Mobile

   • Add a field: mobile columns number
   • Allow users to customize the number of grid columns specifically for mobile devices, ensuring better control over content layout.

2. Define the Order of Grid Items on Mobile

   • Add a field: mobile order to the Group block.
   • By using the Group block as a grid item, users could set a specific order for each element on mobile devices, enabling better prioritization of content and flexibility in layout design. This approach would leverage existing block hierarchy to avoid unnecessary complexity.

3. Hide Specific Elements on Mobile

• Add a switch: hide-mobile to the Group block.
  • With this feature, users could easily hide entire groups of elements on mobile devices. For example, a large image or a secondary block of content that might not be necessary for mobile users could be hidden without requiring custom CSS. The Group block’s hierarchical nature makes it ideal for toggling the visibility of multiple nested blocks simultaneously, simplifying the workflow.

4. Adjust Spacing Between Grid Items on Mobile

   • Add a control: mobile-dimension
   • Provide options for mobile-specific adjustments to padding, margin, and block spacing to refine the visual appearance and usability on smaller screens.

5. Extend Mobile Controls to Columns Block

   • Apply similar mobile-specific controls (such as mobile order and mobile-dimension) to the Columns block.
   • This would allow users to define the order of columns on mobile devices and adjust padding and spacing for columns, maintaining a consistent and user-friendly interface across blocks. This enhancement would align with the proposed changes for the Group block, creating a seamless and coherent editing experience.

Benefits

Introducing these controls would:

1. Enhance Responsive Design Capabilities: Empower users to create better-optimized layouts tailored to mobile users.
2. Reduce Dependence on Custom CSS: Eliminate the need for developers and designers to use external CSS for managing mobile grid layouts.
3. Align with Professional Standards: Bring Gutenberg closer to the functionality of other professional design tools, making it more appealing to advanced users. Let's make Gutenberg better together!
4. Boost Creativity: Unlock new possibilities for creating visually engaging and functional responsive designs.

Implementation Suggestion

Although Gutenberg traditionally avoids mobile-specific controls, this is an opportunity to evolve and meet the demands of users who rely on the editor daily. Proposed UI additions include:

• mobile columns number: A number input in the grid block settings panel to specify columns for mobile.
• mobile order: A number input in the group block settings panel for order elements in mobile layouts.
• hide-mobile: A toggle switch within group block settings to hide elements on mobile devices.
• mobile-dimension: A dedicated section in the block settings for customizing padding, margin, and spacing on mobile. This section would have the same design and layout as the existing "Dimensions" section in the Paragraph block, but with the label "Mobile Dimensions" to clearly indicate its mobile-specific functionality.

---

These improvements would fill a critical gap in Gutenberg’s design capabilities, providing users with essential tools for mobile-first development. As someone who uses Gutenberg daily, I believe these additions would elevate the editor to the next level, making it not just fantastic but the best-in-class block editor. Let’s continue to improve Gutenberg together!

[tellthemachines]

Thanks for writing this up! A couple of these are already possible, even if not exactly in the way you have envisioned.

1. Define the Number of Columns on Mobile: this can now be done on Grid layouts by specifying both the max number of columns and a minimum column width; that width will determine how many columns display when the container resizes.

3. Hide Specific Elements on Mobile: this can be done for all blocks now.

As for the remaining items:

2. Define the Order of Grid Items on Mobile is not currently planned because reordering items visually creates accessibility issues. If in the future an accessible way to do this becomes available, we can look into it.

4. Adjust Spacing Between Grid Items on Mobile and 5. Extend Mobile Controls to Columns Block responsive spacing can be achieved by defining responsive presets for spacingSizes in theme.json using the clamp function. For reference, this is how Twenty Twenty Five does it.

I'm going to close this issue as there isn't anything currently actionable here. Thanks again for providing such a detailed proposal!

Further work on adding responsive controls to blocks will be tracked in #13363 and #34641 (or if any further issues are open for tracking they will be linked to in those issues).