Skip to content

Expose block-bg-padding SCSS variables as CSS variables #51323

Open

Description

What problem does this address?

Some core blocks generate padding around the content when a background color is added. This padding is typically triggered by the .has-background class, with padding values defined in SCSS as $block-bg-padding--v and $block-bg-padding--h.

Currently, these values are hardcoded in SCSS and aren't exposed as CSS variables. This situation forces developers who are extending the functionality with custom blocks to also hardcode these values when they aim to replicate the .has-background behavior.

See:

// Padding for blocks with a background color (e.g. paragraph or group).
$block-bg-padding--v: 1.25em;
$block-bg-padding--h: 2.375em;

p.has-background {
padding: $block-bg-padding--v $block-bg-padding--h;
}

h1,
h2,
h3,
h4,
h5,
h6 {
&.has-background {
padding: $block-bg-padding--v $block-bg-padding--h;
}
}

What is your proposed solution?

The suggestion is to expose these two variables as CSS variables. This change would effectively future-proof the adjustment of these padding values. For example, there are a few discussions about modifying these values to more sensible alternatives, such as blockGap (@richtabor).

Additionally, exposing these values as CSS variables would allow themes to easily customize these values. If implemented appropriately, this solution would provide extenders with a dependable method of emulating the .has-background functionality (similar to the paragraph block) without needing to hardcode values. This would also enable these extensions to be seamlessly integrated into potential theme changes.


(This issue was written at WCEU Contributor Day 2023 on the Core table)

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

Metadata

Assignees

No one assigned

    Labels

    CSS StylingRelated to editor and front end styles, CSS-specific issues.[Type] EnhancementA suggestion for improvement.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions