Fade side inserter when typing is true. (#5566)

WordPress · Mar 12, 2018 · 4e42aff · 4e42aff
1 parent 8d5345e
commit 4e42aff
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -452,6 +452,7 @@ export class BlockListBlock extends Component {
 			'is-multi-selected': isMultiSelected,
 			'is-hovered': isHovered,
 			'is-reusable': isReusableBlock( blockType ),
+			'is-typing': isTypingWithinBlock,
 		} );
 
 		const { onReplace } = this.props;

diff --git a/editor/components/block-list/style.scss b/editor/components/block-list/style.scss
@@ -81,6 +81,17 @@
 		right: 6px;
 	}
 
+	&.is-typing .editor-block-list__empty-block-inserter,
+	&.is-typing .editor-block-list__side-inserter {
+		opacity: 0;
+	}
+
+	.editor-block-list__empty-block-inserter,
+	.editor-block-list__side-inserter {
+		opacity: 1;
+		transition: opacity 0.2s;
+	}
+
 	&.is-reusable.is-selected > .editor-block-mover:before {
 		border-right: none;
 	}