Merge branch 'master' into xwp/add/440-script-versioning

editor/assets/stylesheets/_animations.scss

@@ -0,0 +1,15 @@
+@mixin animate_fade {
+	animation: animate_fade 0.2s ease-out;
+	animation-fill-mode: forwards;
+}
+
+@keyframes animate_fade {
+	from {
+		opacity: 0;
+		transform: translateY( 4px );
+	}
+	to {
+		opacity: 1;
+		transform: translateY( 0px );
+	}
+}

editor/modes/visual-editor/block.js

@@ -108,17 +108,19 @@ class VisualEditorBlock extends wp.element.Component {
 				className={ className }
 			>
 				{ ( ( isSelected && ! isTyping ) || isHovered ) && <BlockMover uid={ block.uid } /> }
-				<div className="editor-visual-editor__block-controls">
-					{ isSelected && ! isTyping && <BlockSwitcher uid={ block.uid } /> }
-					{ isSelected && ! isTyping && settings.controls ? (
-						<Toolbar
-							controls={ settings.controls.map( ( control ) => ( {
-								...control,
-								onClick: () => control.onClick( block.attributes, this.setAttributes ),
-								isActive: () => control.isActive( block.attributes )
-							} ) ) } />
-					) : null }
-				</div>
+				{ isSelected && ! isTyping &&
+					<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( block.attributes )
+								} ) ) } />
+						) }
+					</div>
+				}
 				<BlockEdit
 					focus={ focus }
 					attributes={ block.attributes }

editor/modes/visual-editor/style.scss

@@ -39,6 +39,7 @@
 }
 
 .editor-visual-editor__block-controls {
+	@include animate_fade;
 	position: absolute;
 	bottom: 100%;
 	margin-bottom: -4px;

webpack.config.js

@@ -46,7 +46,7 @@ const config = {
 							loader: 'sass-loader',
 							query: {
 								includePaths: [ 'editor/assets/stylesheets' ],
-								data: '@import "variables"; @import "mixins";',
+								data: '@import "variables"; @import "mixins"; @import "animations";',
 								outputStyle: 'production' === process.env.NODE_ENV ?
 									'compressed' : 'nested'
 							}