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,43 @@
+/**
+ * External dependencies
+ */
+import {
+	get,
+} from 'lodash';
 /**
  * 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 +70,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 +108,6 @@ class Inserter extends Component {
 
 	render() {
 		const { position } = this.props;
-
 		return (
 			<Dropdown
 				className="editor-inserter block-editor-inserter"
@@ -105,10 +125,62 @@ class Inserter extends Component {
 
 export default compose( [
 	withSelect( ( select, { rootClientId } ) => {
-		const { hasInserterItems } = select( 'core/block-editor' );
-
+		const { hasInserterItems, __experimentalHasOnlyOneAllowedInserterItem, __experimentalGetTheOnlyAllowedItem } = select( 'core/block-editor' );
+		const allowedBlock = getBlockType( __experimentalGetTheOnlyAllowedItem( rootClientId ) );
 		return {
 			hasItems: hasInserterItems( rootClientId ),
+			hasOnlyOneAllowedInserterItem: __experimentalHasOnlyOneAllowedInserterItem( rootClientId ),
+			blockTitle: allowedBlock ? allowedBlock.title : '',
+		};
+	} ),
+	withDispatch( ( dispatch, ownProps, { select } ) => {
+		return {
+			insertTheOnlyAllowedItem: () => {
+				const { rootClientId, clientId, destinationRootClientId, isAppender } = ownProps;
+				const {
+					getBlockListSettings,
+				} = select( 'core/block-editor' );
+				const parentBlockListSettings = getBlockListSettings( rootClientId );
+				const isOnlyOneAllowedBlock = get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1;
+
+				if ( ! isOnlyOneAllowedBlock ) {
+					return false;
+				}
+
+				const parentAllowedBlocks = get( parentBlockListSettings, [ 'allowedBlocks' ] );
+
+				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[ 0 ] );
+				insertBlock(
+					insertedBlock,
+					getInsertionIndex( clientId, destinationRootClientId, isAppender ),
+					rootClientId
+				);
+			},
 		};
 	} ),
 	ifCondition( ( { hasItems } ) => hasItems ),

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

@@ -478,15 +478,7 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {
-		const {
-			showInsertionPoint,
-			hideInsertionPoint,
-		} = dispatch( 'core/block-editor' );
-
-		// This should be an external action provided in the editor settings.
-		const {
-			__experimentalFetchReusableBlocks: fetchReusableBlocks,
-		} = dispatch( 'core/editor' );
+		const { clientId, destinationRootClientId, isAppender } = ownProps;
 
 		// To avoid duplication, getInsertionIndex is extracted and used in two event handlers
 		// This breaks the withDispatch not containing any logic rule.
@@ -499,7 +491,6 @@ export default compose(
 				getBlockSelectionEnd,
 				getBlockOrder,
 			} = select( 'core/block-editor' );
-			const { clientId, destinationRootClientId, isAppender } = ownProps;
 
 			// If the clientId is defined, we insert at the position of the block.
 			if ( clientId ) {
@@ -516,10 +507,20 @@ export default compose(
 			return getBlockOrder( destinationRootClientId ).length;
 		}
 
+		const {
+			showInsertionPoint,
+			hideInsertionPoint,
+		} = dispatch( 'core/block-editor' );
+
+		// This should be an external action provided in the editor settings.
+		const {
+			__experimentalFetchReusableBlocks: fetchReusableBlocks,
+		} = dispatch( 'core/editor' );
+
 		return {
 			fetchReusableBlocks,
 			showInsertionPoint() {
-				const index = getInsertionIndex();
+				const index = getInsertionIndex( clientId, destinationRootClientId, isAppender );
 				showInsertionPoint( ownProps.destinationRootClientId, index );
 			},
 			hideInsertionPoint,
@@ -531,7 +532,6 @@ export default compose(
 				const {
 					getSelectedBlock,
 				} = select( 'core/block-editor' );
-				const { isAppender } = ownProps;
 				const { name, initialAttributes } = item;
 				const selectedBlock = getSelectedBlock();
 				const insertedBlock = createBlock( name, initialAttributes );

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 __experimentalHasOnlyOneAllowedInserterItem = ( state, rootClientId = null ) => {
+	if ( rootClientId ) {
+		const parentBlockListSettings = getBlockListSettings( state, rootClientId );
+		return get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1;
+	}
+
+	return false;
+};
+
+/**
+ * Gets the name of the only item that may be inserted.
+ *
+ * @param {Object}  state        Editor state.
+ * @param {?string} rootClientId Optional root client ID of block list.
+ *
+ * @return {string?} The name of the allowed block or null.
+ */
+export const __experimentalGetTheOnlyAllowedItem = ( state, rootClientId = null ) => {
+	if ( ! rootClientId ) {
+		return null;
+	}
+	if ( ! __experimentalHasOnlyOneAllowedInserterItem( 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.
  *