Block Editor: UX Flow when creating one block / inline editing

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts

@@ -430,7 +430,16 @@ export class UmbBlockGridEntriesContext
 	}
 
 	getPathForCreateBlock(index: number) {
-		return this._catalogueRouteBuilderState.getValue()?.({ view: 'create', index: index });
+		const pathBuilder = this._catalogueRouteBuilderState.getValue();
+		if (!pathBuilder) return undefined;
+
+		const allowedBlockTypes = this.#allowedBlockTypes.getValue();
+		if (allowedBlockTypes?.length === 1) {
+			const elementKey = allowedBlockTypes[0].contentElementTypeKey;
+			return pathBuilder({ view: 'create', index: index }) + 'modal/umb-modal-workspace/create/' + elementKey;
+		}
+
+		return pathBuilder({ view: 'create', index: index });
 	}
 
 	getPathForClipboard(index: number) {

src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

@@ -4,7 +4,16 @@ import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../type
 import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js';
 import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
 import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, property, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit';
+import {
+	html,
+	customElement,
+	property,
+	state,
+	repeat,
+	css,
+	nothing,
+	ifDefined,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import type {
 	UmbPropertyEditorConfigCollection,
@@ -96,8 +105,8 @@ export class UmbPropertyEditorUIBlockListElement
 		const blocks = config.getValueByAlias<Array<UmbBlockTypeBaseModel>>('blocks') ?? [];
 		this.#managerContext.setBlockTypes(blocks);
 
-		const useInlineEditingAsDefault = config.getValueByAlias<boolean>('useInlineEditingAsDefault');
-		this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault);
+		this._useInlineEditingAsDefault = config.getValueByAlias<boolean>('useInlineEditingAsDefault');
+		this.#managerContext.setInlineEditingMode(this._useInlineEditingAsDefault);
 		this.style.maxWidth = config.getValueByAlias<string>('maxPropertyWidth') ?? '';
 
 		this.#managerContext.setEditorConfiguration(config);
@@ -162,6 +171,9 @@ export class UmbPropertyEditorUIBlockListElement
 	@state()
 	private _notSupportedVariantSetting?: boolean;
 
+	@state()
+	private _useInlineEditingAsDefault?: boolean;
+
 	constructor() {
 		super();
 
@@ -405,21 +417,43 @@ export class UmbPropertyEditorUIBlockListElement
 			href=${this._catalogueRouteBuilder?.({ view: 'create', index: index }) ?? ''}></uui-button-inline-create>`;
 	}
 
-	#renderCreateButton() {
-		let createPath: string | undefined;
+	#getPathForCreateBlock(index: number): string | undefined {
 		if (this._blocks?.length === 1) {
 			const elementKey = this._blocks[0].contentElementTypeKey;
-			createPath =
-				this._catalogueRouteBuilder?.({ view: 'create', index: -1 }) + 'modal/umb-modal-workspace/create/' + elementKey;
+			if (this._useInlineEditingAsDefault) {
+				return undefined;
+			} else {
+				return (
+					this._catalogueRouteBuilder?.({ view: 'create', index: index }) +
+					'modal/umb-modal-workspace/create/' +
+					elementKey
+				);
+			}
 		} else {
-			createPath = this._catalogueRouteBuilder?.({ view: 'create', index: -1 });
+			return this._catalogueRouteBuilder?.({ view: 'create', index: index });
 		}
+	}
+
+	#renderCreateButton() {
+		if (!this._catalogueRouteBuilder) return nothing;
+		const createPath = this.#getPathForCreateBlock(-1);
 		return html`
 			<uui-button
 				look="placeholder"
-				label=${this._createButtonLabel}
-				href=${createPath ?? ''}
-				?disabled=${this.readonly}></uui-button>
+				.label=${this._createButtonLabel}
+				href=${ifDefined(createPath)}
+				?disabled=${this.readonly}
+				@click=${async () => {
+					if (this._blocks?.length === 1 && this._useInlineEditingAsDefault) {
+						const originData = { index: -1 };
+						const created = await this.#entriesContext.create(this._blocks[0].contentElementTypeKey, {}, originData);
+						if (created) {
+							this.#entriesContext.insert(created.layout, created.content, created.settings, originData);
+						} else {
+							throw new Error('Failed to create block');
+						}
+					}
+				}}></uui-button>
 		`;
 	}