-
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
Fix overflowing patterns #44853
Fix overflowing patterns #44853
Conversation
Size Change: +91 B (0%) Total Size: 1.27 MB
ℹ️ View Unchanged
|
Oh, looks like e2e tests caught the problem with this approach which is that block previews are hidden. 🤔 |
Something else I noticed, if you drag one of the patterns you can end up with three scroll bars all side-by-side 😱 Kapture.2022-10-11.at.15.00.28.mp4 |
This reverts commit d47f721.
… visually hidden text is positioned correctly
I believe I've finally found the cause of this bug. Block patterns contain Making each pattern a This is really something that shouldn't happen as a side effect of using |
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.
Excellent sleuthing. Works for me!
* Fix overflowing patterns by using overflow:hidden * Revert "Fix overflowing patterns by using overflow:hidden" This reverts commit d47f721. * Make pattern list items position: relative so that position: absolute visually hidden text is positioned correctly
I just cherry-picked this PR to the wp/6.1-rc-2 branch to get it included in the next release: 5f1a635 |
* Fix overflowing patterns by using overflow:hidden * Revert "Fix overflowing patterns by using overflow:hidden" This reverts commit d47f721. * Make pattern list items position: relative so that position: absolute visually hidden text is positioned correctly
Package updates for bug and regression fixes: - `@wordpress/block-directory: 3.15.8` - `@wordpress/block-editor: 10.0.7` - `@wordpress/block-library: 7.14.8` - `@wordpress/components: 21.0.6` - `@wordpress/customize-widgets: 3.14.8` - `@wordpress/edit-post: 6.14.8` - `@wordpress/edit-site: 4.14.10` - `@wordpress/edit-widgets: 4.14.8` - `@wordpress/editor: 12.16.7` - `@wordpress/format-library: 3.15.7` - `@wordpress/interface: 4.16.6` - `@wordpress/list-reusable-blocks: 3.15.6` - `@wordpress/nux: 5.15.6` - `@wordpress/preferences: 2.9.6` - `@wordpress/reusable-blocks: 3.15.7` - `@wordpress/server-side-render: 3.15.6` - `@wordpress/widgets: 2.15.7` Original PRs from Gutenberg repository: - [WordPress/gutenberg#45041 #45041 Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined] - [WordPress/gutenberg#45045 #45045 Add: Missing output escaping on some blocks] - [WordPress/gutenberg#44999 #44999 Escape comment author URL] - [WordPress/gutenberg#44972 #44972 Navigator: restore focus only once per location] - [WordPress/gutenberg#44858 #44858 Spacing Sizes Control: Try improving layout spacing] - [WordPress/gutenberg#44878 #44878 Fix: Inspector is usable on the top level block even if it is content locked] - [WordPress/gutenberg#44809 #44809 Fix list outdents on Enter in quote block] - [WordPress/gutenberg#44864 #44864 List v2: fix selection when creating paragraph from empty list item] - [WordPress/gutenberg#44853 #44853 Fix overflowing patterns] - [WordPress/gutenberg#45050 #45050 Fix visibility of nested Group block appender] - [WordPress/gutenberg#44887 #44887 wp-env: Use case insensitive regex when checking WP version string] Follow-up to [54257], [54335], [54383], [54483], [54486], [54490]. Props bernhard-reiter, audrasjb. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54632 602fd350-edb4-49c9-b593-d223f7449a82
Package updates for bug and regression fixes: - `@wordpress/block-directory: 3.15.8` - `@wordpress/block-editor: 10.0.7` - `@wordpress/block-library: 7.14.8` - `@wordpress/components: 21.0.6` - `@wordpress/customize-widgets: 3.14.8` - `@wordpress/edit-post: 6.14.8` - `@wordpress/edit-site: 4.14.10` - `@wordpress/edit-widgets: 4.14.8` - `@wordpress/editor: 12.16.7` - `@wordpress/format-library: 3.15.7` - `@wordpress/interface: 4.16.6` - `@wordpress/list-reusable-blocks: 3.15.6` - `@wordpress/nux: 5.15.6` - `@wordpress/preferences: 2.9.6` - `@wordpress/reusable-blocks: 3.15.7` - `@wordpress/server-side-render: 3.15.6` - `@wordpress/widgets: 2.15.7` Original PRs from Gutenberg repository: - [WordPress/gutenberg#45041 #45041 Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined] - [WordPress/gutenberg#45045 #45045 Add: Missing output escaping on some blocks] - [WordPress/gutenberg#44999 #44999 Escape comment author URL] - [WordPress/gutenberg#44972 #44972 Navigator: restore focus only once per location] - [WordPress/gutenberg#44858 #44858 Spacing Sizes Control: Try improving layout spacing] - [WordPress/gutenberg#44878 #44878 Fix: Inspector is usable on the top level block even if it is content locked] - [WordPress/gutenberg#44809 #44809 Fix list outdents on Enter in quote block] - [WordPress/gutenberg#44864 #44864 List v2: fix selection when creating paragraph from empty list item] - [WordPress/gutenberg#44853 #44853 Fix overflowing patterns] - [WordPress/gutenberg#45050 #45050 Fix visibility of nested Group block appender] - [WordPress/gutenberg#44887 #44887 wp-env: Use case insensitive regex when checking WP version string] Follow-up to [54257], [54335], [54383], [54483], [54486], [54490]. Props bernhard-reiter, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54632 git-svn-id: http://core.svn.wordpress.org/trunk@54184 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Package updates for bug and regression fixes: - `@wordpress/block-directory: 3.15.8` - `@wordpress/block-editor: 10.0.7` - `@wordpress/block-library: 7.14.8` - `@wordpress/components: 21.0.6` - `@wordpress/customize-widgets: 3.14.8` - `@wordpress/edit-post: 6.14.8` - `@wordpress/edit-site: 4.14.10` - `@wordpress/edit-widgets: 4.14.8` - `@wordpress/editor: 12.16.7` - `@wordpress/format-library: 3.15.7` - `@wordpress/interface: 4.16.6` - `@wordpress/list-reusable-blocks: 3.15.6` - `@wordpress/nux: 5.15.6` - `@wordpress/preferences: 2.9.6` - `@wordpress/reusable-blocks: 3.15.7` - `@wordpress/server-side-render: 3.15.6` - `@wordpress/widgets: 2.15.7` Original PRs from Gutenberg repository: - [WordPress/gutenberg#45041 #45041 Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined] - [WordPress/gutenberg#45045 #45045 Add: Missing output escaping on some blocks] - [WordPress/gutenberg#44999 #44999 Escape comment author URL] - [WordPress/gutenberg#44972 #44972 Navigator: restore focus only once per location] - [WordPress/gutenberg#44858 #44858 Spacing Sizes Control: Try improving layout spacing] - [WordPress/gutenberg#44878 #44878 Fix: Inspector is usable on the top level block even if it is content locked] - [WordPress/gutenberg#44809 #44809 Fix list outdents on Enter in quote block] - [WordPress/gutenberg#44864 #44864 List v2: fix selection when creating paragraph from empty list item] - [WordPress/gutenberg#44853 #44853 Fix overflowing patterns] - [WordPress/gutenberg#45050 #45050 Fix visibility of nested Group block appender] - [WordPress/gutenberg#44887 #44887 wp-env: Use case insensitive regex when checking WP version string] Follow-up to [54257], [54335], [54383], [54483], [54486], [54490]. Props bernhard-reiter, audrasjb. See #56467. Built from https://develop.svn.wordpress.org/trunk@54632 git-svn-id: https://core.svn.wordpress.org/trunk@54184 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Package updates for bug and regression fixes: - `@wordpress/block-directory: 3.15.8` - `@wordpress/block-editor: 10.0.7` - `@wordpress/block-library: 7.14.8` - `@wordpress/components: 21.0.6` - `@wordpress/customize-widgets: 3.14.8` - `@wordpress/edit-post: 6.14.8` - `@wordpress/edit-site: 4.14.10` - `@wordpress/edit-widgets: 4.14.8` - `@wordpress/editor: 12.16.7` - `@wordpress/format-library: 3.15.7` - `@wordpress/interface: 4.16.6` - `@wordpress/list-reusable-blocks: 3.15.6` - `@wordpress/nux: 5.15.6` - `@wordpress/preferences: 2.9.6` - `@wordpress/reusable-blocks: 3.15.7` - `@wordpress/server-side-render: 3.15.6` - `@wordpress/widgets: 2.15.7` Original PRs from Gutenberg repository: - [WordPress/gutenberg#45041 #45041 Font Size Picker Hint: Fallback to font size `slug` if `name` is undefined] - [WordPress/gutenberg#45045 #45045 Add: Missing output escaping on some blocks] - [WordPress/gutenberg#44999 #44999 Escape comment author URL] - [WordPress/gutenberg#44972 #44972 Navigator: restore focus only once per location] - [WordPress/gutenberg#44858 #44858 Spacing Sizes Control: Try improving layout spacing] - [WordPress/gutenberg#44878 #44878 Fix: Inspector is usable on the top level block even if it is content locked] - [WordPress/gutenberg#44809 #44809 Fix list outdents on Enter in quote block] - [WordPress/gutenberg#44864 #44864 List v2: fix selection when creating paragraph from empty list item] - [WordPress/gutenberg#44853 #44853 Fix overflowing patterns] - [WordPress/gutenberg#45050 #45050 Fix visibility of nested Group block appender] - [WordPress/gutenberg#44887 #44887 wp-env: Use case insensitive regex when checking WP version string] Follow-up to [54257], [54335], [54383], [54483], [54486], [54490]. Props bernhard-reiter, audrasjb. See #56467. git-svn-id: https://develop.svn.wordpress.org/trunk@54632 602fd350-edb4-49c9-b593-d223f7449a82
What?
Fixes #44842
Why?
Resolves the issue of patterns overflowing and causing the editor to have an extra scrollbar.
How?
The problem was caused by the
VisuallyHidden
text in each pattern list item. This visually hidden text is absolutely positioned and is technically overflowing the sidebar because the ancestor of this element that provides a stacking context has theoverflow: visible
style.To fix this, this PR makes each pattern list item a stacking context by adding the
position: relative
style.Testing Instructions
To more easily test this on Mac OS, Go to System Preferences > General and change 'Show scroll bars' to 'Always'.
Screenshots or screencast
Before
After