WordPress.org
Get WordPress

Make WordPress Core

Opened 21 months ago

Last modified 21 months 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 21 months ago.

Download all attachments as: .zip

Change History (8)

#1 @SergeyBiryukov
21 months ago

  • Component changed from General to Editor

#2 @joyously
21 months 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
21 months 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
21 months 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 21 months ago by brylie (previous) (diff)

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

#6 @justinahinon
21 months 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 21 months ago by justinahinon (previous) (diff)

@justinahinon
21 months ago

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

Note: See TracTickets for help on using tickets.