From 842e74243439fa3f7d2544d3c69658603a898c13 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 5 Mar 2019 16:13:23 +0000
Subject: [PATCH 01/55] Adds Block Appender as placeholder to empty InnerBlocks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously when inserting a Block that makes use of InnerBlocks (eg: Columns) it wasn’t clear that the Block had been inserted and by default an empty paragraph Block was inserted.

This changes checks for any innerBlocks and if available disables the default Block insertion (ie: paragraph) and displays the Block Appender as a placeholder. Once a Block is inserted then the placeholder is removed.
---
 .../components/block-list-appender/index.js   | 27 +++++++++++--------
 .../components/block-list-appender/style.scss |  8 +++++-
 .../src/components/block-list/index.js        |  9 ++++++-
 packages/components/src/button/style.scss     |  8 +-----
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 5af9c48a66f04..f3a1e4ff7e80e 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -6,10 +6,11 @@ import { last } from 'lodash';
 /**
  * WordPress dependencies
  */
+import { Fragment } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
+import { Button, Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -23,12 +24,13 @@ function BlockListAppender( {
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
+	disableDefaultInserter,
 } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
-	if ( canInsertDefaultBlock ) {
+	if ( ! disableDefaultInserter && canInsertDefaultBlock ) {
 		return (
 			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
 				<DefaultBlockAppender
@@ -44,15 +46,18 @@ function BlockListAppender( {
 			<Inserter
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<IconButton
-						label={ __( 'Add block' ) }
-						icon="insert"
-						onClick={ onToggle }
-						className="block-list-appender__toggle"
-						aria-haspopup="true"
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-					/>
+					<Fragment>
+						<Button
+							className="block-list-appender__toggle"
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							disabled={ disabled }
+						>
+							<Icon icon="insert" />
+							<span>{ __( 'Add a Block' ) }</span>
+						</Button>
+
+					</Fragment>
 				) }
 				isAppender
 			/>
diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 9f53f7572f179..3b5bd5546f519 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -4,9 +4,10 @@
 
 .block-list-appender__toggle {
 	display: flex;
+	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-size-large;
+	padding: $grid-size-large * 2;
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;
@@ -14,4 +15,9 @@
 	&:hover {
 		outline: $border-width dashed $dark-gray-500;
 	}
+
+	> span {
+		margin-top: 1em;
+		font-weight: bold;
+	}
 }
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 5231dcb71749b..ca43d12535613 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -222,7 +222,7 @@ class BlockList extends Component {
 						</AsyncModeProvider>
 					);
 				} ) }
-				<BlockListAppender rootClientId={ rootClientId } />
+				<BlockListAppender rootClientId={ rootClientId } disableDefaultInserter={ this.props.disableDefaultInserter } />
 			</div>
 		);
 	}
@@ -243,9 +243,15 @@ export default compose( [
 			getSelectedBlockClientId,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
+			getBlock,
 		} = select( 'core/block-editor' );
+
 		const { rootClientId } = ownProps;
 
+		const block = getBlock( rootClientId );
+
+		const hasChildBlocks = block ? !! block.innerBlocks.length : true;
+
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
 			selectionStart: getMultiSelectedBlocksStartClientId(),
@@ -255,6 +261,7 @@ export default compose( [
 			selectedBlockClientId: getSelectedBlockClientId(),
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
 			hasMultiSelection: hasMultiSelection(),
+			disableDefaultInserter: ! hasChildBlocks,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index acbf83e897af7..a021c67288c1f 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -114,13 +114,7 @@
 			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
-			background-image: linear-gradient(
-				-45deg,
-				theme(primary) 28%,
-				color(theme(primary) shade(30%)) 28%,
-				color(theme(primary) shade(30%)) 72%,
-				theme(primary) 72%
-			);
+			background-image: linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%);
 			/* stylelint-enable */
 			border-color: color(theme(primary) shade(50%));
 		}

From 12e7f5c9c47cca29c7398258f08a38c92ac513cb Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 6 Mar 2019 11:42:53 +0000
Subject: [PATCH 02/55] =?UTF-8?q?Updates=20to=20allow=20InnerBlocks=20to?=
 =?UTF-8?q?=20control=20it=E2=80=99s=20placeholder=20when=20empty?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously all Blocks making use of `InnerBlocks` were defaulted to showing the `BlockListAppender` as the placeholder. This update allows `InnerBlocks` to opt-in to this feature. It does however, require some prop drilling under the hood.

Addresses: https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470050676
---
 .../block-editor/src/components/block-list/index.js  |  6 ------
 .../src/components/inner-blocks/README.md            |  5 +++++
 .../src/components/inner-blocks/index.js             | 12 +++++++++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ca43d12535613..ba9a834c0bc94 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -243,15 +243,10 @@ export default compose( [
 			getSelectedBlockClientId,
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
-			getBlock,
 		} = select( 'core/block-editor' );
 
 		const { rootClientId } = ownProps;
 
-		const block = getBlock( rootClientId );
-
-		const hasChildBlocks = block ? !! block.innerBlocks.length : true;
-
 		return {
 			blockClientIds: getBlockOrder( rootClientId ),
 			selectionStart: getMultiSelectedBlocksStartClientId(),
@@ -261,7 +256,6 @@ export default compose( [
 			selectedBlockClientId: getSelectedBlockClientId(),
 			multiSelectedBlockClientIds: getMultiSelectedBlockClientIds(),
 			hasMultiSelection: hasMultiSelection(),
-			disableDefaultInserter: ! hasChildBlocks,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 8904d4b5cceba..f74922c3528ce 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -112,3 +112,8 @@ Template locking allows locking the `InnerBlocks` area for the current template.
 If locking is not set in an `InnerBlocks` area: the locking of the parent `InnerBlocks` area is used.
 
 If the block is a top level block: the locking of the Custom Post Type is used.
+
+### `useBlockAppenderPlaceholder`
+* **Type:** `Boolean`
+
+Determines whether or not to display the `BlockListAppender` button as a placeholder when there are no child Blocks assigned to the `InnerBlocks`. This is as opposed to the default behaviour of inserting a `paragraph` Block automatically.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index b55802a0dfe90..2b83a0ff59fa2 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -102,6 +102,8 @@ class InnerBlocks extends Component {
 			clientId,
 			isSmallScreen,
 			isSelectedBlockInRoot,
+			hasChildBlocks,
+			useBlockAppenderPlaceholder,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -109,11 +111,16 @@ class InnerBlocks extends Component {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
+		// If enabled and there are no child Blocks then show the
+		// `BlockListAppender` as a placeholder
+		const disableDefaultInserter = useBlockAppenderPlaceholder && ! hasChildBlocks;
+
 		return (
 			<div className={ classes }>
 				{ ! templateInProcess && (
 					<BlockList
 						rootClientId={ clientId }
+						disableDefaultInserter={ disableDefaultInserter }
 					/>
 				) }
 			</div>
@@ -135,11 +142,14 @@ InnerBlocks = compose( [
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
 		const rootClientId = getBlockRootClientId( clientId );
+		const block = getBlock( clientId );
+
 		return {
 			isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ),
-			block: getBlock( clientId ),
+			block,
 			blockListSettings: getBlockListSettings( clientId ),
 			parentLock: getTemplateLock( rootClientId ),
+			hasChildBlocks: !! block.innerBlocks.length,
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

From 4cf605165c74ba1a2c8f57f75a26e0bc74d5444e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 6 Mar 2019 11:43:18 +0000
Subject: [PATCH 03/55] Updates Column Block to opt-in to using Block Appender
 as placeholder

---
 packages/block-library/src/column/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index 9c9b4d9271c40..5f85270b1f5de 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -38,7 +38,10 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
-			<InnerBlocks templateLock={ false } />
+			<InnerBlocks 
+                useBlockAppenderPlaceholder={ true }
+                templateLock={ false } 
+             />
 		</div>
 	);
 };

From ea1ea40ec757fae43f6bd9616cc6907dbbfb33f4 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 6 Mar 2019 11:50:57 +0000
Subject: [PATCH 04/55] Fix edge case where block can be null value
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously test for presence of child blocks assumed that the block being interogated would always be present. In some circumstances this isn’t true resulting in an error. Fixed to include check for presence of block as if it isn’t there then it cannot have any children (obviously).
---
 packages/block-editor/src/components/inner-blocks/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 2b83a0ff59fa2..912b7baad014e 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -149,7 +149,7 @@ InnerBlocks = compose( [
 			block,
 			blockListSettings: getBlockListSettings( clientId ),
 			parentLock: getTemplateLock( rootClientId ),
-			hasChildBlocks: !! block.innerBlocks.length,
+			hasChildBlocks: !! ( block && block.innerBlocks.length ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {

From 07557d1dc20bef809bbbfca2e1ef5a5c33429420 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 6 Mar 2019 14:35:28 +0000
Subject: [PATCH 05/55] Simplifies wording on Block Appender

---
 .../block-editor/src/components/block-list-appender/index.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index f3a1e4ff7e80e..3155d0b5ad193 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -54,7 +54,7 @@ function BlockListAppender( {
 							disabled={ disabled }
 						>
 							<Icon icon="insert" />
-							<span>{ __( 'Add a Block' ) }</span>
+							<span>{ __( 'Add Block' ) }</span>
 						</Button>
 
 					</Fragment>

From 5e648ecd25040de207fb5a7842d49b44073ffe7d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 6 Mar 2019 14:37:11 +0000
Subject: [PATCH 06/55] Adds background color to Block Appender

Addresses https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470123022
---
 .../block-editor/src/components/block-list-appender/style.scss   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 3b5bd5546f519..a9a5dae0aae2b 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -11,6 +11,7 @@
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;
+	background-color: rgba(139, 139, 150, 0.1);
 
 	&:hover {
 		outline: $border-width dashed $dark-gray-500;

From 6470b376b203efb4128cb12082331371944bc51d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 7 Mar 2019 09:19:02 +0000
Subject: [PATCH 07/55] Adds support for dark themes

Resolves https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470137344
---
 .../src/components/block-list-appender/style.scss   | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index a9a5dae0aae2b..29ad3386840d7 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -11,7 +11,7 @@
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;
-	background-color: rgba(139, 139, 150, 0.1);
+	background: $dark-opacity-light-200;
 
 	&:hover {
 		outline: $border-width dashed $dark-gray-500;
@@ -22,3 +22,14 @@
 		font-weight: bold;
 	}
 }
+
+// Cater for dark themes
+// https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#dark-backgrounds
+.is-dark-theme .block-list-appender__toggle {
+	background: $light-opacity-light-200;
+	color: $light-gray-100;
+
+	&:hover {
+		outline: $border-width dashed $white;
+	}
+}

From 1d438c28517cc4d01dc484be654a9f464c4b2531 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 7 Mar 2019 10:06:05 +0000
Subject: [PATCH 08/55] Adds keyboard focus support for visual cues

---
 .../src/components/block-list-appender/style.scss           | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 29ad3386840d7..ef3e9a7a75774 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -13,7 +13,8 @@
 	color: $dark-gray-500;
 	background: $dark-opacity-light-200;
 
-	&:hover {
+	&:hover,
+	&:focus {
 		outline: $border-width dashed $dark-gray-500;
 	}
 
@@ -29,7 +30,8 @@
 	background: $light-opacity-light-200;
 	color: $light-gray-100;
 
-	&:hover {
+	&:hover,
+	&:focus {
 		outline: $border-width dashed $white;
 	}
 }

From 0a66f7799395683431323349cb3672655bb2ab49 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 7 Mar 2019 10:06:30 +0000
Subject: [PATCH 09/55] Fixes comment to approved version

Resolves https://github.com/WordPress/gutenberg/pull/14241#pullrequestreview-211682338
---
 .../block-editor/src/components/block-list-appender/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index ef3e9a7a75774..a1778b723dc1a 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -24,8 +24,7 @@
 	}
 }
 
-// Cater for dark themes
-// https://wordpress.org/gutenberg/handbook/designers-developers/developers/themes/theme-support/#dark-backgrounds
+// Use opacity to work in various editor styles
 .is-dark-theme .block-list-appender__toggle {
 	background: $light-opacity-light-200;
 	color: $light-gray-100;

From 57a640ee1982277c7ad833164da0494b4557a184 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 12 Mar 2019 11:25:21 +0000
Subject: [PATCH 10/55] Adjusts background to use lighter colour variant

Resolves https://github.com/WordPress/gutenberg/pull/14241#issuecomment-470536786
---
 .../src/components/block-list-appender/style.scss             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index a1778b723dc1a..f2ae3c7a00e49 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -11,7 +11,7 @@
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;
-	background: $dark-opacity-light-200;
+	background: $dark-opacity-light-100;
 
 	&:hover,
 	&:focus {
@@ -26,7 +26,7 @@
 
 // Use opacity to work in various editor styles
 .is-dark-theme .block-list-appender__toggle {
-	background: $light-opacity-light-200;
+	background: $light-opacity-light-100;
 	color: $light-gray-100;
 
 	&:hover,

From 88606c2c75878ee000661348b102f1174b8c1b15 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 25 Mar 2019 11:52:13 +0000
Subject: [PATCH 11/55] Adds consistent spacing around appender

This update creates a consistent visual spacing around the appender itself. To handle the edge case of Blocks acting as pass through Blocks (which have negative margins) we have to double the margin on these Blocks.
---
 .../src/components/block-list-appender/style.scss | 15 +++++++++++++++
 packages/block-library/src/column/index.js        | 10 +++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index f2ae3c7a00e49..29f121ff918c2 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,3 +1,18 @@
+.block-list-appender {
+	margin: $block-padding;
+
+	// Certain Blocks (eg: Column) act as as a "passthrough container"
+	// and therefore have their vertical margins/padding removed via negative margins
+	// therefore we need to compensate for this here by doubling the spacing on the
+	// vertical to ensure there is equal visual spacing around the inserter. Note there
+	// is no formal API for a passthrough Block but in lieu of that a `is-` class should
+	// suffice here
+	.is-passthrough & {
+		margin-top: $block-padding*2;
+		margin-bottom: $block-padding*2;
+	}
+}
+
 .block-list-appender > .block-editor-inserter {
 	display: block;
 }
diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index 5f85270b1f5de..7f682ba868306 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -24,7 +24,7 @@ export { metadata, name };
 const ColumnEdit = ( { attributes, updateAlignment } ) => {
 	const { verticalAlignment } = attributes;
 
-	const classes = classnames( 'block-core-columns', {
+	const classes = classnames( 'block-core-columns', 'is-passthrough', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 
@@ -38,10 +38,10 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
-			<InnerBlocks 
-                useBlockAppenderPlaceholder={ true }
-                templateLock={ false } 
-             />
+			<InnerBlocks
+				useBlockAppenderPlaceholder={ true }
+				templateLock={ false }
+			/>
 		</div>
 	);
 };

From 6f1baea28ee733e15c0c12626450f0993fd4bf43 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 25 Mar 2019 16:51:42 +0000
Subject: [PATCH 12/55] Removes unecessary Fragment usage

Resolves https://github.com/WordPress/gutenberg/pull/14241#discussion_r268623440
---
 .../components/block-list-appender/index.js   | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 3155d0b5ad193..e2628b946d9a6 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -6,7 +6,6 @@ import { last } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { Fragment } from '@wordpress/element';
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
@@ -46,18 +45,15 @@ function BlockListAppender( {
 			<Inserter
 				rootClientId={ rootClientId }
 				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<Fragment>
-						<Button
-							className="block-list-appender__toggle"
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-							disabled={ disabled }
-						>
-							<Icon icon="insert" />
-							<span>{ __( 'Add Block' ) }</span>
-						</Button>
-
-					</Fragment>
+					<Button
+						className="block-list-appender__toggle"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						disabled={ disabled }
+					>
+						<Icon icon="insert" />
+						<span>{ __( 'Add Block' ) }</span>
+					</Button>
 				) }
 				isAppender
 			/>

From 08dc9142c3da49fa86ec92f45f697a3fa10f0dda Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 26 Mar 2019 10:51:45 +0000
Subject: [PATCH 13/55] =?UTF-8?q?Adjusts=20font=20weight=20and=20space=20b?=
 =?UTF-8?q?etween=20icon=20and=20=E2=80=9CAdd=20Block=E2=80=9D=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses part of https://github.com/WordPress/gutenberg/pull/14241#issuecomment-476543285
---
 .../block-editor/src/components/block-list-appender/style.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 29f121ff918c2..cdbec85fc759f 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -34,8 +34,7 @@
 	}
 
 	> span {
-		margin-top: 1em;
-		font-weight: bold;
+		margin-top: 0.5em;
 	}
 }
 

From f7365751496191b8c182b7a0ad8210451380780e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 26 Mar 2019 10:59:53 +0000
Subject: [PATCH 14/55] Adjusts appender padding to match supplied visual

Addresses visual design as provided in https://github.com/WordPress/gutenberg/pull/14241#issuecomment-476543285
---
 .../block-editor/src/components/block-list-appender/style.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index cdbec85fc759f..95e34dc67c067 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -22,7 +22,7 @@
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	padding: $grid-size-large * 2;
+	padding: $block-padding*1.5;
 	outline: $border-width dashed $dark-gray-150;
 	width: 100%;
 	color: $dark-gray-500;

From 30f0922e517223ed65ff21811eb8be46d13539ca Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 26 Mar 2019 11:02:49 +0000
Subject: [PATCH 15/55] Aligns appender with sibling Blocks

---
 .../src/components/block-list-appender/style.scss         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 95e34dc67c067..c7298d7dbafb0 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,5 +1,6 @@
 .block-list-appender {
-	margin: $block-padding;
+	margin: $block-padding auto;
+	max-width: $content-width - $block-padding*2 - $block-side-ui-clearance;
 
 	// Certain Blocks (eg: Column) act as as a "passthrough container"
 	// and therefore have their vertical margins/padding removed via negative margins
@@ -13,6 +14,11 @@
 	}
 }
 
+.wp-block .block-list-appender {
+	margin-left: $block-padding;
+	margin-right: $block-padding;
+}
+
 .block-list-appender > .block-editor-inserter {
 	display: block;
 }

From 606896d2e0b100c332a39e42846ebdda570b7b35 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 26 Mar 2019 12:56:04 +0000
Subject: [PATCH 16/55] Revert "Aligns appender with sibling Blocks"

This reverts commit 49b03efe22f79dd45564def2a22d0693ae2530e7.
---
 .../src/components/block-list-appender/style.scss         | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index c7298d7dbafb0..95e34dc67c067 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,6 +1,5 @@
 .block-list-appender {
-	margin: $block-padding auto;
-	max-width: $content-width - $block-padding*2 - $block-side-ui-clearance;
+	margin: $block-padding;
 
 	// Certain Blocks (eg: Column) act as as a "passthrough container"
 	// and therefore have their vertical margins/padding removed via negative margins
@@ -14,11 +13,6 @@
 	}
 }
 
-.wp-block .block-list-appender {
-	margin-left: $block-padding;
-	margin-right: $block-padding;
-}
-
 .block-list-appender > .block-editor-inserter {
 	display: block;
 }

From 05a1dfccd68ed360978640de9d2b24b9b21955ec Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 1 Apr 2019 11:19:30 +0100
Subject: [PATCH 17/55] Updates to use explict and more extenable prop for
 choosing the placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously it was only possible to enable/disable the “Add Block” placeholder. In view of requests to be able to enable yet more states (ie: no Block appender _at all_) the API has been updated to a form which will make it easier to add different placeholders in the future.
---
 .../block-editor/src/components/inner-blocks/README.md     | 7 +++++--
 packages/block-editor/src/components/inner-blocks/index.js | 4 ++--
 packages/block-library/src/column/index.js                 | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index f74922c3528ce..08ad4c6597b22 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -113,7 +113,10 @@ If locking is not set in an `InnerBlocks` area: the locking of the parent `Inner
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 
-### `useBlockAppenderPlaceholder`
+### `placeholderType`
 * **Type:** `Boolean`
+* **Default:** - uses the `DefaultBlockAppender` (`packages/block-editor/src/components/default-block-appender/index.js`) to automatically insert a `paragraph` Block. 
+* **Options:** 
+    - `block-appender` - forces the use of the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
 
-Determines whether or not to display the `BlockListAppender` button as a placeholder when there are no child Blocks assigned to the `InnerBlocks`. This is as opposed to the default behaviour of inserting a `paragraph` Block automatically.
+Determines the type of placeholder to display when there are _no_ child Blocks assigned to the `InnerBlocks`. Defaults to the standard behaviour of automatically inserting a `paragraph` Block. 
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 912b7baad014e..3120ae7908cf4 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -103,7 +103,7 @@ class InnerBlocks extends Component {
 			isSmallScreen,
 			isSelectedBlockInRoot,
 			hasChildBlocks,
-			useBlockAppenderPlaceholder,
+			placeholderType,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -113,7 +113,7 @@ class InnerBlocks extends Component {
 
 		// If enabled and there are no child Blocks then show the
 		// `BlockListAppender` as a placeholder
-		const disableDefaultInserter = useBlockAppenderPlaceholder && ! hasChildBlocks;
+		const disableDefaultInserter = placeholderType && placeholderType === 'block-appender' && ! hasChildBlocks;
 
 		return (
 			<div className={ classes }>
diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index 7f682ba868306..d6d6f2bd5551b 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -39,7 +39,7 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {
 				/>
 			</BlockControls>
 			<InnerBlocks
-				useBlockAppenderPlaceholder={ true }
+				placeholderType={ 'block-appender' }
 				templateLock={ false }
 			/>
 		</div>

From f698f73adcd2278bd09caad9358a0eaafc9be0be Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 1 Apr 2019 11:20:37 +0100
Subject: [PATCH 18/55] Reverts Column to use default placeholder behaviour

As discuseed, removing this from Column to facilitate merge.
---
 packages/block-library/src/column/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index d6d6f2bd5551b..730e69590f1e7 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -39,7 +39,6 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {
 				/>
 			</BlockControls>
 			<InnerBlocks
-				placeholderType={ 'block-appender' }
 				templateLock={ false }
 			/>
 		</div>

From ee2b1823fda289fa36d87f96b7aeaece1b64b5a9 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 1 Apr 2019 11:32:13 +0100
Subject: [PATCH 19/55] =?UTF-8?q?Removes=20=E2=80=9Cis=20passthrough?=
 =?UTF-8?q?=E2=80=9D=20edge=20case=20for=20Columns?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit dc5c3526b1ba10e50a0934d934240307657c174a whilst retaining the consistent spacing around the appender which is still required.

This was reverted because it has been decided that Block List Appender should obey SRP and avoid adding styles to cater of edge case Blocks. Such Block variations should either captured within an API or rather should add overides themselves on an case by case basis.
---
 .../src/components/block-list-appender/style.scss     | 11 -----------
 packages/block-library/src/column/index.js            |  2 +-
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 95e34dc67c067..2c32675db9de2 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -1,16 +1,5 @@
 .block-list-appender {
 	margin: $block-padding;
-
-	// Certain Blocks (eg: Column) act as as a "passthrough container"
-	// and therefore have their vertical margins/padding removed via negative margins
-	// therefore we need to compensate for this here by doubling the spacing on the
-	// vertical to ensure there is equal visual spacing around the inserter. Note there
-	// is no formal API for a passthrough Block but in lieu of that a `is-` class should
-	// suffice here
-	.is-passthrough & {
-		margin-top: $block-padding*2;
-		margin-bottom: $block-padding*2;
-	}
 }
 
 .block-list-appender > .block-editor-inserter {
diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index 730e69590f1e7..e05b0f385a170 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -24,7 +24,7 @@ export { metadata, name };
 const ColumnEdit = ( { attributes, updateAlignment } ) => {
 	const { verticalAlignment } = attributes;
 
-	const classes = classnames( 'block-core-columns', 'is-passthrough', {
+	const classes = classnames( 'block-core-columns', {
 		[ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment,
 	} );
 

From 0b5321741de7752dcb2e54d156894d6520ad05a2 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 1 Apr 2019 11:38:02 +0100
Subject: [PATCH 20/55] Fixes Columns layout edge case for Block Appender
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Whilst “block-appender” mode will not be enabled for Columns by default we should cater for this scenario.
---
 packages/block-library/src/columns/editor.scss | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss
index df861a04359c6..a352eb29c845f 100644
--- a/packages/block-library/src/columns/editor.scss
+++ b/packages/block-library/src/columns/editor.scss
@@ -119,6 +119,18 @@
 	}
 }
 
+/**
+ * Columns act as as a "passthrough container"
+ * and therefore has its vertical margins/padding removed via negative margins
+ * therefore we need to compensate for this here by doubling the spacing on the
+ * vertical to ensure there is equal visual spacing around the inserter. Note there
+ * is no formal API for a "passthrough" Block so this is an edge case overide
+ */
+[data-type="core/columns"] .block-list-appender {
+	margin-top: $block-padding*2;
+	margin-bottom: $block-padding*2;
+}
+
 /**
  * Vertical Alignment Preview
  * note: specificity is important here to ensure individual

From 536f42533a4b7d8c1b963aa4cc7f692402204d04 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 2 Apr 2019 14:28:04 +0100
Subject: [PATCH 21/55] Updates colors for hover and active states

Resolves https://github.com/WordPress/gutenberg/pull/14241#issuecomment-478980953
---
 .../src/components/block-list-appender/style.scss           | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 2c32675db9de2..b405b214ca19d 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -20,6 +20,12 @@
 	&:hover,
 	&:focus {
 		outline: $border-width dashed $dark-gray-500;
+		color: $dark-gray-900;
+	}
+
+	&:active {
+		outline: $border-width dashed $dark-gray-900;
+		color: $dark-gray-900;
 	}
 
 	> span {

From 4abf1f356182c2e04cabe1745d107552d167bc01 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Wed, 3 Apr 2019 09:16:34 +0100
Subject: [PATCH 22/55] Fix docs to show correct variable type

---
 packages/block-editor/src/components/inner-blocks/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 08ad4c6597b22..6eaec13e65897 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -114,7 +114,7 @@ If locking is not set in an `InnerBlocks` area: the locking of the parent `Inner
 If the block is a top level block: the locking of the Custom Post Type is used.
 
 ### `placeholderType`
-* **Type:** `Boolean`
+* **Type:** `String`
 * **Default:** - uses the `DefaultBlockAppender` (`packages/block-editor/src/components/default-block-appender/index.js`) to automatically insert a `paragraph` Block. 
 * **Options:** 
     - `block-appender` - forces the use of the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.

From 558771b2526f13970b5b72cc45bc1293d151081f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 11:44:13 +0100
Subject: [PATCH 23/55] Updates to appender rendering to utilise render prop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously we were constraining control over the type of appenders that could be created. Be utilising an optional render prop we provide developers with the ability to fully customise the render. However, by creating sensible default enum constants within InnerBlocks we preserve the “simple defaults”.
---
 .../components/block-list-appender/index.js   | 55 +++++++++++--------
 .../src/components/block-list/index.js        |  6 +-
 .../src/components/inner-blocks/index.js      | 12 ++--
 3 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index e2628b946d9a6..9c8c11e0352f3 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last } from 'lodash';
+import { last, isFunction, isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -23,13 +23,13 @@ function BlockListAppender( {
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
-	disableDefaultInserter,
+	renderAppender,
 } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
-	if ( ! disableDefaultInserter && canInsertDefaultBlock ) {
+	if ( ! renderAppender && canInsertDefaultBlock ) {
 		return (
 			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
 				<DefaultBlockAppender
@@ -40,25 +40,36 @@ function BlockListAppender( {
 		);
 	}
 
-	return (
-		<div className="block-list-appender">
-			<Inserter
-				rootClientId={ rootClientId }
-				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<Button
-						className="block-list-appender__toggle"
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-					>
-						<Icon icon="insert" />
-						<span>{ __( 'Add Block' ) }</span>
-					</Button>
-				) }
-				isAppender
-			/>
-		</div>
-	);
+	if ( isString( renderAppender ) && renderAppender === 'block-appender' ) {
+		return (
+			<div className="block-list-appender">
+				<Inserter
+					rootClientId={ rootClientId }
+					renderToggle={ ( { onToggle, disabled, isOpen } ) => (
+						<Button
+							className="block-list-appender__toggle"
+							onClick={ onToggle }
+							aria-expanded={ isOpen }
+							disabled={ disabled }
+						>
+							<Icon icon="insert" />
+							<span>{ __( 'Add Block' ) }</span>
+						</Button>
+					) }
+					isAppender
+				/>
+			</div>
+		);
+	}
+
+	// Render prop - custom appender
+	if ( isFunction( renderAppender ) ) {
+		return (
+			<div className="block-list-appender">
+				{ renderAppender() }
+			</div>
+		);
+	}
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index ba9a834c0bc94..2ab1af00bc079 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -196,6 +196,7 @@ class BlockList extends Component {
 			selectedBlockClientId,
 			multiSelectedBlockClientIds,
 			hasMultiSelection,
+			renderAppender,
 		} = this.props;
 
 		return (
@@ -222,7 +223,10 @@ class BlockList extends Component {
 						</AsyncModeProvider>
 					);
 				} ) }
-				<BlockListAppender rootClientId={ rootClientId } disableDefaultInserter={ this.props.disableDefaultInserter } />
+				<BlockListAppender
+					rootClientId={ rootClientId }
+					renderAppender={ renderAppender }
+				/>
 			</div>
 		);
 	}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 3120ae7908cf4..18f836ac7ed65 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -102,8 +102,6 @@ class InnerBlocks extends Component {
 			clientId,
 			isSmallScreen,
 			isSelectedBlockInRoot,
-			hasChildBlocks,
-			placeholderType,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -111,16 +109,12 @@ class InnerBlocks extends Component {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
-		// If enabled and there are no child Blocks then show the
-		// `BlockListAppender` as a placeholder
-		const disableDefaultInserter = placeholderType && placeholderType === 'block-appender' && ! hasChildBlocks;
-
 		return (
 			<div className={ classes }>
 				{ ! templateInProcess && (
 					<BlockList
 						rootClientId={ clientId }
-						disableDefaultInserter={ disableDefaultInserter }
+						renderAppender={ this.props.renderAppender }
 					/>
 				) }
 			</div>
@@ -174,4 +168,8 @@ InnerBlocks.Content = withBlockContentContext(
 	( { BlockContent } ) => <BlockContent />
 );
 
+InnerBlocks.appenderType = {
+	BLOCK: 'block-appender',
+};
+
 export default InnerBlocks;

From b1af61284580b8d4b1a2659797854bfeda7c0f6a Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 11:56:20 +0100
Subject: [PATCH 24/55] Adds default appender as explicit constant
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updates to add default “auto insert” appender behaviour as a constant. This way if it is ever removed as the default we have an explicit constant by which to reference this behaviour by which isn’t tied to the term “default”.
---
 .../block-editor/src/components/block-list-appender/index.js  | 2 +-
 packages/block-editor/src/components/inner-blocks/index.js    | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 9c8c11e0352f3..26dd31b97ecf7 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -29,7 +29,7 @@ function BlockListAppender( {
 		return null;
 	}
 
-	if ( ! renderAppender && canInsertDefaultBlock ) {
+	if ( ( ! renderAppender || renderAppender === 'auto-insert' ) && canInsertDefaultBlock ) {
 		return (
 			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
 				<DefaultBlockAppender
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 18f836ac7ed65..091fe33d50334 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -102,6 +102,7 @@ class InnerBlocks extends Component {
 			clientId,
 			isSmallScreen,
 			isSelectedBlockInRoot,
+			renderAppender,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -114,7 +115,7 @@ class InnerBlocks extends Component {
 				{ ! templateInProcess && (
 					<BlockList
 						rootClientId={ clientId }
-						renderAppender={ this.props.renderAppender }
+						renderAppender={ renderAppender }
 					/>
 				) }
 			</div>
@@ -169,6 +170,7 @@ InnerBlocks.Content = withBlockContentContext(
 );
 
 InnerBlocks.appenderType = {
+	AUTO_INSERT: 'auto-insert',
 	BLOCK: 'block-appender',
 };
 

From 56b87ef1707b57ca6ef182d112bb186135445a6f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 12:13:22 +0100
Subject: [PATCH 25/55] Adds option to hide appender entirely for InnerBlocks
 if children present

Creates separate prop for InnerBlocks to optionally hide the appender if child Blocks are present. The lower level components have been adjusted with `hideAppender` prop to selectively enable/disable rendering of the appender.
---
 .../block-editor/src/components/block-list/index.js  | 12 ++++++++----
 .../src/components/inner-blocks/index.js             |  5 +++++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 2ab1af00bc079..4ecc659b3b529 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -197,6 +197,7 @@ class BlockList extends Component {
 			multiSelectedBlockClientIds,
 			hasMultiSelection,
 			renderAppender,
+			hideAppender,
 		} = this.props;
 
 		return (
@@ -223,10 +224,13 @@ class BlockList extends Component {
 						</AsyncModeProvider>
 					);
 				} ) }
-				<BlockListAppender
-					rootClientId={ rootClientId }
-					renderAppender={ renderAppender }
-				/>
+
+				{ ! hideAppender && (
+					<BlockListAppender
+						rootClientId={ rootClientId }
+						renderAppender={ renderAppender }
+					/>
+				) }
 			</div>
 		);
 	}
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 091fe33d50334..5ebdae5c58800 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -103,6 +103,8 @@ class InnerBlocks extends Component {
 			isSmallScreen,
 			isSelectedBlockInRoot,
 			renderAppender,
+			hideAppenderWhenChildren,
+			hasChildBlocks,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -110,12 +112,15 @@ class InnerBlocks extends Component {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
+		const hideAppender = hideAppenderWhenChildren && hasChildBlocks;
+
 		return (
 			<div className={ classes }>
 				{ ! templateInProcess && (
 					<BlockList
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
+						hideAppender={ hideAppender }
 					/>
 				) }
 			</div>

From 1dc1b8b35a41efc1e801a16b56ad9390413ba7f8 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 13:58:49 +0100
Subject: [PATCH 26/55] Updates documentation for `renderAppender` and
 `hideAppenderWhenChildren`

---
 .../src/components/inner-blocks/README.md     | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 6eaec13e65897..184e08d7d6c1d 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -113,10 +113,23 @@ If locking is not set in an `InnerBlocks` area: the locking of the parent `Inner
 
 If the block is a top level block: the locking of the Custom Post Type is used.
 
-### `placeholderType`
-* **Type:** `String`
-* **Default:** - uses the `DefaultBlockAppender` (`packages/block-editor/src/components/default-block-appender/index.js`) to automatically insert a `paragraph` Block. 
+### `renderAppender`
+* **Type:** `String|Function`
+* **Default:** - `null`. By default the `auto-insert` behaviour (see below) is utilised.
 * **Options:** 
-    - `block-appender` - forces the use of the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
+    - `block-appender` - uses the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
+    - `auto-insert` - automatically inserts whichever block is configured as the default block via `wp.blocks.getDefaultBlockName` (typically `paragraph`).
+
+Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
+
+### hideAppenderWhenChildren
+* **Type:** `Boolean`
+* **Default:** - `false`
+* **Options:** 
+  - `false` - does _not_ hide the appender if `InnerBlocks` has child Blocks
+  - `true` - hides the appender if `InnerBlocks` has child Blocks
+
+Determines whether or not to show the appender (as defined by the `renderAppender` prop) if the `InnerBlocks` currently has child Blocks.
+
+
 
-Determines the type of placeholder to display when there are _no_ child Blocks assigned to the `InnerBlocks`. Defaults to the standard behaviour of automatically inserting a `paragraph` Block. 

From a7f0eaade4bf6b804b715a15150aeb3741696ca0 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 14:21:00 +0100
Subject: [PATCH 27/55] Updates to remove superflous usage of `appender` suffix

---
 .../block-editor/src/components/block-list-appender/index.js    | 2 +-
 packages/block-editor/src/components/inner-blocks/README.md     | 2 +-
 packages/block-editor/src/components/inner-blocks/index.js      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 26dd31b97ecf7..0f1c07b4daa89 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -40,7 +40,7 @@ function BlockListAppender( {
 		);
 	}
 
-	if ( isString( renderAppender ) && renderAppender === 'block-appender' ) {
+	if ( isString( renderAppender ) && renderAppender === 'block' ) {
 		return (
 			<div className="block-list-appender">
 				<Inserter
diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 184e08d7d6c1d..d6238e103129b 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -117,7 +117,7 @@ If the block is a top level block: the locking of the Custom Post Type is used.
 * **Type:** `String|Function`
 * **Default:** - `null`. By default the `auto-insert` behaviour (see below) is utilised.
 * **Options:** 
-    - `block-appender` - uses the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
+    - `block` - uses the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
     - `auto-insert` - automatically inserts whichever block is configured as the default block via `wp.blocks.getDefaultBlockName` (typically `paragraph`).
 
 Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 5ebdae5c58800..9596061b63d7b 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -176,7 +176,7 @@ InnerBlocks.Content = withBlockContentContext(
 
 InnerBlocks.appenderType = {
 	AUTO_INSERT: 'auto-insert',
-	BLOCK: 'block-appender',
+	BLOCK: 'block',
 };
 
 export default InnerBlocks;

From 4fc3918e7813fec6ebb2649e441208e2d499e851 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Fri, 5 Apr 2019 14:23:46 +0100
Subject: [PATCH 28/55] Fixes Markdown usage on README heading

---
 packages/block-editor/src/components/inner-blocks/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index d6238e103129b..18d455bef9ba4 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -122,7 +122,7 @@ If the block is a top level block: the locking of the Custom Post Type is used.
 
 Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
 
-### hideAppenderWhenChildren
+### `hideAppenderWhenChildren`
 * **Type:** `Boolean`
 * **Default:** - `false`
 * **Options:** 

From 78f64fc6ff382291eaae0d44cdc3d4bd89b715b7 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Mon, 8 Apr 2019 11:27:39 +0100
Subject: [PATCH 29/55] Fix to ensure default appender render when default
 block is not active

Previously render was returning nothing when `canInsertDefaultBlock` was false (eg: when paragraph Block is disabled but `auto-insert` is still set as the default placeholder when a container Block is inserted. Fixes e2e test failures.
---
 .../components/block-list-appender/index.js   | 74 +++++++++++--------
 1 file changed, 43 insertions(+), 31 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 0f1c07b4daa89..556bbba19589c 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, isFunction, isString } from 'lodash';
+import { last, isFunction } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -18,6 +18,39 @@ import IgnoreNestedEvents from '../ignore-nested-events';
 import DefaultBlockAppender from '../default-block-appender';
 import Inserter from '../inserter';
 
+function renderDefaultAppender( rootClientId, lastBlockClientId ) {
+	return (
+		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+			<DefaultBlockAppender
+				rootClientId={ rootClientId }
+				lastBlockClientId={ lastBlockClientId }
+			/>
+		</IgnoreNestedEvents>
+	);
+}
+
+function renderBlockAppender( rootClientId ) {
+	return (
+		<div className="block-list-appender">
+			<Inserter
+				rootClientId={ rootClientId }
+				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
+					<Button
+						className="block-list-appender__toggle"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						disabled={ disabled }
+					>
+						<Icon icon="insert" />
+						<span>{ __( 'Add Block' ) }</span>
+					</Button>
+				) }
+				isAppender
+			/>
+		</div>
+	);
+}
+
 function BlockListAppender( {
 	blockClientIds,
 	rootClientId,
@@ -29,37 +62,10 @@ function BlockListAppender( {
 		return null;
 	}
 
+	// If auto-insert Blocks is enabled, default to the standard behaviour
+	// of auto-inserting a Block but only if no renderAppender is provided
 	if ( ( ! renderAppender || renderAppender === 'auto-insert' ) && canInsertDefaultBlock ) {
-		return (
-			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-				<DefaultBlockAppender
-					rootClientId={ rootClientId }
-					lastBlockClientId={ last( blockClientIds ) }
-				/>
-			</IgnoreNestedEvents>
-		);
-	}
-
-	if ( isString( renderAppender ) && renderAppender === 'block' ) {
-		return (
-			<div className="block-list-appender">
-				<Inserter
-					rootClientId={ rootClientId }
-					renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-						<Button
-							className="block-list-appender__toggle"
-							onClick={ onToggle }
-							aria-expanded={ isOpen }
-							disabled={ disabled }
-						>
-							<Icon icon="insert" />
-							<span>{ __( 'Add Block' ) }</span>
-						</Button>
-					) }
-					isAppender
-				/>
-			</div>
-		);
+		return renderDefaultAppender( rootClientId, last( blockClientIds ) );
 	}
 
 	// Render prop - custom appender
@@ -70,6 +76,12 @@ function BlockListAppender( {
 			</div>
 		);
 	}
+
+	// If auto-insert is disabled or we have specifically
+	// requested the 'block' appender
+	if ( ! canInsertDefaultBlock || renderAppender === 'block' ) {
+		return renderBlockAppender( rootClientId );
+	}
 }
 
 export default withSelect( ( select, { rootClientId } ) => {

From 10979e1ac961d301d7c9869e29341061ce8759ea Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Tue, 9 Apr 2019 13:21:46 +0100
Subject: [PATCH 30/55] Exposes placeholder defaults as components on
 InnerBlocks

Addresses ideas expressed https://github.com/WordPress/gutenberg/pull/14241#pullrequestreview-223750351

Also an `HideWhenChildren` component to control rendering in scenario when children are present. Note that control over this functionality is now soley controlled by the render prop and cannot be activated via a simple prop.
---
 .../src/components/block-list/index.js        | 11 ++---
 .../inner-blocks/button-appender.js           | 39 ++++++++++++++++++
 .../inner-blocks/default-block-appender.js    | 41 +++++++++++++++++++
 .../src/components/inner-blocks/index.js      | 33 ++++++++++++++-
 .../inner-blocks/utils/with-client-id.js      | 21 ++++++++++
 5 files changed, 137 insertions(+), 8 deletions(-)
 create mode 100644 packages/block-editor/src/components/inner-blocks/button-appender.js
 create mode 100644 packages/block-editor/src/components/inner-blocks/default-block-appender.js
 create mode 100644 packages/block-editor/src/components/inner-blocks/utils/with-client-id.js

diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 4ecc659b3b529..eef6c55eded1a 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -197,7 +197,6 @@ class BlockList extends Component {
 			multiSelectedBlockClientIds,
 			hasMultiSelection,
 			renderAppender,
-			hideAppender,
 		} = this.props;
 
 		return (
@@ -225,12 +224,10 @@ class BlockList extends Component {
 					);
 				} ) }
 
-				{ ! hideAppender && (
-					<BlockListAppender
-						rootClientId={ rootClientId }
-						renderAppender={ renderAppender }
-					/>
-				) }
+				<BlockListAppender
+					rootClientId={ rootClientId }
+					renderAppender={ renderAppender }
+				/>
 			</div>
 		);
 	}
diff --git a/packages/block-editor/src/components/inner-blocks/button-appender.js b/packages/block-editor/src/components/inner-blocks/button-appender.js
new file mode 100644
index 0000000000000..c435a551dadbd
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/button-appender.js
@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
+import withClientId from './utils/with-client-id';
+
+const ButtonAppender = compose( [
+	withClientId,
+] )( function( { clientId } ) {
+	return (
+		<div className="block-list-appender">
+			<Inserter
+				rootClientId={ clientId }
+				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
+					<Button
+						className="block-list-appender__toggle"
+						onClick={ onToggle }
+						aria-expanded={ isOpen }
+						disabled={ disabled }
+					>
+						<Icon icon="insert" />
+						<span>{ __( 'Add Block' ) }</span>
+					</Button>
+				) }
+				isAppender
+			/>
+		</div>
+	);
+} );
+
+export default ButtonAppender;
+
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
new file mode 100644
index 0000000000000..4334050244e1f
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -0,0 +1,41 @@
+/**
+ * External dependencies
+ */
+import { last } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import IgnoreNestedEvents from '../ignore-nested-events';
+import DefaultBlockAppender from '../default-block-appender';
+import withClientId from './utils/with-client-id';
+
+export default compose( [
+	withClientId,
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockOrder,
+		} = select( 'core/block-editor' );
+
+		const blockClientIds = getBlockOrder( clientId );
+
+		return {
+			lastBlockClientId: last( blockClientIds ),
+		};
+	} ),
+] )( function( { clientId, lastBlockClientId } ) {
+	return (
+		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+			<DefaultBlockAppender
+				rootClientId={ clientId }
+				lastBlockClientId={ lastBlockClientId }
+			/>
+		</IgnoreNestedEvents>
+	);
+} );
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 9596061b63d7b..74f50fff851ce 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -12,7 +12,14 @@ import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { compose } from '@wordpress/compose';
+import { compose, ifCondition } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import withClientId from './utils/with-client-id';
+import ButtonAppender from './button-appender';
+import DefaultBlockAppender from './default-block-appender';
 
 /**
  * Internal dependencies
@@ -170,6 +177,30 @@ InnerBlocks = compose( [
 	} ),
 ] )( InnerBlocks );
 
+InnerBlocks.HideWhenChildren = compose( [
+	withClientId,
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlock,
+		} = select( 'core/block-editor' );
+
+		const block = getBlock( clientId );
+
+		return {
+			hasChildBlocks: !! ( block && block.innerBlocks.length ),
+		};
+	} ),
+	ifCondition( ( { hasChildBlocks } ) => {
+		return ! hasChildBlocks;
+	} ),
+] )( function( props ) {
+	return props.children;
+} );
+
+// Expose default appender placeholders as components
+InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
+InnerBlocks.ButtonAppender = ButtonAppender;
+
 InnerBlocks.Content = withBlockContentContext(
 	( { BlockContent } ) => <BlockContent />
 );
diff --git a/packages/block-editor/src/components/inner-blocks/utils/with-client-id.js b/packages/block-editor/src/components/inner-blocks/utils/with-client-id.js
new file mode 100644
index 0000000000000..fc52e4c879805
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/utils/with-client-id.js
@@ -0,0 +1,21 @@
+/**
+ * External dependencies
+ */
+import { pick } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { withBlockEditContext } from '../../block-edit/context';
+
+const withClientId = createHigherOrderComponent(
+	( WrappedComponent ) => withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) )( WrappedComponent ),
+	'withClientId'
+);
+
+export default withClientId;

From bd4e2aebff2329213b0ed093680acf7af2679aa3 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 09:53:36 +0100
Subject: [PATCH 31/55] Adds mixins to handle visually hiding content but
 preserving for screenreaders

For approach see https://a11yproject.com/posts/how-to-hide-content/
---
 assets/stylesheets/_mixins.scss | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 111f65dfc411b..8bd67727ef1f5 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/assets/stylesheets/_mixins.scss
@@ -343,6 +343,28 @@
 	}
 }
 
+/**
+ * Hides content visually whilst preserving for assistive
+ * technologies such as screenreaders.
+ * see: https://a11yproject.com/posts/how-to-hide-content/
+ */
+@mixin screenreadertext {
+	position: absolute !important;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	clip: rect(1px 1px 1px 1px);
+	clip: rect(1px, 1px, 1px, 1px);
+}
+
+/**
+ * Alias for `screenreadertext`
+ * see `screenreadertext` mixin
+ */
+@mixin visuallyhidden {
+	@include screenreadertext();
+}
+
 /**
  * Reset default styles for JavaScript UI based pages.
  * This is a WP-admin agnostic reset

From 1df2ca06b37cbccb5684e31c1d7a37f6acacb748 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 09:55:06 +0100
Subject: [PATCH 32/55] =?UTF-8?q?Removes=20the=20=E2=80=9CAdd=20Block?=
 =?UTF-8?q?=E2=80=9D=20text=20from=20the=20button=20appender?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hides text visually but retains it for assistive technologies as we cannot rely on an icon to convey meaning.

Addresses https://github.com/WordPress/gutenberg/pull/14241#issuecomment-481684516
---
 .../block-editor/src/components/block-list-appender/index.js    | 2 +-
 .../block-editor/src/components/block-list-appender/style.scss  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 556bbba19589c..d762ed2deece2 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -41,8 +41,8 @@ function renderBlockAppender( rootClientId ) {
 						aria-expanded={ isOpen }
 						disabled={ disabled }
 					>
-						<Icon icon="insert" />
 						<span>{ __( 'Add Block' ) }</span>
+						<Icon icon="insert" />
 					</Button>
 				) }
 				isAppender
diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index b405b214ca19d..1f96dbc9839cf 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -29,7 +29,7 @@
 	}
 
 	> span {
-		margin-top: 0.5em;
+		@include screenreadertext();
 	}
 }
 

From f390c55afb23ced117abd8fca04520c55adc6558 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 11:02:48 +0100
Subject: [PATCH 33/55] Adds Button Block Appender component to DRY up
 component usage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously we had duplicates of the Button appender both within `InnerBlocks` and again within the `BlockListAppender` component. Creates a new standalone  `ButtonBlockAppender` component which is used across both components.

Also removes option to provide enum to `InnerBlocks` `renderAppender` prop. Now only render functions are valid. We still expose x2 default “appenders” on `InnerBlocks` to enable easy usage.
---
 packages/block-editor/README.md               |  4 ++
 .../components/block-list-appender/index.js   | 56 ++++++-------------
 .../components/block-list-appender/style.scss | 38 -------------
 .../components/button-block-appender/index.js | 33 +++++++++++
 .../button-block-appender/style.scss          | 38 +++++++++++++
 packages/block-editor/src/components/index.js |  1 +
 .../inner-blocks/button-appender.js           | 39 -------------
 .../inner-blocks/button-block-appender.js     | 20 +++++++
 .../src/components/inner-blocks/index.js      |  9 +--
 packages/block-editor/src/style.scss          |  1 +
 10 files changed, 116 insertions(+), 123 deletions(-)
 create mode 100644 packages/block-editor/src/components/button-block-appender/index.js
 create mode 100644 packages/block-editor/src/components/button-block-appender/style.scss
 delete mode 100644 packages/block-editor/src/components/inner-blocks/button-appender.js
 create mode 100644 packages/block-editor/src/components/inner-blocks/button-block-appender.js

diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md
index d96fbbd9331f2..ff189e70ba88a 100644
--- a/packages/block-editor/README.md
+++ b/packages/block-editor/README.md
@@ -140,6 +140,10 @@ Undocumented declaration.
 
 Undocumented declaration.
 
+<a name="ButtonBlockerAppender" href="#ButtonBlockerAppender">#</a> **ButtonBlockerAppender**
+
+Undocumented declaration.
+
 <a name="ColorPalette" href="#ColorPalette">#</a> **ColorPalette**
 
 Undocumented declaration.
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index d762ed2deece2..598a2fe464ed6 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -8,48 +8,13 @@ import { last, isFunction } from 'lodash';
  */
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { Button, Icon } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import IgnoreNestedEvents from '../ignore-nested-events';
 import DefaultBlockAppender from '../default-block-appender';
-import Inserter from '../inserter';
-
-function renderDefaultAppender( rootClientId, lastBlockClientId ) {
-	return (
-		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-			<DefaultBlockAppender
-				rootClientId={ rootClientId }
-				lastBlockClientId={ lastBlockClientId }
-			/>
-		</IgnoreNestedEvents>
-	);
-}
-
-function renderBlockAppender( rootClientId ) {
-	return (
-		<div className="block-list-appender">
-			<Inserter
-				rootClientId={ rootClientId }
-				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<Button
-						className="block-list-appender__toggle"
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-					>
-						<span>{ __( 'Add Block' ) }</span>
-						<Icon icon="insert" />
-					</Button>
-				) }
-				isAppender
-			/>
-		</div>
-	);
-}
+import ButtonBlockAppender from '../button-block-appender';
 
 function BlockListAppender( {
 	blockClientIds,
@@ -65,7 +30,16 @@ function BlockListAppender( {
 	// If auto-insert Blocks is enabled, default to the standard behaviour
 	// of auto-inserting a Block but only if no renderAppender is provided
 	if ( ( ! renderAppender || renderAppender === 'auto-insert' ) && canInsertDefaultBlock ) {
-		return renderDefaultAppender( rootClientId, last( blockClientIds ) );
+		return (
+			<div className="block-list-appender">
+				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+					<DefaultBlockAppender
+						rootClientId={ rootClientId }
+						lastBlockClientId={ last( blockClientIds ) }
+					/>
+				</IgnoreNestedEvents>
+			</div>
+		);
 	}
 
 	// Render prop - custom appender
@@ -79,8 +53,12 @@ function BlockListAppender( {
 
 	// If auto-insert is disabled or we have specifically
 	// requested the 'block' appender
-	if ( ! canInsertDefaultBlock || renderAppender === 'block' ) {
-		return renderBlockAppender( rootClientId );
+	if ( ! canInsertDefaultBlock || renderAppender === 'button' ) {
+		return (
+			<div className="block-list-appender">
+				<ButtonBlockAppender rootClientId={ rootClientId } />
+			</div>
+		);
 	}
 }
 
diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss
index 1f96dbc9839cf..026e899dbe302 100644
--- a/packages/block-editor/src/components/block-list-appender/style.scss
+++ b/packages/block-editor/src/components/block-list-appender/style.scss
@@ -5,41 +5,3 @@
 .block-list-appender > .block-editor-inserter {
 	display: block;
 }
-
-.block-list-appender__toggle {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: $block-padding*1.5;
-	outline: $border-width dashed $dark-gray-150;
-	width: 100%;
-	color: $dark-gray-500;
-	background: $dark-opacity-light-100;
-
-	&:hover,
-	&:focus {
-		outline: $border-width dashed $dark-gray-500;
-		color: $dark-gray-900;
-	}
-
-	&:active {
-		outline: $border-width dashed $dark-gray-900;
-		color: $dark-gray-900;
-	}
-
-	> span {
-		@include screenreadertext();
-	}
-}
-
-// Use opacity to work in various editor styles
-.is-dark-theme .block-list-appender__toggle {
-	background: $light-opacity-light-100;
-	color: $light-gray-100;
-
-	&:hover,
-	&:focus {
-		outline: $border-width dashed $white;
-	}
-}
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
new file mode 100644
index 0000000000000..78819cc7ed403
--- /dev/null
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
+
+const ButtonBlockAppender = function( { rootClientId } ) {
+	return (
+		<Inserter
+			rootClientId={ rootClientId }
+			renderToggle={ ( { onToggle, disabled, isOpen } ) => (
+				<Button
+					className="button-block-appender"
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+					disabled={ disabled }
+				>
+					<span>{ __( 'Add Block' ) }</span>
+					<Icon icon="insert" />
+				</Button>
+			) }
+			isAppender
+		/>
+	);
+};
+
+export default ButtonBlockAppender;
+
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
new file mode 100644
index 0000000000000..202834ce7aee4
--- /dev/null
+++ b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -0,0 +1,38 @@
+
+.button-block-appender {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: $block-padding*1.5;
+	outline: $border-width dashed $dark-gray-150;
+	width: 100%;
+	color: $dark-gray-500;
+	background: $dark-opacity-light-100;
+
+	&:hover,
+	&:focus {
+		outline: $border-width dashed $dark-gray-500;
+		color: $dark-gray-900;
+	}
+
+	&:active {
+		outline: $border-width dashed $dark-gray-900;
+		color: $dark-gray-900;
+	}
+
+	> span {
+		@include screenreadertext();
+	}
+}
+
+// Use opacity to work in various editor styles
+.is-dark-theme .button-block-appender {
+	background: $light-opacity-light-100;
+	color: $light-gray-100;
+
+	&:hover,
+	&:focus {
+		outline: $border-width dashed $white;
+	}
+}
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
index c9a454c253d27..22d532f4fd826 100644
--- a/packages/block-editor/src/components/index.js
+++ b/packages/block-editor/src/components/index.js
@@ -8,6 +8,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
+export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';
 export { default as withColorContext } from './color-palette/with-color-context';
 export * from './colors';
diff --git a/packages/block-editor/src/components/inner-blocks/button-appender.js b/packages/block-editor/src/components/inner-blocks/button-appender.js
deleted file mode 100644
index c435a551dadbd..0000000000000
--- a/packages/block-editor/src/components/inner-blocks/button-appender.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-import { Button, Icon } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import Inserter from '../inserter';
-import withClientId from './utils/with-client-id';
-
-const ButtonAppender = compose( [
-	withClientId,
-] )( function( { clientId } ) {
-	return (
-		<div className="block-list-appender">
-			<Inserter
-				rootClientId={ clientId }
-				renderToggle={ ( { onToggle, disabled, isOpen } ) => (
-					<Button
-						className="block-list-appender__toggle"
-						onClick={ onToggle }
-						aria-expanded={ isOpen }
-						disabled={ disabled }
-					>
-						<Icon icon="insert" />
-						<span>{ __( 'Add Block' ) }</span>
-					</Button>
-				) }
-				isAppender
-			/>
-		</div>
-	);
-} );
-
-export default ButtonAppender;
-
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
new file mode 100644
index 0000000000000..73cefd3c24ce4
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import BBlockAppender from '../button-block-appender';
+import withClientId from './utils/with-client-id';
+
+const ButtonBlockAppender = compose( [
+	withClientId,
+] )( function( { clientId } ) {
+	return (
+		<BBlockAppender rootClientId={ clientId } />
+	);
+} );
+
+export default ButtonBlockAppender;
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 74f50fff851ce..a9d1633b5b337 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -18,7 +18,7 @@ import { compose, ifCondition } from '@wordpress/compose';
  * Internal dependencies
  */
 import withClientId from './utils/with-client-id';
-import ButtonAppender from './button-appender';
+import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
 
 /**
@@ -199,15 +199,10 @@ InnerBlocks.HideWhenChildren = compose( [
 
 // Expose default appender placeholders as components
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
-InnerBlocks.ButtonAppender = ButtonAppender;
+InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
 InnerBlocks.Content = withBlockContentContext(
 	( { BlockContent } ) => <BlockContent />
 );
 
-InnerBlocks.appenderType = {
-	AUTO_INSERT: 'auto-insert',
-	BLOCK: 'block',
-};
-
 export default InnerBlocks;
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
index deedea8be7ec1..23d70816397da 100644
--- a/packages/block-editor/src/style.scss
+++ b/packages/block-editor/src/style.scss
@@ -12,6 +12,7 @@
 @import "./components/block-switcher/style.scss";
 @import "./components/block-toolbar/style.scss";
 @import "./components/block-types-list/style.scss";
+@import "./components/button-block-appender/style.scss";
 @import "./components/color-palette/control.scss";
 @import "./components/contrast-checker/style.scss";
 @import "./components/default-block-appender/style.scss";

From 58cd20ae46b6f52edfa3b16ca8e2504b656d67d9 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 11:07:04 +0100
Subject: [PATCH 34/55] Removes superfluous enum handling on renderAppender
 prop

---
 .../src/components/block-list-appender/index.js           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 598a2fe464ed6..cf89da84572a1 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -29,7 +29,7 @@ function BlockListAppender( {
 
 	// If auto-insert Blocks is enabled, default to the standard behaviour
 	// of auto-inserting a Block but only if no renderAppender is provided
-	if ( ( ! renderAppender || renderAppender === 'auto-insert' ) && canInsertDefaultBlock ) {
+	if ( ! renderAppender && canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">
 				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
@@ -51,9 +51,9 @@ function BlockListAppender( {
 		);
 	}
 
-	// If auto-insert is disabled or we have specifically
-	// requested the 'block' appender
-	if ( ! canInsertDefaultBlock || renderAppender === 'button' ) {
+	// Fallback in the case no renderAppender has been provided
+	// and we can't auto-insert the default block
+	if ( ! canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">
 				<ButtonBlockAppender rootClientId={ rootClientId } />

From 6a13d8699aebe128f0627281ce3eb67d3ea126f8 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 11:09:03 +0100
Subject: [PATCH 35/55] Minor - updates comments to end in full stops

Addresses https://github.com/WordPress/gutenberg/pull/14241#discussion_r273870388
---
 .../src/components/block-list-appender/index.js             | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index cf89da84572a1..16238978db81f 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -28,7 +28,7 @@ function BlockListAppender( {
 	}
 
 	// If auto-insert Blocks is enabled, default to the standard behaviour
-	// of auto-inserting a Block but only if no renderAppender is provided
+	// of auto-inserting a Block but only if no renderAppender is provided.
 	if ( ! renderAppender && canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">
@@ -42,7 +42,7 @@ function BlockListAppender( {
 		);
 	}
 
-	// Render prop - custom appender
+	// Render prop - custom appender.
 	if ( isFunction( renderAppender ) ) {
 		return (
 			<div className="block-list-appender">
@@ -52,7 +52,7 @@ function BlockListAppender( {
 	}
 
 	// Fallback in the case no renderAppender has been provided
-	// and we can't auto-insert the default block
+	// and we can't auto-insert the default block.
 	if ( ! canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">

From b26a5a611e802a500d14bdf59ce668248b707661 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 11:15:20 +0100
Subject: [PATCH 36/55] Extracts `hideWhenChildBlocks` component for use on
 `InnerBlocks`

---
 .../inner-blocks/hide-when-child-blocks.js    | 32 +++++++++++++++++
 .../src/components/inner-blocks/index.js      | 36 +++----------------
 2 files changed, 37 insertions(+), 31 deletions(-)
 create mode 100644 packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js

diff --git a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
new file mode 100644
index 0000000000000..6dd2412bf2045
--- /dev/null
+++ b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import { compose, ifCondition } from '@wordpress/compose';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import withClientId from './utils/with-client-id';
+
+export const hideWhenChildBlocks = function( props ) {
+	return props.children;
+};
+
+export default compose( [
+	withClientId,
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlock,
+		} = select( 'core/block-editor' );
+
+		const block = getBlock( clientId );
+
+		return {
+			hasChildBlocks: !! ( block && block.innerBlocks.length ),
+		};
+	} ),
+	ifCondition( ( { hasChildBlocks } ) => {
+		return ! hasChildBlocks;
+	} ),
+] )( hideWhenChildBlocks );
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index a9d1633b5b337..ee224af8ecc28 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -12,14 +12,14 @@ import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
-import { compose, ifCondition } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
-import withClientId from './utils/with-client-id';
 import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
+import HideWhenChildBlocks from './hide-when-child-blocks';
 
 /**
  * Internal dependencies
@@ -110,8 +110,6 @@ class InnerBlocks extends Component {
 			isSmallScreen,
 			isSelectedBlockInRoot,
 			renderAppender,
-			hideAppenderWhenChildren,
-			hasChildBlocks,
 		} = this.props;
 		const { templateInProcess } = this.state;
 
@@ -119,15 +117,12 @@ class InnerBlocks extends Component {
 			'has-overlay': isSmallScreen && ! isSelectedBlockInRoot,
 		} );
 
-		const hideAppender = hideAppenderWhenChildren && hasChildBlocks;
-
 		return (
 			<div className={ classes }>
 				{ ! templateInProcess && (
 					<BlockList
 						rootClientId={ clientId }
 						renderAppender={ renderAppender }
-						hideAppender={ hideAppender }
 					/>
 				) }
 			</div>
@@ -149,14 +144,12 @@ InnerBlocks = compose( [
 		} = select( 'core/block-editor' );
 		const { clientId } = ownProps;
 		const rootClientId = getBlockRootClientId( clientId );
-		const block = getBlock( clientId );
 
 		return {
 			isSelectedBlockInRoot: isBlockSelected( clientId ) || hasSelectedInnerBlock( clientId ),
-			block,
+			block: getBlock( clientId ),
 			blockListSettings: getBlockListSettings( clientId ),
 			parentLock: getTemplateLock( rootClientId ),
-			hasChildBlocks: !! ( block && block.innerBlocks.length ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps ) => {
@@ -177,29 +170,10 @@ InnerBlocks = compose( [
 	} ),
 ] )( InnerBlocks );
 
-InnerBlocks.HideWhenChildren = compose( [
-	withClientId,
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlock,
-		} = select( 'core/block-editor' );
-
-		const block = getBlock( clientId );
-
-		return {
-			hasChildBlocks: !! ( block && block.innerBlocks.length ),
-		};
-	} ),
-	ifCondition( ( { hasChildBlocks } ) => {
-		return ! hasChildBlocks;
-	} ),
-] )( function( props ) {
-	return props.children;
-} );
-
-// Expose default appender placeholders as components
+// Expose default appender placeholders as components.
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
+InnerBlocks.HideWhenChildBlocks = HideWhenChildBlocks;
 
 InnerBlocks.Content = withBlockContentContext(
 	( { BlockContent } ) => <BlockContent />

From d886e568e6859608d6d47bfce75ce0ceb4ea296f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 11:35:06 +0100
Subject: [PATCH 37/55] Updates docs with correct props and usage examples

---
 .../src/components/inner-blocks/README.md     | 48 ++++++++++++++-----
 1 file changed, 36 insertions(+), 12 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 18d455bef9ba4..eefe999615b81 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -114,22 +114,46 @@ If locking is not set in an `InnerBlocks` area: the locking of the parent `Inner
 If the block is a top level block: the locking of the Custom Post Type is used.
 
 ### `renderAppender`
-* **Type:** `String|Function`
-* **Default:** - `null`. By default the `auto-insert` behaviour (see below) is utilised.
-* **Options:** 
-    - `block` - uses the Block List Appender (`packages/block-editor/src/components/block-list-appender/index.js`) to display a "Add Block" message with an icon which fills the Block preview. No default Block is inserted.
-    - `auto-insert` - automatically inserts whichever block is configured as the default block via `wp.blocks.getDefaultBlockName` (typically `paragraph`).
+* **Type:** `Function`
+* **Default:** - `null`. By default the `<DefaultBlockAppender>` component is used which automatically inserts whichever block is configured as the default block via `wp.blocks.getDefaultBlockName` (typically `paragraph`).
 
 Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
 
-### `hideAppenderWhenChildren`
-* **Type:** `Boolean`
-* **Default:** - `false`
-* **Options:** 
-  - `false` - does _not_ hide the appender if `InnerBlocks` has child Blocks
-  - `true` - hides the appender if `InnerBlocks` has child Blocks
+#### Notes
+* For convience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
+	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon inside a box which fills the Block preview. No default Block is inserted. Clicking the appender reveals the Block picker UI.
+	- `<InnerBlocks.DefaultBlockAppender />` - provides the default "auto-insert" functionality described above under `default`.
+	- `<InnerBlocks.HideWhenChildBlocks />` - will only render `children` if the instance of `InnerBlocks` has no child blocks (typically only at point of first insertion). Once a child Block is added the `children` will not be rendered (see example usage below)
+* Consumers are also free to pass any valid render function which provides full 
+flexibility to define a bespoke appender
+
+#### Example usage
+
+```jsx
+// Utilise a predefined component
+<InnerBlocks
+	renderAppender={ () => (
+		<InnerBlocks.ButtonBlockAppender />
+	) }
+/>
+
+// Will only display `ButtonBlockAppender` when there are no child blocks present
+<InnerBlocks
+	renderAppender={ () => (
+		<InnerBlocks.HideWhenChildBlocks>
+			<InnerBlocks.ButtonBlockAppender />
+		</InnerBlocks.HideWhenChildBlocks>
+	) }
+/>
+
+// Fully custom
+<InnerBlocks
+	renderAppender={ () => (
+		<button className="bespoke-appender" type="button">Some Special Appender</button>
+	) }
+/>
+```
 
-Determines whether or not to show the appender (as defined by the `renderAppender` prop) if the `InnerBlocks` currently has child Blocks.
 
 
 

From 39ce905af4c717408b921c6aa6d3b5b5e919e844 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 12:17:21 +0100
Subject: [PATCH 38/55] Add docs for `ButtonBlockAppender` component

---
 .../button-block-appender/README.md           | 37 +++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 packages/block-editor/src/components/button-block-appender/README.md

diff --git a/packages/block-editor/src/components/button-block-appender/README.md b/packages/block-editor/src/components/button-block-appender/README.md
new file mode 100644
index 0000000000000..65629703141d2
--- /dev/null
+++ b/packages/block-editor/src/components/button-block-appender/README.md
@@ -0,0 +1,37 @@
+ButtonBlockAppender
+=============================
+
+`ButtonBlockAppender` provides button with a `+` (plus) icon which when clicked will trigger the default Block `Inserter` UI to allow a Block to be inserted. 
+
+This is typically used as an alternative to the `<DefaultBlockAppender />` component to determine the initial placeholder behaviour for a Block when displayed in the editor UI.
+
+## Usage
+
+In a block's `edit` implementation, render a `<ButtonBlockAppender />` component passing in the `rootClientId`.
+
+
+```jsx
+function render( { clientId }) {
+	return (
+		<div>
+			<p>Some rendered content here</p>
+			<ButtonBlockAppender rootClientId={ clientId } />
+		</div>
+	);
+}
+```
+
+_Note:_ 
+
+## Props
+
+### `rootClientId`
+* **Type:** `String`
+* **Required** `true`
+* **Default:** `undefined`
+
+The `clientId` of the Block from who's root new Blocks should be inserted. This prop is required by the block `Inserter` component. Typically this is the `clientID` of the Block where the prop is being rendered.
+
+## Examples
+
+The [`<InnerBlocks>` component](packages/block-editor/src/components/inner-blocks/) exposes an enhanced version of `ButtonBlockAppender` to allow consumers to choose it as an alternative to the standard behaviour of auto-inserting the default Block (typically `core/paragraph`).
\ No newline at end of file

From 0aaae76dd9a6c24883fa14ba59b72081ab5713bf Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 15:04:22 +0100
Subject: [PATCH 39/55] Adds ability to pass custom CSS className to
 ButtonBlockAppender component

---
 .../src/components/button-block-appender/README.md          | 6 ++++++
 .../src/components/button-block-appender/index.js           | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/README.md b/packages/block-editor/src/components/button-block-appender/README.md
index 65629703141d2..6f29d56bea159 100644
--- a/packages/block-editor/src/components/button-block-appender/README.md
+++ b/packages/block-editor/src/components/button-block-appender/README.md
@@ -32,6 +32,12 @@ _Note:_
 
 The `clientId` of the Block from who's root new Blocks should be inserted. This prop is required by the block `Inserter` component. Typically this is the `clientID` of the Block where the prop is being rendered.
 
+### `className`
+* **Type:** `String`
+* **Default:** `""`
+
+A CSS `class` to be _prepended_ to the default class of `"button-block-appender"`.
+
 ## Examples
 
 The [`<InnerBlocks>` component](packages/block-editor/src/components/inner-blocks/) exposes an enhanced version of `ButtonBlockAppender` to allow consumers to choose it as an alternative to the standard behaviour of auto-inserting the default Block (typically `core/paragraph`).
\ No newline at end of file
diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index 78819cc7ed403..c94968ffecb0a 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -9,13 +9,13 @@ import { __ } from '@wordpress/i18n';
  */
 import Inserter from '../inserter';
 
-const ButtonBlockAppender = function( { rootClientId } ) {
+const ButtonBlockAppender = function( { rootClientId, className = '' } ) {
 	return (
 		<Inserter
 			rootClientId={ rootClientId }
 			renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 				<Button
-					className="button-block-appender"
+					className={ `${ className } button-block-appender` }
 					onClick={ onToggle }
 					aria-expanded={ isOpen }
 					disabled={ disabled }

From faf147fd631ba6b85c809761d5ba402003a3049e Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 15:05:01 +0100
Subject: [PATCH 40/55] Fixes e2e test by ensuring correct className is
 restored on appender when used inside BlockListAppender

---
 .../block-editor/src/components/block-list-appender/index.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 16238978db81f..7b255e99b3e0a 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -56,7 +56,10 @@ function BlockListAppender( {
 	if ( ! canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">
-				<ButtonBlockAppender rootClientId={ rootClientId } />
+				<ButtonBlockAppender
+					rootClientId={ rootClientId }
+					className="block-list-appender__toggle"
+				/>
 			</div>
 		);
 	}

From 4c0ad0cf61524c5ef649dd9db14f53d60282bf3b Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:38:06 +0100
Subject: [PATCH 41/55] Revert "Adds mixins to handle visually hiding content
 but preserving for screenreaders"

This reverts commit 1a9a2f80ad780709fc781532352585772eb68257.
---
 assets/stylesheets/_mixins.scss | 22 ----------------------
 1 file changed, 22 deletions(-)

diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 8bd67727ef1f5..111f65dfc411b 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/assets/stylesheets/_mixins.scss
@@ -343,28 +343,6 @@
 	}
 }
 
-/**
- * Hides content visually whilst preserving for assistive
- * technologies such as screenreaders.
- * see: https://a11yproject.com/posts/how-to-hide-content/
- */
-@mixin screenreadertext {
-	position: absolute !important;
-	height: 1px;
-	width: 1px;
-	overflow: hidden;
-	clip: rect(1px 1px 1px 1px);
-	clip: rect(1px, 1px, 1px, 1px);
-}
-
-/**
- * Alias for `screenreadertext`
- * see `screenreadertext` mixin
- */
-@mixin visuallyhidden {
-	@include screenreadertext();
-}
-
 /**
  * Reset default styles for JavaScript UI based pages.
  * This is a WP-admin agnostic reset

From ff903346f9f6e48740744cbb558269ecf55ad936 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:41:34 +0100
Subject: [PATCH 42/55] Utilise existing WP Core screen reader text class

---
 .../src/components/button-block-appender/index.js             | 2 +-
 .../src/components/button-block-appender/style.scss           | 4 ----
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index c94968ffecb0a..16bc50cba5403 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -20,7 +20,7 @@ const ButtonBlockAppender = function( { rootClientId, className = '' } ) {
 					aria-expanded={ isOpen }
 					disabled={ disabled }
 				>
-					<span>{ __( 'Add Block' ) }</span>
+					<span className="screen-reader-text">{ __( 'Add Block' ) }</span>
 					<Icon icon="insert" />
 				</Button>
 			) }
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
index 202834ce7aee4..c9bb7cdb9825e 100644
--- a/packages/block-editor/src/components/button-block-appender/style.scss
+++ b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -20,10 +20,6 @@
 		outline: $border-width dashed $dark-gray-900;
 		color: $dark-gray-900;
 	}
-
-	> span {
-		@include screenreadertext();
-	}
 }
 
 // Use opacity to work in various editor styles

From d1efe5c8edeef30929712062e1e4d05d2793c2a9 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:50:57 +0100
Subject: [PATCH 43/55] Removes dependency on compose

---
 .../inner-blocks/button-block-appender.js           | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 73cefd3c24ce4..1872b2684975f 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -1,20 +1,13 @@
-/**
- * WordPress dependencies
- */
-import { compose } from '@wordpress/compose';
-
 /**
  * Internal dependencies
  */
 import BBlockAppender from '../button-block-appender';
 import withClientId from './utils/with-client-id';
 
-const ButtonBlockAppender = compose( [
-	withClientId,
-] )( function( { clientId } ) {
+export const ButtonBlockAppender = function( { clientId } ) {
 	return (
 		<BBlockAppender rootClientId={ clientId } />
 	);
-} );
+};
 
-export default ButtonBlockAppender;
+export default withClientId( ButtonBlockAppender );

From 741ccd282c59b377eca4ddfcccb287f4eaf654dd Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:54:11 +0100
Subject: [PATCH 44/55] Improves naming of aliased component

In order to avoid inline component functions within `compose` components have been moved to their own functional components and then enhanced. However this causes a naming clash between the base component and the one being created and then enhanced within this file. As a result, all duplicates are aliased with the `Base` prefix to allow a component of the same name to be reused within the same file.
---
 .../inner-blocks/button-block-appender.js     |  4 ++--
 .../inner-blocks/default-block-appender.js    | 24 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 1872b2684975f..0ac95c9fd2621 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import BBlockAppender from '../button-block-appender';
+import BaseButtonBlockAppender from '../button-block-appender';
 import withClientId from './utils/with-client-id';
 
 export const ButtonBlockAppender = function( { clientId } ) {
 	return (
-		<BBlockAppender rootClientId={ clientId } />
+		<BaseButtonBlockAppender rootClientId={ clientId } />
 	);
 };
 
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index 4334050244e1f..efbaad2e10bb4 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -13,9 +13,20 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import IgnoreNestedEvents from '../ignore-nested-events';
-import DefaultBlockAppender from '../default-block-appender';
+import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './utils/with-client-id';
 
+export const DefaultBlockAppender = function( { clientId, lastBlockClientId } ) {
+	return (
+		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+			<BaseDefaultBlockAppender
+				rootClientId={ clientId }
+				lastBlockClientId={ lastBlockClientId }
+			/>
+		</IgnoreNestedEvents>
+	);
+};
+
 export default compose( [
 	withClientId,
 	withSelect( ( select, { clientId } ) => {
@@ -29,13 +40,4 @@ export default compose( [
 			lastBlockClientId: last( blockClientIds ),
 		};
 	} ),
-] )( function( { clientId, lastBlockClientId } ) {
-	return (
-		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-			<DefaultBlockAppender
-				rootClientId={ clientId }
-				lastBlockClientId={ lastBlockClientId }
-			/>
-		</IgnoreNestedEvents>
-	);
-} );
+] )( DefaultBlockAppender );

From add695c07509eb7f079d9461ff58cc50fe58b88f Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:54:35 +0100
Subject: [PATCH 45/55] Capitalise component name

---
 .../src/components/inner-blocks/hide-when-child-blocks.js     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
index 6dd2412bf2045..6661bb9a9c32b 100644
--- a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
+++ b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
@@ -9,7 +9,7 @@ import { withSelect } from '@wordpress/data';
  */
 import withClientId from './utils/with-client-id';
 
-export const hideWhenChildBlocks = function( props ) {
+export const HideWhenChildBlocks = function( props ) {
 	return props.children;
 };
 
@@ -29,4 +29,4 @@ export default compose( [
 	ifCondition( ( { hasChildBlocks } ) => {
 		return ! hasChildBlocks;
 	} ),
-] )( hideWhenChildBlocks );
+] )( HideWhenChildBlocks );

From 676bd1b1bf679ea74a62fd94ee8e295d5e3ef253 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:56:06 +0100
Subject: [PATCH 46/55] Correct spelling

---
 packages/block-editor/src/components/inner-blocks/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index eefe999615b81..8f2206c857e46 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -120,7 +120,7 @@ If the block is a top level block: the locking of the Custom Post Type is used.
 Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
 
 #### Notes
-* For convience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
+* For convenience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
 	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon inside a box which fills the Block preview. No default Block is inserted. Clicking the appender reveals the Block picker UI.
 	- `<InnerBlocks.DefaultBlockAppender />` - provides the default "auto-insert" functionality described above under `default`.
 	- `<InnerBlocks.HideWhenChildBlocks />` - will only render `children` if the instance of `InnerBlocks` has no child blocks (typically only at point of first insertion). Once a child Block is added the `children` will not be rendered (see example usage below)

From 6d19945b4be318f8f20c6427183bd47098eb172d Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:57:07 +0100
Subject: [PATCH 47/55] Simplifies check for prop

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

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 7b255e99b3e0a..9fe1cd2f9f1c7 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { last, isFunction } from 'lodash';
+import { last } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -43,7 +43,7 @@ function BlockListAppender( {
 	}
 
 	// Render prop - custom appender.
-	if ( isFunction( renderAppender ) ) {
+	if ( renderAppender ) {
 		return (
 			<div className="block-list-appender">
 				{ renderAppender() }

From b36e3a3101fe06bc7721cae237ebe0fc230ff811 Mon Sep 17 00:00:00 2001
From: Dave Smith <getdavemail@gmail.com>
Date: Thu, 11 Apr 2019 17:59:57 +0100
Subject: [PATCH 48/55] Remove `utils` directory and flatten

---
 .../src/components/inner-blocks/button-block-appender.js        | 2 +-
 .../src/components/inner-blocks/default-block-appender.js       | 2 +-
 .../src/components/inner-blocks/hide-when-child-blocks.js       | 2 +-
 .../src/components/inner-blocks/{utils => }/with-client-id.js   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/block-editor/src/components/inner-blocks/{utils => }/with-client-id.js (86%)

diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index 0ac95c9fd2621..e0f4e1b3df170 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import BaseButtonBlockAppender from '../button-block-appender';
-import withClientId from './utils/with-client-id';
+import withClientId from './with-client-id';
 
 export const ButtonBlockAppender = function( { clientId } ) {
 	return (
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index efbaad2e10bb4..007b5e2b42706 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -14,7 +14,7 @@ import { withSelect } from '@wordpress/data';
  */
 import IgnoreNestedEvents from '../ignore-nested-events';
 import BaseDefaultBlockAppender from '../default-block-appender';
-import withClientId from './utils/with-client-id';
+import withClientId from './with-client-id';
 
 export const DefaultBlockAppender = function( { clientId, lastBlockClientId } ) {
 	return (
diff --git a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
index 6661bb9a9c32b..b3b44ccb1217d 100644
--- a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
+++ b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
@@ -7,7 +7,7 @@ import { withSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
-import withClientId from './utils/with-client-id';
+import withClientId from './with-client-id';
 
 export const HideWhenChildBlocks = function( props ) {
 	return props.children;
diff --git a/packages/block-editor/src/components/inner-blocks/utils/with-client-id.js b/packages/block-editor/src/components/inner-blocks/with-client-id.js
similarity index 86%
rename from packages/block-editor/src/components/inner-blocks/utils/with-client-id.js
rename to packages/block-editor/src/components/inner-blocks/with-client-id.js
index fc52e4c879805..35672ba1681f2 100644
--- a/packages/block-editor/src/components/inner-blocks/utils/with-client-id.js
+++ b/packages/block-editor/src/components/inner-blocks/with-client-id.js
@@ -11,7 +11,7 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { withBlockEditContext } from '../../block-edit/context';
+import { withBlockEditContext } from '../block-edit/context';
 
 const withClientId = createHigherOrderComponent(
 	( WrappedComponent ) => withBlockEditContext( ( context ) => pick( context, [ 'clientId' ] ) )( WrappedComponent ),

From bb43af3f1a36a9c8ae9ee021f6f7c9613e8a9278 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 13:19:19 +0800
Subject: [PATCH 49/55] Simplify the use of if statements in BlockListAppender

---
 .../components/block-list-appender/index.js   | 44 +++++++++----------
 1 file changed, 21 insertions(+), 23 deletions(-)

diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 9fe1cd2f9f1c7..215fe23bae525 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -27,22 +27,7 @@ function BlockListAppender( {
 		return null;
 	}
 
-	// If auto-insert Blocks is enabled, default to the standard behaviour
-	// of auto-inserting a Block but only if no renderAppender is provided.
-	if ( ! renderAppender && canInsertDefaultBlock ) {
-		return (
-			<div className="block-list-appender">
-				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-					<DefaultBlockAppender
-						rootClientId={ rootClientId }
-						lastBlockClientId={ last( blockClientIds ) }
-					/>
-				</IgnoreNestedEvents>
-			</div>
-		);
-	}
-
-	// Render prop - custom appender.
+	// A render prop has been provided, use it to render the appender.
 	if ( renderAppender ) {
 		return (
 			<div className="block-list-appender">
@@ -51,18 +36,31 @@ function BlockListAppender( {
 		);
 	}
 
-	// Fallback in the case no renderAppender has been provided
-	// and we can't auto-insert the default block.
-	if ( ! canInsertDefaultBlock ) {
+	// Render the default block appender when renderAppender has not been
+	// provided and the context supports use of the default appender.
+	if ( canInsertDefaultBlock ) {
 		return (
 			<div className="block-list-appender">
-				<ButtonBlockAppender
-					rootClientId={ rootClientId }
-					className="block-list-appender__toggle"
-				/>
+				<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+					<DefaultBlockAppender
+						rootClientId={ rootClientId }
+						lastBlockClientId={ last( blockClientIds ) }
+					/>
+				</IgnoreNestedEvents>
 			</div>
 		);
 	}
+
+	// Fallback in the case no renderAppender has been provided and the
+	// default block can't be inserted.
+	return (
+		<div className="block-list-appender">
+			<ButtonBlockAppender
+				rootClientId={ rootClientId }
+				className="block-list-appender__toggle"
+			/>
+		</div>
+	);
 }
 
 export default withSelect( ( select, { rootClientId } ) => {

From 1dc1ec34f42fd0ab5bae84e669f31ad7c383e00e Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 13:28:33 +0800
Subject: [PATCH 50/55] Use classnames utility to concat classes

---
 .../src/components/button-block-appender/index.js        | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index 16bc50cba5403..3fdc4e972c9a0 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
@@ -9,13 +14,13 @@ import { __ } from '@wordpress/i18n';
  */
 import Inserter from '../inserter';
 
-const ButtonBlockAppender = function( { rootClientId, className = '' } ) {
+const ButtonBlockAppender = function( { rootClientId, className } ) {
 	return (
 		<Inserter
 			rootClientId={ rootClientId }
 			renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 				<Button
-					className={ `${ className } button-block-appender` }
+					className={ classnames( className, 'button-block-appender' ) }
 					onClick={ onToggle }
 					aria-expanded={ isOpen }
 					disabled={ disabled }

From 267626c16d8f6512ab3f71d19c7210787cf2705b Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 13:30:38 +0800
Subject: [PATCH 51/55] Rename class to block-editor-button-block-appender

---
 .../components/button-block-appender/index.js |  2 +-
 .../button-block-appender/style.scss          | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index 3fdc4e972c9a0..a757b30df708c 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -20,7 +20,7 @@ const ButtonBlockAppender = function( { rootClientId, className } ) {
 			rootClientId={ rootClientId }
 			renderToggle={ ( { onToggle, disabled, isOpen } ) => (
 				<Button
-					className={ classnames( className, 'button-block-appender' ) }
+					className={ classnames( className, 'block-editor-button-block-appender' ) }
 					onClick={ onToggle }
 					aria-expanded={ isOpen }
 					disabled={ disabled }
diff --git a/packages/block-editor/src/components/button-block-appender/style.scss b/packages/block-editor/src/components/button-block-appender/style.scss
index c9bb7cdb9825e..5c045aee8afb9 100644
--- a/packages/block-editor/src/components/button-block-appender/style.scss
+++ b/packages/block-editor/src/components/button-block-appender/style.scss
@@ -1,5 +1,4 @@
-
-.button-block-appender {
+.block-editor-button-block-appender {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -20,15 +19,15 @@
 		outline: $border-width dashed $dark-gray-900;
 		color: $dark-gray-900;
 	}
-}
 
-// Use opacity to work in various editor styles
-.is-dark-theme .button-block-appender {
-	background: $light-opacity-light-100;
-	color: $light-gray-100;
+	// Use opacity to work in various editor styles
+	.is-dark-theme & {
+		background: $light-opacity-light-100;
+		color: $light-gray-100;
 
-	&:hover,
-	&:focus {
-		outline: $border-width dashed $white;
+		&:hover,
+		&:focus {
+			outline: $border-width dashed $white;
+		}
 	}
 }

From 2a5e98bd41200ffabc25a74ed1d5edcf87edf9b7 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 13:36:13 +0800
Subject: [PATCH 52/55] Switch to either arrow functions assigned to a const or
 exported function declarations

---
 .../src/components/button-block-appender/index.js          | 7 ++-----
 .../src/components/inner-blocks/button-block-appender.js   | 2 +-
 .../src/components/inner-blocks/default-block-appender.js  | 2 +-
 .../src/components/inner-blocks/hide-when-child-blocks.js  | 2 +-
 4 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/button-block-appender/index.js b/packages/block-editor/src/components/button-block-appender/index.js
index a757b30df708c..8e56596d1827f 100644
--- a/packages/block-editor/src/components/button-block-appender/index.js
+++ b/packages/block-editor/src/components/button-block-appender/index.js
@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
  */
 import Inserter from '../inserter';
 
-const ButtonBlockAppender = function( { rootClientId, className } ) {
+export default function ButtonBlockAppender( { rootClientId, className } ) {
 	return (
 		<Inserter
 			rootClientId={ rootClientId }
@@ -32,7 +32,4 @@ const ButtonBlockAppender = function( { rootClientId, className } ) {
 			isAppender
 		/>
 	);
-};
-
-export default ButtonBlockAppender;
-
+}
diff --git a/packages/block-editor/src/components/inner-blocks/button-block-appender.js b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
index e0f4e1b3df170..af4f355e861ef 100644
--- a/packages/block-editor/src/components/inner-blocks/button-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/button-block-appender.js
@@ -4,7 +4,7 @@
 import BaseButtonBlockAppender from '../button-block-appender';
 import withClientId from './with-client-id';
 
-export const ButtonBlockAppender = function( { clientId } ) {
+export const ButtonBlockAppender = ( { clientId } ) => {
 	return (
 		<BaseButtonBlockAppender rootClientId={ clientId } />
 	);
diff --git a/packages/block-editor/src/components/inner-blocks/default-block-appender.js b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
index 007b5e2b42706..1aa6dbc8548b8 100644
--- a/packages/block-editor/src/components/inner-blocks/default-block-appender.js
+++ b/packages/block-editor/src/components/inner-blocks/default-block-appender.js
@@ -16,7 +16,7 @@ import IgnoreNestedEvents from '../ignore-nested-events';
 import BaseDefaultBlockAppender from '../default-block-appender';
 import withClientId from './with-client-id';
 
-export const DefaultBlockAppender = function( { clientId, lastBlockClientId } ) {
+export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
 	return (
 		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
 			<BaseDefaultBlockAppender
diff --git a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
index b3b44ccb1217d..837b7c0943efc 100644
--- a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
+++ b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
@@ -9,7 +9,7 @@ import { withSelect } from '@wordpress/data';
  */
 import withClientId from './with-client-id';
 
-export const HideWhenChildBlocks = function( props ) {
+export const HideWhenChildBlocks = ( props ) => {
 	return props.children;
 };
 

From e2f745a8fb507ab27a1f0e5411f9a84790db4443 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 13:38:13 +0800
Subject: [PATCH 53/55] revert unintentional formatting changes

---
 packages/block-library/src/column/index.js | 4 +---
 packages/components/src/button/style.scss  | 8 +++++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/column/index.js b/packages/block-library/src/column/index.js
index e05b0f385a170..9c9b4d9271c40 100644
--- a/packages/block-library/src/column/index.js
+++ b/packages/block-library/src/column/index.js
@@ -38,9 +38,7 @@ const ColumnEdit = ( { attributes, updateAlignment } ) => {
 					value={ verticalAlignment }
 				/>
 			</BlockControls>
-			<InnerBlocks
-				templateLock={ false }
-			/>
+			<InnerBlocks templateLock={ false } />
 		</div>
 	);
 };
diff --git a/packages/components/src/button/style.scss b/packages/components/src/button/style.scss
index a021c67288c1f..acbf83e897af7 100644
--- a/packages/components/src/button/style.scss
+++ b/packages/components/src/button/style.scss
@@ -114,7 +114,13 @@
 			background-size: 100px 100%;
 			// Disable reason: This function call looks nicer when each argument is on its own line.
 			/* stylelint-disable */
-			background-image: linear-gradient(-45deg, theme(primary) 28%, color(theme(primary) shade(30%)) 28%, color(theme(primary) shade(30%)) 72%, theme(primary) 72%);
+			background-image: linear-gradient(
+				-45deg,
+				theme(primary) 28%,
+				color(theme(primary) shade(30%)) 28%,
+				color(theme(primary) shade(30%)) 72%,
+				theme(primary) 72%
+			);
 			/* stylelint-enable */
 			border-color: color(theme(primary) shade(50%));
 		}

From 6f4e295977181644ba2afb72bcac7b9ba23811d2 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 15:03:07 +0800
Subject: [PATCH 54/55] Remove HideWhenChildBlocks. This will be added on a
 separate branch

---
 .../src/components/inner-blocks/README.md     | 10 ------
 .../inner-blocks/hide-when-child-blocks.js    | 32 -------------------
 .../src/components/inner-blocks/index.js      |  2 --
 3 files changed, 44 deletions(-)
 delete mode 100644 packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 8f2206c857e46..4ad0c93c6e4aa 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -123,7 +123,6 @@ Determines the placeholder behaviour when the Block is initially inserted. You m
 * For convenience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
 	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon inside a box which fills the Block preview. No default Block is inserted. Clicking the appender reveals the Block picker UI.
 	- `<InnerBlocks.DefaultBlockAppender />` - provides the default "auto-insert" functionality described above under `default`.
-	- `<InnerBlocks.HideWhenChildBlocks />` - will only render `children` if the instance of `InnerBlocks` has no child blocks (typically only at point of first insertion). Once a child Block is added the `children` will not be rendered (see example usage below)
 * Consumers are also free to pass any valid render function which provides full 
 flexibility to define a bespoke appender
 
@@ -137,15 +136,6 @@ flexibility to define a bespoke appender
 	) }
 />
 
-// Will only display `ButtonBlockAppender` when there are no child blocks present
-<InnerBlocks
-	renderAppender={ () => (
-		<InnerBlocks.HideWhenChildBlocks>
-			<InnerBlocks.ButtonBlockAppender />
-		</InnerBlocks.HideWhenChildBlocks>
-	) }
-/>
-
 // Fully custom
 <InnerBlocks
 	renderAppender={ () => (
diff --git a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js b/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
deleted file mode 100644
index 837b7c0943efc..0000000000000
--- a/packages/block-editor/src/components/inner-blocks/hide-when-child-blocks.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { compose, ifCondition } from '@wordpress/compose';
-import { withSelect } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import withClientId from './with-client-id';
-
-export const HideWhenChildBlocks = ( props ) => {
-	return props.children;
-};
-
-export default compose( [
-	withClientId,
-	withSelect( ( select, { clientId } ) => {
-		const {
-			getBlock,
-		} = select( 'core/block-editor' );
-
-		const block = getBlock( clientId );
-
-		return {
-			hasChildBlocks: !! ( block && block.innerBlocks.length ),
-		};
-	} ),
-	ifCondition( ( { hasChildBlocks } ) => {
-		return ! hasChildBlocks;
-	} ),
-] )( HideWhenChildBlocks );
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index ee224af8ecc28..3ee0947fd5081 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -19,7 +19,6 @@ import { compose } from '@wordpress/compose';
  */
 import ButtonBlockAppender from './button-block-appender';
 import DefaultBlockAppender from './default-block-appender';
-import HideWhenChildBlocks from './hide-when-child-blocks';
 
 /**
  * Internal dependencies
@@ -173,7 +172,6 @@ InnerBlocks = compose( [
 // Expose default appender placeholders as components.
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
-InnerBlocks.HideWhenChildBlocks = HideWhenChildBlocks;
 
 InnerBlocks.Content = withBlockContentContext(
 	( { BlockContent } ) => <BlockContent />

From 13d243aaf4505da4c68b7dac39b8d2eafcc8c918 Mon Sep 17 00:00:00 2001
From: Daniel Richards <daniel.richards@automattic.com>
Date: Fri, 12 Apr 2019 15:12:09 +0800
Subject: [PATCH 55/55] Tidy up docs

---
 .../src/components/inner-blocks/README.md             | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/block-editor/src/components/inner-blocks/README.md b/packages/block-editor/src/components/inner-blocks/README.md
index 4ad0c93c6e4aa..321f9a71d0d11 100644
--- a/packages/block-editor/src/components/inner-blocks/README.md
+++ b/packages/block-editor/src/components/inner-blocks/README.md
@@ -115,16 +115,15 @@ If the block is a top level block: the locking of the Custom Post Type is used.
 
 ### `renderAppender`
 * **Type:** `Function`
-* **Default:** - `null`. By default the `<DefaultBlockAppender>` component is used which automatically inserts whichever block is configured as the default block via `wp.blocks.getDefaultBlockName` (typically `paragraph`).
+* **Default:** - `undefined`. When `renderAppender` is not specific the `<DefaultBlockAppender>` component is as a default. It automatically inserts whichever block is configured as the default block via `wp.blocks.setDefaultBlockName` (typically `paragraph`).
 
-Determines the placeholder behaviour when the Block is initially inserted. You may pass a render function to provide your own placeholder as required.
+A 'render prop' function that can be used to customize the block's appender.
 
 #### Notes
 * For convenience two predefined appender components are exposed on `InnerBlocks` which can be consumed within the render function:
-	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon inside a box which fills the Block preview. No default Block is inserted. Clicking the appender reveals the Block picker UI.
-	- `<InnerBlocks.DefaultBlockAppender />` - provides the default "auto-insert" functionality described above under `default`.
-* Consumers are also free to pass any valid render function which provides full 
-flexibility to define a bespoke appender
+	- `<InnerBlocks.ButtonBlockAppender />` -  display a `+` (plus) icon button that, when clicked, displays the block picker menu. No default Block is inserted. 
+	- `<InnerBlocks.DefaultBlockAppender />` - display the default block appender as set by `wp.blocks.setDefaultBlockName`. Typically this is the `paragraph` block.
+* Consumers are also free to pass any valid render function. This provides the full flexibility to define a bespoke block appender.
 
 #### Example usage