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.

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

Reduce the padding around the sibling inserter icon #17136

Merged
merged 2 commits into from
Aug 30, 2019

Conversation

mapk
Copy link
Contributor

@mapk mapk commented Aug 22, 2019

This PR is so the icon doesn't interfere with other UI elements. Kind of fixes #16646. I wanted to try a delay on the Inserter, but animating the display attribute isn't possible with just CSS. I think that's why the Inserter uses the opacity attribute instead, but opacity still takes up space even when opacity is set to 0. This results in an element that still covers other UI elements.

Basically, I changed the padding around the + icon. It's not the most robust solution, so I'm open to alternatives.

How has this been tested?

Tested locally.

Screenshots

This PR

inserter-new

Master branch

inserter-old

Types of changes

Minor CSS change.

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.

…doesn't interfere with other UI elements. Kind of fixes #16646. I wanted to try a delay on the inserter, but animating the display attribute in CSS isn't possible. I think that's why the Inserter uses the opacity instead, but opacity still takes up space even when opacity is set to 0.
@mapk mapk added [Feature] Inserter The main way to insert blocks using the + button in the editing interface General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback. labels Aug 22, 2019
@mapk mapk self-assigned this Aug 22, 2019
@mapk
Copy link
Contributor Author

mapk commented Aug 22, 2019

A few more points I'd like to try in another PR as mentioned in #13571:

  1. Move the sibling inserter below the selected block.
  2. Only show sibling inserter when a block is selected. Similar to the proposed idea here: Move buttons are hard to use within a nested block #16617 (comment)

Copy link
Contributor

@kjellr kjellr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, this seems like a simple workaround and works in my testing. I think we can deploy this while we sort out those other, better solutions. 👍

@shaunandrews
Copy link
Contributor

Thank you! The visual size of the inserted has always bugged me. This looks so much better.

@kjellr kjellr merged commit 8f05a99 into master Aug 30, 2019
@kjellr kjellr deleted the try/remove-inserter-icon-padding branch August 30, 2019 11:38
@kjellr kjellr added this to the Gutenberg 6.5 milestone Aug 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface General Interface Parts of the UI which don't fall neatly under other labels. Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Spacer block: Can't grab the block's height adjuster
3 participants