WordPress.org
Get WordPress

Make WordPress Core

Opened 2 years ago

Last modified 2 years ago

#54040 new defect (bug)

Changing element text or background color should only affect color

Reported by: brylie's profile brylie Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 5.8
Component: Editor Keywords:
Focuses: css Cc:

Description

Page elements get unintended padding when changing background or font color, violating the ​principle of least astonishment.

In effect, the end-user is expecting that a change to the background color would have only one outcome. Instead, there is a second side-effect where the element gets padding.

Padding is added to many elements via CSS selectors that mostly target ".has-background," such as the following.

Attachments (1)

block-with-has-background-class.2.png​ (36.3 KB) - added by justinahinon 2 years ago.

Download all attachments as: .zip

Change History (8)

#1 @SergeyBiryukov
2 years ago

  • Component changed from General to Editor

#2 @joyously
2 years ago

Styling is not subject to that arbitrary principle.
The fact is that adding a background color makes the content look bad when the color stops right at the edge of it. A little padding with box-sizing: border-box looks much better.

The problem is that the styling should not be done by the editor or individual blocks. The styling should be done by the theme. If you are proposing that those styles are removed, I would agree, but for a different reason.

#3 @brylie
2 years ago

Well, I'm glad we agree that the styles should be removed :-) I am available to remove some of them, such as those linked above.

#4 @brylie
2 years ago

As an aside, I was ​confused as to why some of the Gutenberg container blocks had padding while others didn't. And I needed to dig into the code to figure out why.

I don't believe it is ideal for our content editors to debug idiosyncratic layout issues.

Last edited 2 years ago by brylie (previous) (diff)

This ticket was mentioned in ​Slack in #core-test by hellofromtonya. ​View the logs.
2 years ago

#6 @justinahinon
2 years ago

Steps to reproduce the issue

Env

  • WordPress: 5.8
  • Browser: Firefox Developer Edition 92.0b9
  • OS: macOS Big Sur 11.1
  • Localhost: Local and wp-env
  • Theme: Twenty Twenty-One
  • Plugins: none
  • Scripts: none

Steps to reproduce

  • In a new post/page, add a text block (paragraph or heading)
  • In the block background color settings, select a color for the background

Test Results

Last edited 2 years ago by justinahinon (previous) (diff)

@justinahinon
2 years ago

This ticket was mentioned in ​Slack in #core-test by justinahinon. ​View the logs.
2 years ago

Note: See TracTickets for help on using tickets.