diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts index 8721d1200b33..b08cc1159114 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.ts +++ b/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) { diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 8b48ca9d82bd..d72f0cd2ccea 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/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>('blocks') ?? []; this.#managerContext.setBlockTypes(blocks); - const useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); - this.#managerContext.setInlineEditingMode(useInlineEditingAsDefault); + this._useInlineEditingAsDefault = config.getValueByAlias('useInlineEditingAsDefault'); + this.#managerContext.setInlineEditingMode(this._useInlineEditingAsDefault); this.style.maxWidth = config.getValueByAlias('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 }) ?? ''}>`; } - #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` + .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'); + } + } + }}> `; }