From 17b046415ac9baef5e193217a962a20648517c1a Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 25 May 2017 16:04:04 +0100
Subject: [PATCH 1/4] Blocks: Animate the controls on appear only

 - This avois animating the controls when we move the blocks up and down
---
 editor/modes/visual-editor/block.js   | 40 +++++++++++++++++++--------
 editor/modes/visual-editor/style.scss |  5 +++-
 package.json                          |  1 +
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 432fbd5baaef5a..e78f40295ceb96 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -5,10 +5,12 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import { Slot } from 'react-slot-fill';
 import { partial } from 'lodash';
+import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 /**
  * WordPress dependencies
  */
+import { Children } from 'element';
 import Toolbar from 'components/toolbar';
 
 /**
@@ -33,6 +35,11 @@ import {
 	isTypingInBlock,
 } from '../../selectors';
 
+function FirstChild( { children } ) {
+	const childrenArray = Children.toArray( children );
+	return childrenArray[ 0 ] || null;
+}
+
 class VisualEditorBlock extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
@@ -200,18 +207,27 @@ class VisualEditorBlock extends wp.element.Component {
 			>
 				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ showUI &&
-					<div className="editor-visual-editor__block-controls">
-						<BlockSwitcher uid={ block.uid } />
-						{ !! settings.controls && (
-							<Toolbar
-								controls={ settings.controls.map( ( control ) => ( {
-									...control,
-									onClick: () => control.onClick( block.attributes, this.setAttributes ),
-									isActive: control.isActive ? control.isActive( block.attributes ) : false,
-								} ) ) } />
-						) }
-						<Slot name="Formatting.Toolbar" />
-					</div>
+					<CSSTransitionGroup
+						transitionName="controls"
+						transitionAppear={ true }
+						transitionAppearTimeout={ 100 }
+						transitionEnter={ false }
+						transitionLeave={ false }
+						component={ FirstChild }
+					>
+						<div className="editor-visual-editor__block-controls">
+							<BlockSwitcher uid={ block.uid } />
+							{ !! settings.controls && (
+								<Toolbar
+									controls={ settings.controls.map( ( control ) => ( {
+										...control,
+										onClick: () => control.onClick( block.attributes, this.setAttributes ),
+										isActive: control.isActive ? control.isActive( block.attributes ) : false,
+									} ) ) } />
+							) }
+							<Slot name="Formatting.Toolbar" />
+						</div>
+					</CSSTransitionGroup>
 				}
 				<div onKeyPress={ this.maybeStartTyping }>
 					<BlockEdit
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 90b2d7940af2a9..ae3d1d15d9735a 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -72,7 +72,6 @@
 }
 
 .editor-visual-editor__block-controls {
-	@include animate_fade;
 	display: flex;
 	position: sticky;
 	z-index: z-index( '.editor-visual-editor__block-controls' );
@@ -87,6 +86,10 @@
 	@include break-medium() {
 		top: $header-height + $admin-bar-height + $item-spacing;
 	}
+
+	&.controls-appear.controls-appear-active {
+		@include animate_fade;
+	}
 }
 
 .editor-visual-editor__block-controls + div {
diff --git a/package.json b/package.json
index 86aeed2092482b..5121aaa1e2ef41 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "react-dom": "^15.5.4",
     "react-redux": "^5.0.4",
     "react-slot-fill": "^1.0.0-alpha.11",
+    "react-transition-group": "^1.1.3",
     "redux": "^3.6.0",
     "uuid": "^3.0.1"
   }

From 0493b273d57479967f33fc50a5490e299eca8f49 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 25 May 2017 16:36:24 +0100
Subject: [PATCH 2/4] Blocks: Customize blocks controls appearing className

---
 editor/modes/visual-editor/block.js   | 4 ++--
 editor/modes/visual-editor/style.scss | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index e78f40295ceb96..a76a55cf76d7a6 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -208,9 +208,9 @@ class VisualEditorBlock extends wp.element.Component {
 				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ showUI &&
 					<CSSTransitionGroup
-						transitionName="controls"
+						transitionName={ { appear: 'appear-animation', appearActive: 'is-appearing' } }
 						transitionAppear={ true }
-						transitionAppearTimeout={ 100 }
+						transitionAppearTimeout={ 10000 }
 						transitionEnter={ false }
 						transitionLeave={ false }
 						component={ FirstChild }
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index ae3d1d15d9735a..2e08fe607a5ca9 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -87,7 +87,7 @@
 		top: $header-height + $admin-bar-height + $item-spacing;
 	}
 
-	&.controls-appear.controls-appear-active {
+	&.is-appearing {
 		@include animate_fade;
 	}
 }

From 63df2f20466aee6eeccc3556a6d9a9b803522b14 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 26 May 2017 21:31:46 +0100
Subject: [PATCH 3/4] Blocks: Fix the animation timeout

---
 editor/modes/visual-editor/block.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index a76a55cf76d7a6..844494b9d7f1a0 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -210,7 +210,7 @@ class VisualEditorBlock extends wp.element.Component {
 					<CSSTransitionGroup
 						transitionName={ { appear: 'appear-animation', appearActive: 'is-appearing' } }
 						transitionAppear={ true }
-						transitionAppearTimeout={ 10000 }
+						transitionAppearTimeout={ 100 }
 						transitionEnter={ false }
 						transitionLeave={ false }
 						component={ FirstChild }

From 2c8ce5ff6d87c4948fe3ffffbb9e78160fadabc1 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Fri, 26 May 2017 22:14:12 +0100
Subject: [PATCH 4/4] Blocks: Change animations classNames to avoid confusion

---
 editor/modes/visual-editor/block.js   | 2 +-
 editor/modes/visual-editor/style.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/editor/modes/visual-editor/block.js b/editor/modes/visual-editor/block.js
index 844494b9d7f1a0..f48ef007115dd6 100644
--- a/editor/modes/visual-editor/block.js
+++ b/editor/modes/visual-editor/block.js
@@ -208,7 +208,7 @@ class VisualEditorBlock extends wp.element.Component {
 				{ ( showUI || isHovered ) && <BlockMover uid={ block.uid } /> }
 				{ showUI &&
 					<CSSTransitionGroup
-						transitionName={ { appear: 'appear-animation', appearActive: 'is-appearing' } }
+						transitionName={ { appear: 'is-appearing', appearActive: 'is-appearing-active' } }
 						transitionAppear={ true }
 						transitionAppearTimeout={ 100 }
 						transitionEnter={ false }
diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
index 2e08fe607a5ca9..e0f579cb2a37fb 100644
--- a/editor/modes/visual-editor/style.scss
+++ b/editor/modes/visual-editor/style.scss
@@ -87,7 +87,7 @@
 		top: $header-height + $admin-bar-height + $item-spacing;
 	}
 
-	&.is-appearing {
+	&.is-appearing-active {
 		@include animate_fade;
 	}
 }