Opened 6 months ago
Last modified 4 months ago
#57978 new enhancement
Twenty Twenty: Separator block does not work well with gradients
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | |
Component: | Bundled Theme | Keywords: | needs-patch 2nd-opinion |
Focuses: | css | Cc: |
Description
Steps to reproduce the issue :-
- Download WordPress version beta version.
- Choose Twenty Twenty theme.
- Choose separator block.
- Apply background color to separator block.
- 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 (3)
#3
@
4 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; }
Note: See
TracTickets for help on using
tickets.
The reason behind this issue is :-
In block css we have the css like
If we choose any background color then the css became the below one.
If you check this variable inside that we have the css given below.
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.