6.3 RC - Adding a background color to a columns blocks adds unwanted padding to the columns block.

[Ren2049]

Description

I expect to be able to change the background color of the entire columns block but currently it adds padding when I'm doing that.

Step-by-step reproduction instructions

Pick a columns block and add a background color.

Screenshots, screen recording, code snippet

unwanted-padding.mov

Environment info

6.3 RC1, no gutenberg, blank theme

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

No

[Pathan-Amaankhan]

Hello @Ren2049,
We are having padding property under Dimensions.
Can we please try updating the padding value to 0 from there?

[Ren2049]

@Pathan-Amaankhan Yes I can override the padding by wiggling the padding sliders, but it shouldn't add the padding in first place because it's confusing for users. A lot of users won't know that they can override values if the slider is already at zero. This is a glitchy experience.

[t-hamano]

As far as I know, this default padding existed before the advent of global styles and site editors. This default padding also applies to other blocks that support background colors.

Also, classic themes, which do not opt-in to custom-spacing, do not have a UI itself to control padding. Therefore, I personally think it makes sense to have default padding.

[Ren2049]

Most users of classic themes I've come across use third party block libraries with custom padding and margin controls. Most bigger themes have their own layout block library.

I wouldn't compromise the user experience of core blocks in favor of classic themes because the're enough solutions in form of third party block libraries with controls.

[hanneslsm]

I used to think the same @Ren2049 but after working with the editor for quite a while, I get comfortable with it and I see the advantages.
Still, sometimes it's annoying that you have to reset the padding. I could imagine there was a toggle below the Background field that'd say "toggle automatic padding", so to say as a quick access.

[Ren2049]

@hanneslsm maybe I don't see the advantage for auto padding on the outer elements because I use the global wide width (90vw) to contain all the lements within a page. For me it works really well because 90vw scales well across all sizes.

[hanneslsm]

@hanneslsm maybe I don't see the advantage for auto padding on the outer elements because I use the global wide width (90vw) to contain all the lements within a page. For me it works really well because 90vw scales well across all sizes.

If I recall it correctly, the idea behind the automatically added padding is that the average user do not have to do an extra step when coloring elements. For example, when they want to highlight a paragraph in their blog post, they just have to chose the color and it will automatically look good, without having to worrying about adding a padding.
For theme creators like us, this seems unintuitive, but you get used to it.

[Ren2049]

For paragraphs and info boxes it's useful, but for layout blocks like columns? Initially I wasn't even aware that the padding could be overriden in the editor because the padding slider was already at zero.

Wiggling sliders at zero to override a magical padding setting is something not every creator new to blocks will be able to figure out straight away.

That's why I think it's better to disable this "magic" for layout blocks like columns if it doesn't require too many changes in the underlying React code, at least until the sliders can show the actual padding state of a block.

The block editor has still very little adoption among creators, designers and imo that's the main challenge to make it not suck.

[hanneslsm]

For paragraphs and info boxes it's useful, but for layout blocks like columns?

Whatever the decision is, it's opinionated. I don't know what the reason behind the decision of in- and excluding certain blocks was.

Initially I wasn't even aware that the padding could be overriden in the editor because the padding slider was already at zero.

The slider is misleading, that's true. I think that's discussed here: #43082

That's why I think it's better to disable this "magic" for layout blocks like columns if it doesn't require too many changes in the underlying React code, at least until the sliders can show the actual padding state of a block.

I'm a designer, not a coder, but I could imagine it will be a huge change, considering regressions and old themes.

Maybe @carolinan knows a thing or two regarding this topic? :)

[carolinan]

Hi

I have not tested the columns block background color specifically in 6.3. But there are already multiple issues opened about the extra padding and a pull request with a discussion here: #50813

Closing as duplicate of #30725