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

Try adding a subtle animation to innerblock selection when padding is added. #16817

Open
wants to merge 2 commits into
base: master
from

Conversation

@kjellr
Copy link
Contributor

commented Jul 30, 2019

When it's necessary to prevent overlap, #14961 adds some additional padding to .editor-inner-blocks. This additional padding is currently only provided for the Group block, and for the Columns block.

In that issue, we discussed adopting a very subtle scale() animation so that the addition of that extra space wasn't so jarring. This PR implements that animation.

Before:

select-not-animated

After: (The GIF is slowed down to make the animation more visible)

select-animated


This seems pretty subtle, and helps make this smoother by just a little bit. The only issue I'm seeing is that it is unnecessarily applied to placeholders as well:

placeholder

I don't think there's a way to turn this off, without the addition of a has-placeholder class on the parent block to hook into. This seemed like it might be a possibility during an earlier discussion.

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 5, 2019

In use, this looks great, and performs well. I'm actually confused how this works, and the text still looks crisp even at 1.01 scale. Black magic!

@kjellr

This comment has been minimized.

Copy link
Contributor Author

commented Aug 7, 2019

I don't think there's a way to turn this off, without the addition of a has-placeholder class on the parent block to hook into. This seemed like it might be a possibility during an earlier discussion

As noted by @youknowriad in #core-editor chat today, this extra class may not be a possibility. That being the case, I pushed a different solution up in 786c0a6.

What this does is target appenders and placeholders inside of selected blocks that have the extra padding, and applies a second animation to them. The original animation scales things from 1.01 to 1, but this second animation concurrently scales the placeholder from 0.99 to 1. This effectively negates the first animation and makes it so that the placeholder does not move. This is an admittedly weird approach, but it works. ¯_(ツ)_/¯

Before:

animation

After:

no-animation

@jasmussen, I'd love your thoughts on this approach.

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 8, 2019

I definitely think that animation helps smooth out this experience, which can be slightly jarring otherwise. Given the recent feedback on the clickthrough, I think this is one of the ones to sit on for a little bit as we look to explore putting everything in its right place. But the technique — the black magic that makes this work — definitely keep that one in the old noodle, as I suspect we'll want to use that in many, many contexts.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.