Edit Site: prevent inserter overscroll by mattwiebe · Pull Request #26432 · WordPress/gutenberg

mattwiebe · 2020-10-23T21:34:58Z

Description

This just adds some overflow: hidden to .interface-interface-skeleton__left-sidebar to prevent it overflowing when open. It seems a bit too simple and may break something else, but since I believe we're already expecting overflows to be hidden (as in #26424), I hope there aren't any larger issues.

BONUS: the block inserter tip at the bottom is no longer cut off

fixes #26428

How has this been tested?

Open Site Editor
Open the Inserter sidebar
See if there's a giant white space when you scroll down to the bottom of the Site Editor proper (not just the Inserter itself)
See if the tooltip

Screenshots

Before

^ Colorized green by me, normally white. Note the double scrollbars.

After

Types of changes

Bug fix

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

david-szabo97

Tests well! I have one very minor request. See my comment abpve.

Copons · 2020-10-26T11:59:28Z

I've noticed that the editor's scrollbar gets cut off by the footer as well.
What about:

.interface-interface-skeleton__body {
	// ...
	@include break-medium() {
		padding-bottom: $button-size-small + $border-width;
	}
}

.interface-interface-skeleton__left-sidebar {
	@include break-medium() {
		// ...
		overflow: hidden;
	}
}

Also please make sure to test on the post editor as well, since these changes affect that too.
(I've tested it and I haven't seen any regressions, but just in case 🙂 )

fixes WordPress#26428

mattwiebe · 2020-10-27T16:22:17Z

Thanks @Copons - better to deal with this on the body like you say.

Also please make sure to test on the post editor as well, since these changes affect that too.

Yup, tested in there, everything seems unaffected.

david-szabo97

Post editor ✅ Site editor ✅ Chrome ✅ Firefox ✅ Safari ✅ Ship it? ✅ 🚢

github-actions · 2020-10-28T18:26:36Z

Congratulations on your first merged pull request, @mattwiebe! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

The fix in WordPress#26432 accidentally broke block previews in the Inserter due to a naïve use of `overflow: hidden` to fix the overscroll with the block library open in the site editor A little testing revealed that the `.components-visually-hidden` element inside `.block-editor-inserter__tips` might be at the root of causing a browser bug due to its odd combination of styles. Trusty `position: relative` stabilized the rendering context and there was once again peace in the land.

The fix in #26432 accidentally broke block previews in the Inserter due to a naïve use of `overflow: hidden` to fix the overscroll with the block library open in the site editor A little testing revealed that the `.components-visually-hidden` element inside `.block-editor-inserter__tips` might be at the root of causing a browser bug due to its odd combination of styles. Trusty `position: relative` stabilized the rendering context and there was once again peace in the land.

Prevent inserter overscroll in edit-site. Fixes #26428

These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/block-directory@1.17.7 @wordpress/block-editor@5.1.6 @wordpress/block-library@2.26.7 @wordpress/components@11.1.4 @wordpress/core-data@2.24.3 @wordpress/edit-post@3.25.7 @wordpress/edit-site@1.15.7 @wordpress/edit-widgets@1.1.7 @wordpress/editor@9.24.6 @wordpress/format-library@1.25.6 @wordpress/interface@0.10.7 @wordpress/list-reusable-blocks@1.24.4 @wordpress/nux@3.23.4 @wordpress/reusable-blocks@1.0.6 @wordpress/server-side-render@1.19.4 Fixes #52391. Props gziolo, whyisjake. git-svn-id: https://develop.svn.wordpress.org/branches/5.6@50061 602fd350-edb4-49c9-b593-d223f7449a82

These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/block-directory@1.17.7 @wordpress/block-editor@5.1.6 @wordpress/block-library@2.26.7 @wordpress/components@11.1.4 @wordpress/core-data@2.24.3 @wordpress/edit-post@3.25.7 @wordpress/edit-site@1.15.7 @wordpress/edit-widgets@1.1.7 @wordpress/editor@9.24.6 @wordpress/format-library@1.25.6 @wordpress/interface@0.10.7 @wordpress/list-reusable-blocks@1.24.4 @wordpress/nux@3.23.4 @wordpress/reusable-blocks@1.0.6 @wordpress/server-side-render@1.19.4 Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd

These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/block-directory@1.17.7 @wordpress/block-editor@5.1.6 @wordpress/block-library@2.26.7 @wordpress/components@11.1.4 @wordpress/core-data@2.24.3 @wordpress/edit-post@3.25.7 @wordpress/edit-site@1.15.7 @wordpress/edit-widgets@1.1.7 @wordpress/editor@9.24.6 @wordpress/format-library@1.25.6 @wordpress/interface@0.10.7 @wordpress/list-reusable-blocks@1.24.4 @wordpress/nux@3.23.4 @wordpress/reusable-blocks@1.0.6 @wordpress/server-side-render@1.19.4 Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: https://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd

talldan · 2021-02-15T08:52:42Z

This was shipped in 5.6.1, so removing the backport label:
https://make.wordpress.org/core/2021/01/28/wordpress-5-6-1-rc1/

These are backports coming for the 5.6.1 release. Summary of the following issues: * [#27970](WordPress/gutenberg#27970) - Fix editor crash when registering a block pattern without `categories` Backport to WP Minor Release [Feature] Inserter [Feature] Patterns [Type] Bug * [#27733](WordPress/gutenberg#27733) - [Embed block]: Add html and reusable support back Backport to WP Minor Release [Block] Embed [Type] Regression * [#27727](WordPress/gutenberg#27727) - Add aria labels to box control component inputs/button Backport to WP Minor Release [Feature] UI Components [Package] Components [Type] Bug [a11y] Labelling * [#27627](WordPress/gutenberg#27627) - HTML Block: Fix editor styles Backport to WP Minor Release [Block] HTML [Type] Regression * [#27526](WordPress/gutenberg#27526) - Core Data: Normalize `_fields` value for use in `stableKey` Backport to WP Minor Release [Package] Core data [Type] Bug * [#26705](WordPress/gutenberg#26705) - Fix: Font size picker does not correctly handles big font sizes. Backport to WP Minor Release [Type] Bug * [#26432](WordPress/gutenberg#26432) - Edit Site: prevent inserter overscroll Backport to WP Minor Release First-time Contributor [Feature] Full Site Editing [Type] Bug Packages updated: @wordpress/block-directory@1.17.7 @wordpress/block-editor@5.1.6 @wordpress/block-library@2.26.7 @wordpress/components@11.1.4 @wordpress/core-data@2.24.3 @wordpress/edit-post@3.25.7 @wordpress/edit-site@1.15.7 @wordpress/edit-widgets@1.1.7 @wordpress/editor@9.24.6 @wordpress/format-library@1.25.6 @wordpress/interface@0.10.7 @wordpress/list-reusable-blocks@1.24.4 @wordpress/nux@3.23.4 @wordpress/reusable-blocks@1.0.6 @wordpress/server-side-render@1.19.4 Fixes #52391. Props gziolo, whyisjake. Built from https://develop.svn.wordpress.org/branches/5.6@50061 git-svn-id: http://core.svn.wordpress.org/branches/5.6@49762 1a063a9b-81f0-0310-95a4-ce76da25c4cd

mattwiebe added the [Feature] Full Site Editing label Oct 23, 2020

mattwiebe requested review from Addison-Stavlo, Copons, david-szabo97, jeyip and vindl October 23, 2020 21:37

vindl assigned mattwiebe Oct 25, 2020

david-szabo97 requested changes Oct 26, 2020

View reviewed changes

Comment thread packages/interface/src/components/interface-skeleton/style.scss Outdated

mattwiebe added 2 commits October 27, 2020 10:58

prevent inserter overscroll in edit-site

7540f97

fixes WordPress#26428

calculate padding, move to skeleton body

08f07da

mattwiebe force-pushed the fix/edit-site-inserter-overscroll branch from 5c07462 to 08f07da Compare October 27, 2020 15:58

david-szabo97 approved these changes Oct 28, 2020

View reviewed changes

gziolo added the [Type] Bug An existing feature does not function as intended label Oct 28, 2020

vindl approved these changes Oct 28, 2020

View reviewed changes

vindl merged commit 7778a36 into WordPress:master Oct 28, 2020

github-actions Bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Oct 28, 2020

github-actions Bot added this to the Gutenberg 9.3 milestone Oct 28, 2020

mattwiebe deleted the fix/edit-site-inserter-overscroll branch October 29, 2020 16:10

mattwiebe mentioned this pull request Oct 29, 2020

Site Editor: restore block inserter previews #26583

Merged

talldan added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Dec 4, 2020

talldan mentioned this pull request Dec 4, 2020

Regression: Metaboxes and sidebar are partially hidden by .interface-interface-skeleton__footer element #27456

Closed

talldan mentioned this pull request Dec 17, 2020

In WordPress Editor the interface-skeleton__footer and inserter__tips gets overlap #26929

Closed

whyisjake pushed a commit that referenced this pull request Jan 28, 2021

Edit Site: prevent inserter overscroll (#26432)

7dea00c

Prevent inserter overscroll in edit-site. Fixes #26428

talldan removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Feb 15, 2021

This was referenced Feb 16, 2021

Block preview when adding a block is not working in WordPress 5.6.1 #28823

Closed

Inserter: Add e2e test to make sure Block preview is visible #29073

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Edit Site: prevent inserter overscroll#26432

Edit Site: prevent inserter overscroll#26432
vindl merged 2 commits into
WordPress:masterfrom
mattwiebe:fix/edit-site-inserter-overscroll

mattwiebe commented Oct 23, 2020 •

edited

Loading

Uh oh!

david-szabo97 left a comment

Uh oh!

Uh oh!

Copons commented Oct 26, 2020 •

edited

Loading

Uh oh!

mattwiebe commented Oct 27, 2020

Uh oh!

david-szabo97 left a comment •

edited

Loading

Uh oh!

github-actions Bot commented Oct 28, 2020

Uh oh!

talldan commented Feb 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

mattwiebe commented Oct 23, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How has this been tested?

Screenshots

Before

After

Types of changes

Checklist:

Uh oh!

david-szabo97 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copons commented Oct 26, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mattwiebe commented Oct 27, 2020

Uh oh!

david-szabo97 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 28, 2020

Uh oh!

talldan commented Feb 15, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mattwiebe commented Oct 23, 2020 •

edited

Loading

Copons commented Oct 26, 2020 •

edited

Loading

david-szabo97 left a comment •

edited

Loading