-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Fix second scrollbar when editing patterns in the post editor #62909
Fix second scrollbar when editing patterns in the post editor #62909
Conversation
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. |
Size Change: +45 B (0%) Total Size: 1.76 MB
ℹ️ View Unchanged
|
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.
This seems like an appropriate and safe fix to me and resolves the issue when I tested. I’ve opened #62940 for a related issue and it happens to fix this as well. That said, the change here still seems appropriate to the general intention of applying the reset styles.
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.
Thanks for fixing this! Changes LGTM and testing shows the extra scrollbar is gone ✅
Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
I just cherry-picked this PR to the wp/6.6 branch to get it included in the next release: 6155b66 |
What?
Two scrollbars can appear in the post editor when editing patterns.
Why?
In the site editor
box-sizing: border-box
is applied universally by a reset rule which results in the site editor not having this issue:gutenberg/packages/edit-site/src/style.scss
Lines 69 to 70 in 1998f1f
In the post editor, the same reset rule is applied more carefully to ensure reset styles don't leak into the non-iframed editor:
gutenberg/packages/edit-post/src/style.scss
Lines 34 to 40 in 1998f1f
Because of this, the
.edit-post-visual-editor
element doesn't havebox-sizing: border-box
and its padding can cause an overflow.How?
To fix it, I've added
.edit-post-visual-editor.is-iframed
to the list of elements that receive the reset styles.Unfortunately there are still other issues, like the scrollbar reappearing when there's a notice and the custom fields UI being incorrectly positions, but I'll save those for issues.
Testing Instructions
Expected: there's only one scrollbar
Screenshots or screencast
Before:
![Screenshot 2024-06-27 at 3 54 37 pm](https://cdn.statically.io/img/private-user-images.githubusercontent.com/677833/343681884-2ca67f18-d90d-4dfd-8ea0-6c6fe80a9aae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5MTk0NTQsIm5iZiI6MTcyMjkxOTE1NCwicGF0aCI6Ii82Nzc4MzMvMzQzNjgxODg0LTJjYTY3ZjE4LWQ5MGQtNGRmZC04ZWEwLTZjNmZlODBhOWFhZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNlQwNDM5MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT01ZDM5MzNhZDM2MzcxM2VhM2E3NDNmNzkzYTlhYTYyOGY2Y2Y4ODM0NDhmNWZlZDM3NGIyZWZhMWIwMTc5NTZlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.msQ_VlYmgKIVKcXTv2HYve4O-gVeVvx6XC88V-sjU3U)
After:
![Screenshot 2024-06-27 at 3 53 46 pm](https://cdn.statically.io/img/private-user-images.githubusercontent.com/677833/343681542-27ab2082-4d06-4cef-b2b0-0330bdf8b7f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI5MTk0NTQsIm5iZiI6MTcyMjkxOTE1NCwicGF0aCI6Ii82Nzc4MzMvMzQzNjgxNTQyLTI3YWIyMDgyLTRkMDYtNGNlZi1iMmIwLTAzMzBiZGY4YjdmNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgwNlQwNDM5MTRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNjA1ZjBiYjU4ZDQ2NzI1ZGYzYzk2YWQyMGE5MTE3OWI5NmE0ODYwNjgwOGJlODhmODg0MWY2YTE2NDg2YTk1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.6Ey-TP9LuGRGuzEtw58j_E3Q6UeI1MMX4y7bcUs3L3I)