Adds Block Appender as placeholder to empty InnerBlocks

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.

packages/block-editor/src/components/block-list-appender/index.js

@@ -8,53 +8,56 @@ import { last } from 'lodash';
  */
 import { withSelect } from '@wordpress/data';
 import { getDefaultBlockName } from '@wordpress/blocks';
-import { __ } from '@wordpress/i18n';
-import { IconButton } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import IgnoreNestedEvents from '../ignore-nested-events';
 import DefaultBlockAppender from '../default-block-appender';
-import Inserter from '../inserter';
+import ButtonBlockAppender from '../button-block-appender';
 
 function BlockListAppender( {
 	blockClientIds,
 	rootClientId,
 	canInsertDefaultBlock,
 	isLocked,
+	renderAppender,
 } ) {
 	if ( isLocked ) {
 		return null;
 	}
 
+	// A render prop has been provided, use it to render the appender.
+	if ( renderAppender ) {
+		return (
+			<div className="block-list-appender">
+				{ renderAppender() }
+			</div>
+		);
+	}
+
+	// Render the default block appender when renderAppender has not been
+	// provided and the context supports use of the default appender.
 	if ( canInsertDefaultBlock ) {
 		return (
-			<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
-				<DefaultBlockAppender
-					rootClientId={ rootClientId }
-					lastBlockClientId={ last( blockClientIds ) }
-				/>
-			</IgnoreNestedEvents>
+			<div className="block-list-appender">
+				<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">
-			<Inserter
+			<ButtonBlockAppender
 				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 }
-					/>
-				) }
-				isAppender
+				className="block-list-appender__toggle"
 			/>
 		</div>
 	);

packages/block-editor/src/components/block-list-appender/style.scss

@@ -1,17 +1,7 @@
-.block-list-appender > .block-editor-inserter {
-	display: block;
+.block-list-appender {
+	margin: $block-padding;
 }
 
-.block-list-appender__toggle {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: $grid-size-large;
-	outline: $border-width dashed $dark-gray-150;
-	width: 100%;
-	color: $dark-gray-500;
-
-	&:hover {
-		outline: $border-width dashed $dark-gray-500;
-	}
+.block-list-appender > .block-editor-inserter {
+	display: block;
 }

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,11 @@ class BlockList extends Component {
 						</AsyncModeProvider>
 					);
 				} ) }
-				<BlockListAppender rootClientId={ rootClientId } />
+
+				<BlockListAppender
+					rootClientId={ rootClientId }
+					renderAppender={ renderAppender }
+				/>
 			</div>
 		);
 	}
@@ -244,6 +249,7 @@ export default compose( [
 			getMultiSelectedBlockClientIds,
 			hasMultiSelection,
 		} = select( 'core/block-editor' );
+
 		const { rootClientId } = ownProps;
 
 		return {

packages/block-editor/src/components/button-block-appender/README.md

@@ -0,0 +1,43 @@
+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.
+
+### `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`).

packages/block-editor/src/components/button-block-appender/index.js

@@ -0,0 +1,35 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { Button, Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import Inserter from '../inserter';
+
+export default function ButtonBlockAppender( { rootClientId, className } ) {
+	return (
+		<Inserter
+			rootClientId={ rootClientId }
+			renderToggle={ ( { onToggle, disabled, isOpen } ) => (
+				<Button
+					className={ classnames( className, 'block-editor-button-block-appender' ) }
+					onClick={ onToggle }
+					aria-expanded={ isOpen }
+					disabled={ disabled }
+				>
+					<span className="screen-reader-text">{ __( 'Add Block' ) }</span>
+					<Icon icon="insert" />
+				</Button>
+			) }
+			isAppender
+		/>
+	);
+}

packages/block-editor/src/components/button-block-appender/style.scss

@@ -0,0 +1,33 @@
+.block-editor-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;
+	}
+
+	// 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;
+		}
+	}
+}

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';

packages/block-editor/src/components/inner-blocks/README.md

@@ -112,3 +112,37 @@ 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.
+
+### `renderAppender`
+* **Type:** `Function`
+* **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`).
+
+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 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
+
+```jsx
+// Utilise a predefined component
+<InnerBlocks
+	renderAppender={ () => (
+		<InnerBlocks.ButtonBlockAppender />
+	) }
+/>
+
+// Fully custom
+<InnerBlocks
+	renderAppender={ () => (
+		<button className="bespoke-appender" type="button">Some Special Appender</button>
+	) }
+/>
+```
+
+
+
+

packages/block-editor/src/components/inner-blocks/button-block-appender.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import BaseButtonBlockAppender from '../button-block-appender';
+import withClientId from './with-client-id';
+
+export const ButtonBlockAppender = ( { clientId } ) => {
+	return (
+		<BaseButtonBlockAppender rootClientId={ clientId } />
+	);
+};
+
+export default withClientId( ButtonBlockAppender );

packages/block-editor/src/components/inner-blocks/default-block-appender.js

@@ -0,0 +1,43 @@
+/**
+ * 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 BaseDefaultBlockAppender from '../default-block-appender';
+import withClientId from './with-client-id';
+
+export const DefaultBlockAppender = ( { clientId, lastBlockClientId } ) => {
+	return (
+		<IgnoreNestedEvents childHandledEvents={ [ 'onFocus', 'onClick', 'onKeyDown' ] }>
+			<BaseDefaultBlockAppender
+				rootClientId={ clientId }
+				lastBlockClientId={ lastBlockClientId }
+			/>
+		</IgnoreNestedEvents>
+	);
+};
+
+export default compose( [
+	withClientId,
+	withSelect( ( select, { clientId } ) => {
+		const {
+			getBlockOrder,
+		} = select( 'core/block-editor' );
+
+		const blockClientIds = getBlockOrder( clientId );
+
+		return {
+			lastBlockClientId: last( blockClientIds ),
+		};
+	} ),
+] )( DefaultBlockAppender );