refactoring and named block insertion

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

@@ -21,18 +21,21 @@ import {
  */
 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, blockName = 'block' } ) => {
+	const label = `${ __( 'Add' ) } ${ blockName }`;
+	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() {
@@ -66,6 +69,7 @@ class Inserter extends Component {
 		const {
 			disabled,
 			hasOneAllowedItem,
+			blockName,
 			createIfOne,
 			renderToggle = defaultRenderToggle,
 		} = this.props;
@@ -74,7 +78,7 @@ class Inserter extends Component {
 			onToggle = createIfOne;
 		}
 
-		return renderToggle( { onToggle, isOpen, disabled } );
+		return renderToggle( { onToggle, isOpen, disabled, blockName } );
 	}
 
 	/**
@@ -120,11 +124,12 @@ class Inserter extends Component {
 
 export default compose( [
 	withSelect( ( select, { rootClientId } ) => {
-		const { hasInserterItems, hasOneAllowedItem } = select( 'core/block-editor' );
+		const { hasInserterItems, hasOneAllowedItem, getOneAllowedItemName } = select( 'core/block-editor' );
 
 		return {
 			hasItems: hasInserterItems( rootClientId ),
 			hasOneAllowedItem: hasOneAllowedItem( rootClientId ),
+			blockName: getOneAllowedItemName( rootClientId ),
 		};
 	} ),
 	withDispatch( ( dispatch, ownProps, { select } ) => {

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

@@ -1345,6 +1345,38 @@ export const hasOneAllowedItem = ( state, rootClientId = null ) => {
 	return false;
 };
 
+/**
+ * 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 {string} The name of the allowed block.
+ */
+export const getOneAllowedItemName = ( state, rootClientId = null ) => {
+	if ( rootClientId ) {
+		const parentBlockListSettings = getBlockListSettings( state, rootClientId );
+
+		if ( get( parentBlockListSettings, [ 'allowedBlocks', 'length' ], 0 ) === 1 ) {
+			let name = get( parentBlockListSettings, [ 'allowedBlocks' ] )[ 0 ];
+			name = name.split( '/' )[ 1 ].replace( '-', ' ' );
+			return name;
+		}
+
+		return false;
+	}
+
+	return false;
+};
+
+/**
+ * Determines whether there is only one item that may be inserted.
+ * @param {Object}  state           		Editor state.
+ * @param {?string} clientId 				Block client ID.
+ * @param {?string} destinationRootClientId Root client ID of block list.
+ * @param {boolean} isAppender 	    		Determines if the block is added to a set of existing
+ * 											blocks in a list.
+ * @return {number} The insertion index.
+ */
 export function getInsertionIndex( state, clientId, destinationRootClientId, isAppender ) {
 	// If the clientId is defined, we insert at the position of the block.
 	if ( clientId ) {