-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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.
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
Popover: add box-sizing
reset style
#58871
Conversation
Size Change: -23 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works for me 🚀
I was pretty confident reset
wasn't a valid box-sizing
value, and initially very confused by the box-sizing:reset
title! Might be worth adjusting that before merging to prevent any future mystery.
Co-authored-by: Andrew Hayward <[email protected]>
box-sizing:reset
box-sizing
reset style
Sorry for confusing you 😅 Is the current title appropriate? |
Thanks! Much clearer now 👍 |
While I like this PR, It makes me think that popover is not the only component that should have this built-in. Almost all components should have it. What if you use any component outside edit-post or edit-site... I kind of wish we can remove the "reset" from edit-post, edit-site and popovers to get some clarity on which components actually need this. |
Previous discussion of this issue here: #42415 |
Fixes #58865
Fixes #56190
Alternative to #56325
What?
This PR applies
box-sizing
reset style to thePopover
component itself to prevent unintended horizontal scrollbars from appearing in any context. This will prevent unintended scroll bars from appearing in the popover of the navigation block in the Site Editor.Why?
Box sizing reset style for Popover was being applied on each editor instance, not on the component itself. However, unlike the post editor, this reset was not applied in the Site Editor.
gutenberg/packages/edit-site/src/style.scss
Lines 70 to 74 in 9ca92ad
I suspect that this is the cause of this issue.
How?
Applied a box sizing reset style to the component itself and removed the reset mixin when it was no longer needed.
As a further step, we might also apply a similar approach to the
Modal
component.gutenberg/packages/edit-post/src/style.scss
Lines 51 to 53 in 31d5bd0
gutenberg/packages/edit-site/src/style.scss
Lines 72 to 74 in 31d5bd0
gutenberg/packages/edit-widgets/src/style.scss
Lines 21 to 22 in 31d5bd0
Testing Instructions