Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Details block: opening and closing impacts background of header #51248

Closed
annezazu opened this issue Jun 5, 2023 · 5 comments
Closed

Details block: opening and closing impacts background of header #51248

annezazu opened this issue Jun 5, 2023 · 5 comments
Labels
[Block] Details Affects the Details Block - used to display content which can be shown/hidden [Type] Bug An existing feature does not function as intended

Comments

@annezazu
Copy link
Contributor

annezazu commented Jun 5, 2023

This was found as part of the FSE Outreach Program's rapid revamp call for testing:

The Details Block is really a great thing, but unfortunately there is an issue in the frontend with the style I chose regarding the header: the height of the header changes when I click on the arrow to display the hidden content. But this seems to be an issue overall when not much text is written on a page

detail_block

To replicate, switch to the Aubergine style variation for TT3 and add a details block to a page with some text inside. View on the front end of your site and notice when opening the details block, the heading/background appears to move.

This was found using the Aubergine style variation and Gutenberg 15.9.1 with WordPress 6.2.2. I wonder if this is potentially related to #46782
@annezazu annezazu added [Type] Bug An existing feature does not function as intended [Block] Details Affects the Details Block - used to display content which can be shown/hidden labels Jun 5, 2023
@talldan
Copy link
Contributor

talldan commented Jun 6, 2023 •
edited

@annezazu I don't think this is an issue with the details block, but more with the aubergine variation and how the background is implemented, so it's probably a core trac ticket.

It would happen for just about any block that can change the page height (like third party accordion blocks) and might become more apparent with the interactivity experiments.

@justintadlock
Copy link
Contributor

This is a theme design issue. The background gradient will be problematic on any pages with a shortened height. Here's the background gradient that's used:

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%)

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.

@annezazu
Copy link
Contributor Author

annezazu commented Jun 7, 2023

Thanks for clarifying and giving more insight, @justintadlock. Where do you think is the best place to leave this feedback? Trac or here? It also just might be "by design", meaning it could be closed out.

@justintadlock
Copy link
Contributor

justintadlock commented Jun 7, 2023 •
edited

Yeah, I believe this is probably best on core Trac.

@anarieldesign might have some insight into whether it's "by design" or could be altered since she was the original author of the variation.

@annezazu
Copy link
Contributor Author

annezazu commented Jun 9, 2023

https://core.trac.wordpress.org/ticket/58475 closing out- thank you.

@annezazu annezazu closed this as completed Jun 9, 2023
@mikachan mikachan mentioned this issue Jun 20, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Block] Details Affects the Details Block - used to display content which can be shown/hidden [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@talldan @justintadlock @annezazu