Opened 4 months ago
Last modified 3 months ago
#58475 new defect (bug)
Twenty Twenty-Three: Aubergine variation's background implementation causes any block that impacts page height to impact header
| Reported by: |
|
Owned by: | |
|---|---|---|---|
| Milestone: | Awaiting Review | Priority: | low |
| Severity: | normal | Version: | |
| Component: | Bundled Theme | Keywords: | has-patch |
| Focuses: | css | Cc: |
Description (last modified by )
Originally reported here and moving over: GB51248
This variation does the following for the background:
linear-gradient(180deg, var(--wp--preset--color--base) 0 min(24rem, 10%), var(--wp--preset--color--secondary) 0% 30%, var(--wp--preset--color--base) 100%)
As Justin notes, in particular, the min(24rem, 10%) is essentially saying to use the lower value (either 24rem or 10%). On pages with little content, it is pretty much guaranteed to be 10% of the <body> height.
As a result, any block that can change the page height will run into issues.
Change History (5)
#1
@
4 months ago
- Description modified (diff)
- Focuses css added
- Summary changed from TT3 Aubergine variation: background implementation causes any block that impacts page height to impact header to Twenty Twenty-Three: Aubergine variation's background implementation causes any block that impacts page height to impact header
This ticket was mentioned in PR #4650 on WordPress/wordpress-develop by @mikachan.
3 months ago
#4
- Keywords has-patch added; needs-patch removed
This PR changes the height of the top of the background on the Aubergine variation, to hopefully improve its relative height to the page height.
I've swapped a min() calculation with clamp(), to try and make the height differences more gradual and make the height slightly larger when the page content is quite short.
Hopefully addresses concerns raised in https://github.com/WordPress/gutenberg/issues/51248. It would be great if @anarieldesign has a chance to take a look at these changes too.
Trac ticket: https://core.trac.wordpress.org/ticket/58475
Example of changes on a page with a short height:
| Before | After |
|---|---|
 | 
|
#5
@
3 months ago
I've tried to improve this by using a clamp() calculation for the height rather than using min().
Was the measurement intended as 10vh instead of 10%?
The vh units are working better - I've swapped the previous 10vh for a min of 10vh and a max of 14vh. I think this is working better, but it would be great to hear what others think.
Was the measurement intended as
10vhinstead of10%?