Smart block appender

packages/block-editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -29,7 +29,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     rows={1}
     value="Start writing or type / to choose a block"
   />
-  <WithSelect(IfCondition(Inserter))
+  <WithSelect(WithDispatch(IfCondition(Inserter)))
     isAppender={true}
     position="top right"
   />
@@ -53,7 +53,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     rows={1}
     value="Start writing or type / to choose a block"
   />
-  <WithSelect(IfCondition(Inserter))
+  <WithSelect(WithDispatch(IfCondition(Inserter)))
     isAppender={true}
     position="top right"
   />
@@ -77,7 +77,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     rows={1}
     value=""
   />
-  <WithSelect(IfCondition(Inserter))
+  <WithSelect(WithDispatch(IfCondition(Inserter)))
     isAppender={true}
     position="top right"
   />

packages/block-editor/src/components/inserter/index.js

@@ -1,29 +1,37 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { Dropdown, IconButton } from '@wordpress/components';
 import { Component } from '@wordpress/element';
-import { withSelect } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 import { compose, ifCondition } from '@wordpress/compose';
+import {
+	createBlock,
+	getBlockType,
+} from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import InserterMenu from './menu';
 
-const defaultRenderToggle = ( { onToggle, disabled, isOpen } ) => (
-	<IconButton
-		icon="insert"
-		label={ __( 'Add block' ) }
-		labelPosition="bottom"
-		onClick={ onToggle }
-		className="editor-inserter__toggle block-editor-inserter__toggle"
-		aria-haspopup="true"
-		aria-expanded={ isOpen }
-		disabled={ disabled }
-	/>
-);
+const defaultRenderToggle = ( { onToggle, disabled, isOpen, blockTitle } ) => {
+	const label = blockTitle === '' ? _x( 'Add block', 'Generic label for block inseter button' ) : sprintf( _x( 'Add %s', 'directly add the only allowed block' ), blockTitle );
+
+	return (
+		<IconButton
+			icon="insert"
+			label={ label }
+			labelPosition="bottom"
+			onClick={ onToggle }
+			className="editor-inserter__toggle block-editor-inserter__toggle"
+			aria-haspopup="true"
+			aria-expanded={ isOpen }
+			disabled={ disabled }
+		/>
+	);
+};
 
 class Inserter extends Component {
 	constructor() {
@@ -56,10 +64,17 @@ class Inserter extends Component {
 	renderToggle( { onToggle, isOpen } ) {
 		const {
 			disabled,
+			hasOnlyOneAllowedInserterItem,
+			blockTitle,
+			insertTheOnlyAllowedItem,
 			renderToggle = defaultRenderToggle,
 		} = this.props;
 
-		return renderToggle( { onToggle, isOpen, disabled } );
+		if ( hasOnlyOneAllowedInserterItem ) {
+			onToggle = insertTheOnlyAllowedItem;
+		}
+
+		return renderToggle( { onToggle, isOpen, disabled, blockTitle } );
 	}
 
 	/**
@@ -87,7 +102,6 @@ class Inserter extends Component {
 
 	render() {
 		const { position } = this.props;
-
 		return (
 			<Dropdown
 				className="editor-inserter block-editor-inserter"
@@ -105,10 +119,67 @@ class Inserter extends Component {
 
 export default compose( [
 	withSelect( ( select, { rootClientId } ) => {
-		const { hasInserterItems } = select( 'core/block-editor' );
-
+		const {
+			hasInserterItems,
+			__experimentalHasOnlyOneAllowedBlockType,
+			__experimentalGetTheOnlyAllowedBlockType,
+		} = select( 'core/block-editor' );
+		const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedBlockType( rootClientId ) );
 		return {
 			hasItems: hasInserterItems( rootClientId ),
+			hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedBlockType( rootClientId ),
+			blockTitle: allowedBlock ? allowedBlock.title : '',
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps, { select } ) => {
+		return {
+			insertTheOnlyAllowedItem: () => {
+				const { rootClientId, clientId, isAppender, destinationRootClientId } = ownProps;
+				const {
+					__experimentalHasOnlyOneAllowedBlockType,
+					__experimentalGetTheOnlyAllowedBlockType,
+				} = select( 'core/block-editor' );
+
+				const hasOnlyOneAllowedInserterItem = __experimentalHasOnlyOneAllowedBlockType( rootClientId );
+
+				if ( ! hasOnlyOneAllowedInserterItem ) {
+					return false;
+				}
+
+				const parentAllowedBlocks = __experimentalGetTheOnlyAllowedBlockType( rootClientId );
+
+				function getInsertionIndex() {
+					const {
+						getBlockIndex,
+						getBlockSelectionEnd,
+						getBlockOrder,
+					} = select( 'core/block-editor' );
+
+					// If the clientId is defined, we insert at the position of the block.
+					if ( clientId ) {
+						return getBlockIndex( clientId, destinationRootClientId );
+					}
+
+					// If there a selected block, we insert after the selected block.
+					const end = getBlockSelectionEnd();
+					if ( ! isAppender && end ) {
+						return getBlockIndex( end, destinationRootClientId ) + 1;
+					}
+
+					// Otherwise, we insert at the end of the current rootClientId
+					return getBlockOrder( destinationRootClientId ).length;
+				}
+
+				const {
+					insertBlock,
+				} = dispatch( 'core/block-editor' );
+				const insertedBlock = createBlock( parentAllowedBlocks );
+				insertBlock(
+					insertedBlock,
+					getInsertionIndex(),
+					rootClientId
+				);
+			},
 		};
 	} ),
 	ifCondition( ( { hasItems } ) => hasItems ),

packages/block-editor/src/store/selectors.js

@@ -1284,6 +1284,45 @@ export const hasInserterItems = createSelector(
 	],
 );
 
+/**
+ * Determines whether there is only one item that may be inserted.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {boolean} True if there is one item available, false if zero or more than one.
+ */
+export const __experimentalHasOnlyOneAllowedBlockType = ( state, rootClientId = null ) => {
+	if ( rootClientId ) {
+		const parentBlockListSettings = getBlockListSettings( state, rootClientId );
+		return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1;
+	}
+
+	return false;
+};
+
+/**
+ * Returns the name of the only block type that may be inserted, or null if there isn't exactly one allowed type.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {string?} The name of the allowed block type or null.
+ */
+export const __experimentalGetTheOnlyAllowedBlockType = ( state, rootClientId = null ) => {
+	if ( ! rootClientId ) {
+		return null;
+	}
+	if ( ! __experimentalHasOnlyOneAllowedBlockType( state, rootClientId ) ) {
+		return null;
+	}
+
+	const parentBlockListSettings = getBlockListSettings( state, rootClientId );
+	const name = get( parentBlockListSettings, [ 'allowedBlocks', 0 ], 0 );
+
+	return name;
+};
+
 /**
  * Returns the Block List settings of a block, if any exist.
  *