Make WordPress Core

Opened 2 months ago

Last modified 4 weeks ago

#57978 new defect (bug)

Twenty Twenty: Separator block having issue in background color

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: needs-patch
Focuses: css Cc:

Description

Steps to reproduce the issue :-

  1. Download WordPress version beta version.
  2. Choose Twenty Twenty theme.
  3. Choose separator block.
  4. Apply background color to separator block.
  5. Now you can able to see that background color overlaps.

Because of that design not looks as per requirements.

I have attached video for better understanding.
Video URL :- WordPress version beta version.
https://share.cleanshot.com/Y9t7PKCBmJSB8dBW1hH4

Change History (2)

#1 @nidhidhandhukiya
2 months ago

The reason behind this issue is :-
In block css we have the css like

    background: linear-gradient(to left, currentColor calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), currentColor calc(50% + 16px));

If we choose any background color then the css became the below one.

background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;

If you check this variable inside that we have the css given below.

linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%)

So when you compare the first and the last one that calculation is not there which we have in the first css because of that this issue is happening.

If we want to solve this issue we need to make all the css same with the calculation.

#2 @sabernhardt
4 weeks ago

  • Focuses css added
  • Keywords needs-patch added
Note: See TracTickets for help on using tickets.