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

Closed
wants to merge 2 commits into from

Conversation

kjellr
Copy link
Contributor

@kjellr kjellr 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.

@kjellr kjellr added Needs Design Feedback Needs general design feedback. [Block] Columns Affects the Columns Block [Block] Group Affects the Group Block labels Jul 30, 2019
@kjellr kjellr requested a review from jasmussen July 30, 2019 16:43
@kjellr kjellr self-assigned this Jul 30, 2019
@jasmussen
Copy link
Contributor

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
Copy link
Contributor Author

kjellr 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
Copy link
Contributor

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.

@ZebulanStanphill
Copy link
Member

#18105 removed the InnerBlocks selection padding, so I think this PR can be closed.

@youknowriad youknowriad closed this Feb 6, 2020
@youknowriad youknowriad deleted the try/inner-block-padding-animation-on-select branch February 6, 2020 09:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Columns Affects the Columns Block [Block] Group Affects the Group Block Needs Design Feedback Needs general design feedback.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants