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

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

This comment has been minimized.

Copy link
Contributor Author

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: #16617 (comment)
@kjellr
kjellr approved these changes Aug 28, 2019
Copy link
Contributor

left a comment

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

This comment has been minimized.

Copy link

commented Aug 29, 2019

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
4 checks passed
4 checks passed
Filter opened
Details
Filter opened
Details
Milestone It
Details
Travis CI - Pull Request Build Passed
Details
@kjellr kjellr deleted the try/remove-inserter-icon-padding branch Aug 30, 2019
@kjellr kjellr added this to the Gutenberg 6.5 milestone Aug 30, 2019
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Reduce the padding around the sibling inserter icon so that the icon doesn't interfere with other UI elements. Kind of fixes WordPress#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.

* Switched hard coded padding number to existing variable.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.