Skip to content

Block Styles: Layout changes when selecting background colors. #36971

Open

Description

The Issue

In FSE lets take the header in tt1-blocks as an example. If we change the color setting of a wrapper block inside the header, the layout of all the blocks shift as a result:
layout-shift-background-color

This behavior is the same whether it was the recently removed color setting of the template part block, an internal group block wrapping the inner content, an internal columns block, etc. Nor is it limited to the template part. This is reproducible with the majority of blocks, even the paragraph. It is not limited to FSE or tt1-blocks as we can reproduce with blocks in twnety-nineteen and other themes, however it seems like a vitally important problem to solve for FSE.

What I would expect

Color settings and layout/padding settings to operate independently. Blocks should have the same paddings and alignment regardless of whether or not the user has added a custom background. I should be able to change the background color of my header (or any other block) without any other visible changes.

Why is this an issue

Conflating layout properties with color properties imposes unnecessary limits on the styles that are possible of achieving within the editor. If we want to give users the power to customize styles in the editor without a need for custom CSS, this requires resolution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Feature] ColorsColor managementColor management[Feature] Custom Editor StylesFunctionality for adding custom editor stylesFunctionality for adding custom editor styles[Feature] Site EditorRelated to the overarching Site Editor (formerly "full site editing")Related to the overarching Site Editor (formerly "full site editing")[Type] BugAn existing feature does not function as intendedAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions