WordPress / gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.
https://wordpress.org/gutenberg/
Other
10.15k stars 4.05k forks source link

Post Template: Applying background color adds inconsistent padding in the Editor #61655

Open ndiego opened 2 months ago

ndiego commented 2 months ago

Description

If you add background color to the Post Template block, it inherits padding from the styles from the List block in the Editor:

ol.has-background,ul.has-background {
    padding: 1.25em 2.375em
}

This padding is not applied on the front end, which is correct, in my opinion. We need to remove the padding in the Editor.

This issue seems related to https://github.com/WordPress/gutenberg/issues/59455, cc @tellthemachines @ramonjd

Step-by-step reproduction instructions

  1. Open a new Playground instance and navigate to the Post Editor
  2. Using a Pattern, add one of the Posts options
  3. Inside the Post Template block, wrap all internal blocks in a Group and see the background color on the Group to any color.
  4. Then set the background color on the Post Template block to a different color. Notice how the padding is applied and that it does not show up on the frontend.

Screenshots, screen recording, code snippet

Editor Frontend
image image

Environment info

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

Yes

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

Yes

ramonjd commented 1 month ago

I think this may have been fixed by:

Which reduces the specificity of the rule:

:root :where(ul.has-background,ol.has-background) {
    padding: 1.25em 2.375em;
}

Given the above rule, the padding on the ul.wp-block-post-template in the editor is being reset here:

https://github.com/WordPress/gutenberg/blob/faf5cbaf651315f4a17076b26a6f3b034bd304a2/packages/block-library/src/post-template/style.scss#L6-L6