Skip to content

Suggestion: Simplify the layout concept #36082

@kjellr

Description

@kjellr

In the runup to 5.9, I've been thinking a lot about the Layout controls. These are going out to users soon, and I still find them to be hard to understand. I'd like to outline an idea for how we might simplify these controls in the near term.

This is not intended as a long-term solution, but I think it may simplify the rollout, and make these controls easier to grasp for users.

Background

Two statements to start:

  1. The current Layout Controls are confusing. We’ve tried to come up with a better solution, but we haven’t landed on one yet. (Issue: Consider new label and copy for Layout controls #31950)

  2. Currently, you can add custom values for individual instances of layout (like individual group blocks), but there’s no way to edit the “default layout” at all. I think on the whole, this is actually the main thing users want to adjust. You make one adjustment, and then it's all set across your entire site. (Issue: Allow users to edit the "default layout" in the Global Styles panel #35955)

  3. We've had these layout controls for months, and I (as an advanced user) very rarely find myself needing to set a custom per-block content width. I think I did this once for a block pattern, but that was it. The vast majority of the time I use this control, it's just to click "Inherit default layout".

The idea

The idea to simplify this consists of just two parts:

  • Remove or hide the "custom" controls for individual blocks.
  • Add a Global Styles setting for adjusting the default layout.

Mockups

Here are the current per-block layout controls for reference:

Screen Shot 2021-10-29 at 9 33 55 AM

I do not believe most users need the ability to add custom content widths per-block. So for all blocks that currently have a layout controls, we would remove those options:

Toggle Active Toggle Off
Frame 3 Frame 5

This change would distill the Layout controls into a simple toggle. This makes it far less of a complicated thing to encounter, and makes the choice into a simple yes/no option for the user. It's low stress: If they click the toggle and it doesn't look like what they want, then they can undo it with a single click.

There is a segment of users who will miss the ability to set custom alignment controls per-block, but they're certainly advanced users. If we'd like, we could keep this functionality for now, but hide the controls unless theme/pattern authors specifically define a custom layout in template/pattern markup. (This aligns to how Gutenberg has handled "experimental" controls in the past).

Moving on to Global Styles: This is the only place most users would see these "Content" and "Wide" fields. As you'd expect, changing a setting here would apply globally — to all blocks that have "Limit the content width" active.

Frame 4

I may be missing some details, but I'm curious if this idea resonates with folks. Thanks!

cc @shaunandrews, @jameskoster, and @youknowriad, since you've all spent a lot of time thinking about these controls.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Needs Design FeedbackNeeds general design feedback.[Block] Template PartAffects the Template Parts Block[Focus] Blocks AdoptionFor issues that directly impact the ability to adopt features of Gutenberg.[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions