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

Revise method of preventing a "flash" of default inserter help panel content #17168

Closed
kjellr opened this issue Aug 23, 2019 · 3 comments · Fixed by #17215
Closed

Revise method of preventing a "flash" of default inserter help panel content #17168

kjellr opened this issue Aug 23, 2019 · 3 comments · Fixed by #17215
Assignees
@jasmussen
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@kjellr
Copy link
Contributor

kjellr commented Aug 23, 2019

This is technically two bugs, but they should probably be addressed together.

#16813 removed horizontal padding for inserter list items, in order to prevent a "flash" of the default block content when moving the mouse from one block to the next horizontally. This did not address the issue when moving the mouse vertically up or down the list:

flicker

Additionally, this padding removal introduced a regression in the focused state for those inserter list items. Turns out that padding was necessary to properly house the focus state borders:

Screen Shot 2019-08-23 at 10 11 13 AM

Screen Shot 2019-08-23 at 10 10 54 AM

We should fix that regression and come up with a better way of preventing the flash. Perhaps by adding a delay to he transition between hovered items in the sidebar.
@kjellr kjellr added [Type] Bug An existing feature does not function as intended [Feature] Inserter The main way to insert blocks using the + button in the editing interface labels Aug 23, 2019
@kjellr kjellr mentioned this issue Aug 23, 2019
Merged
jasmussen added a commit that referenced this issue Aug 27, 2019
@jasmussen
Try: Fix cropped focus ring in block library
4f38db6 
Maybe fixes #17094 and maybe fixes #17168 too.

There's focus ring on blocks in the block library and the switcher. These are cropped when blocks are near the edges, due to an overflow: hidden;. This PR attempts to fix that with a deadpan negative margin. Will it work? This is where YOU come in!
@jasmussen jasmussen mentioned this issue Aug 27, 2019
Merged
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Aug 27, 2019
jasmussen added a commit that referenced this issue Aug 27, 2019
@jasmussen
Try: Fix cropped focus ring in block library (#17215)
51ec639 
Maybe fixes #17094 and maybe fixes #17168 too.

There's focus ring on blocks in the block library and the switcher. These are cropped when blocks are near the edges, due to an overflow: hidden;. This PR attempts to fix that with a deadpan negative margin. Will it work? This is where YOU come in!
@kjellr
Copy link
Contributor Author

kjellr commented Aug 27, 2019

Going to keep this open for now, since the vertical hover flash is still present. 👍

@kjellr kjellr reopened this Aug 27, 2019
@jasmussen
Copy link
Contributor

Sorry about that, github got smart with my phrasings!

@youknowriad
Copy link
Contributor

Seems like this is not needed anymore.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jasmussen jasmussen

Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Try: Fix cropped focus ring in block library WordPress/gutenberg
3 participants
@youknowriad @kjellr @jasmussen