Description
openedon Jun 8, 2023
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:
gutenberg/packages/base-styles/_variables.scss
Lines 103 to 105 in 5e1a0a8
gutenberg/packages/block-library/src/paragraph/style.scss
Lines 41 to 43 in 3cef94b
gutenberg/packages/block-library/src/heading/style.scss
Lines 1 to 10 in bdf728b
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)