From 4f49ef0aafe7fa8a6af6a0a4f596dccb7a13fa38 Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 25 May 2020 15:47:37 +1000
Subject: [PATCH 1/2] Block Navigator: Use default block appender

Changes the Block Navigator to use the default block appender instead of
the button block appender.
---
 .../src/components/block-navigation/appender.js |  4 ++--
 .../src/components/block-navigation/style.scss  | 17 ++++++++++-------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
index f31b8e793c8a29..6f3825e1fad206 100644
--- a/packages/block-editor/src/components/block-navigation/appender.js
+++ b/packages/block-editor/src/components/block-navigation/appender.js
@@ -9,8 +9,8 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockNavigationLeaf from './leaf';
-import ButtonBlockAppender from '../button-block-appender';
 import DescenderLines from './descender-lines';
+import Inserter from '../inserter';
 
 export default function BlockNavigationAppender( {
 	parentBlockClientId,
@@ -48,7 +48,7 @@ export default function BlockNavigationAppender( {
 							isLastRow={ position === rowCount }
 							terminatedLevels={ terminatedLevels }
 						/>
-						<ButtonBlockAppender
+						<Inserter
 							rootClientId={ parentBlockClientId }
 							__experimentalSelectBlockOnInsert={ false }
 							aria-describedby={ descriptionId }
diff --git a/packages/block-editor/src/components/block-navigation/style.scss b/packages/block-editor/src/components/block-navigation/style.scss
index 16f744c035c87a..f6342bf9414f4b 100644
--- a/packages/block-editor/src/components/block-navigation/style.scss
+++ b/packages/block-editor/src/components/block-navigation/style.scss
@@ -77,13 +77,16 @@ $tree-item-height: 36px;
 		height: $button-size;
 	}
 
-	.block-editor-button-block-appender {
-		outline: none;
-		background: none;
-		padding: $grid-unit-10;
-		padding: 6px;
-		margin-left: 0.8em;
-		width: calc(100% - 0.8em);
+	.block-editor-inserter__toggle {
+		background: $dark-gray-primary;
+		color: $white;
+		height: $grid-unit-30;
+		margin: 6px 6px 6px 0.8em;
+		min-width: $grid-unit-30;
+
+		&:active {
+			color: $white;
+		}
 	}
 }
 

From 742606d1d8c32413ee1c03cf7c6ae7dd048400cd Mon Sep 17 00:00:00 2001
From: Robert Anderson <robert@noisysocks.com>
Date: Mon, 1 Jun 2020 14:59:59 +1000
Subject: [PATCH 2/2] Block Navigator: Pass TreeGridCell props to the inserter
 toggle

---
 .../block-editor/src/components/block-navigation/appender.js  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-navigation/appender.js b/packages/block-editor/src/components/block-navigation/appender.js
index 6f3825e1fad206..8742fb31faf4cf 100644
--- a/packages/block-editor/src/components/block-navigation/appender.js
+++ b/packages/block-editor/src/components/block-navigation/appender.js
@@ -41,7 +41,7 @@ export default function BlockNavigationAppender( {
 				className="block-editor-block-navigation-appender__cell"
 				colSpan="3"
 			>
-				{ ( props ) => (
+				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-block-navigation-appender__container">
 						<DescenderLines
 							level={ level }
@@ -52,7 +52,7 @@ export default function BlockNavigationAppender( {
 							rootClientId={ parentBlockClientId }
 							__experimentalSelectBlockOnInsert={ false }
 							aria-describedby={ descriptionId }
-							{ ...props }
+							toggleProps={ { ref, tabIndex, onFocus } }
 						/>
 						<div
 							className="block-editor-block-navigation-appender__description"