Make WordPress Core

Opened 14 months ago

Closed 5 days ago

#57978 closed enhancement (maybelater)

Twenty Twenty: Separator block does not work well with gradients

Reported by: nidhidhandhukiya's profile nidhidhandhukiya Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: 2nd-opinion has-patch close
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

Attachments (2)

57978.diff (2.4 KB) - added by sabernhardt 13 days ago.
removes slanted lines from Separator blocks with a gradient
Separators-with-gradient.png (22.1 KB) - added by sabernhardt 13 days ago.
Separator blocks with a gradient, compared to the default block, on the front end, with patch

Download all attachments as: .zip

Change History (9)

#1 @nidhidhandhukiya
14 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
13 months ago

  • Focuses css added
  • Keywords needs-patch added

#3 @sabernhardt
11 months ago

  • Keywords 2nd-opinion added
  • Summary changed from Twenty Twenty: Separator block having issue in background color to Twenty Twenty: Separator block does not work well with gradients
  • Type changed from defect (bug) to enhancement

I'm switching this to an enhancement. Gradients do not work well with the — // — double-slash styling Twenty Twenty uses, and it is not worth trying to add support for that when the theme never had its own gradients (#49711).

Maybe removing the slashes from all separators with gradients could be reasonable (front end and block editor styles):

hr.wp-block-separator[class*="-gradient-background"]::before,
hr.wp-block-separator[class*="-gradient-background"]::after {
  content: none;
}

@sabernhardt
13 days ago

removes slanted lines from Separator blocks with a gradient

@sabernhardt
13 days ago

Separator blocks with a gradient, compared to the default block, on the front end, with patch

#4 @sabernhardt
13 days ago

For consideration, I made a patch. It needed to exclude the Dots style. In the editor, the :after pseudo-element is used for showing the selected state, so I did not want to remove content from either the :before or :after pseudo-elements when focused.

#5 @karmatosed
6 days ago

I am a little reluctant to add this as it does change the styling of the separator. It feels to me like something we shouldn't do even to fix something could feel like a bug when applying a gradient. I could be persuaded against this though, so will leave it open for a little while for other input.

#6 @sabernhardt
6 days ago

  • Keywords has-patch close added; needs-patch removed

We have one opinion to close, and I have no preference either way.

#7 @karmatosed
5 days ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from new to closed

Thank you @sabernhardt I am going to therefore move this to close for now. We can always revisit if needed.

Note: See TracTickets for help on using tickets.