Columns: fix appender (#21142)

* Columns: fix appender * Add CSS to hide the nested appender unless parent is selected. * Refine animation. * Fix for group as well. Co-authored-by: jasmussen <[email protected]>
WordPress · Mar 25, 2020 · 3dec393 · 3dec393
1 parent 7aab279
commit 3dec393
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss
@@ -430,7 +430,7 @@
 		@include reduce-motion("animation");
 
 		&:hover {
-			animation: block-editor-inserter__toggle__fade-in-animation 0.2s ease;
+			animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
 			animation-fill-mode: forwards;
 			@include reduce-motion("animation");
 		}
@@ -440,24 +440,45 @@
 @keyframes block-editor-inserter__toggle__fade-in-animation-delayed {
 	0% {
 		opacity: 0;
+		transform: scale(0);
 	}
 	80% {
 		opacity: 0;
+		transform: scale(0);
 	}
 	100% {
 		opacity: 1;
+		transform: scale(1);
 	}
 }
 
 @keyframes block-editor-inserter__toggle__fade-in-animation {
 	from {
 		opacity: 0;
+		transform: scale(0);
 	}
 	to {
 		opacity: 1;
+		transform: scale(1);
 	}
 }
 
+// Hide the appender that sits at the end of block lists, when inside a nested block,
+// unless the block itself, or a parent, is selected.
+.wp-block .block-list-appender .block-editor-inserter__toggle {
+	animation: block-editor-inserter__toggle__fade-in-animation 0.1s ease;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
+}
+
+.wp-block:not(.is-selected):not(.has-child-selected) .block-list-appender {
+	display: none;
+
+	.block-editor-inserter__toggle {
+		opacity: 0;
+		transform: scale(0);
+	}
+}
 
 // This is the edge-to-edge hover area that contains the plus.
 .block-editor-block-list__block {

diff --git a/packages/block-library/src/column/edit.js b/packages/block-library/src/column/edit.js
@@ -63,7 +63,7 @@ function ColumnEdit( {
 				templateLock={ false }
 				renderAppender={
 					hasChildBlocks
-						? false
+						? undefined
 						: () => <InnerBlocks.ButtonBlockAppender />
 				}
 				__experimentalTagName={ Block.div }

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -22,7 +22,9 @@ function GroupEdit( { className, clientId } ) {
 			<div className="wp-block-group__inner-container">
 				<InnerBlocks
 					renderAppender={
-						! hasInnerBlocks && InnerBlocks.ButtonBlockAppender
+						hasInnerBlocks
+							? undefined
+							: () => <InnerBlocks.ButtonBlockAppender />
 					}
 				/>
 			</div>