@umbraco-cms/backoffice 18.3.0-rc → 19.0.0-beta1

package/dist-cms/packages/block/block-grid/components/block-grid-block-inline/block-grid-block-inline.element.js

@@ -6,18 +6,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
 import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../block-grid-entries/constants.js';
-import { css, customElement, html, property, state, when } from '../../../../../external/lit/index.js';
+import { css, customElement, html, property, state } from '../../../../../external/lit/index.js';
 import { umbExtensionsRegistry } from '../../../../core/extension-registry/index.js';
 import { UmbDataPathPropertyValueQuery } from '../../../../core/validation/index.js';
 import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '../../../../../libs/extension-api/index.js';
 import { UmbLanguageItemRepository } from '../../../../language/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
-import { UMB_BLOCK_WORKSPACE_ALIAS } from '../../../block/index.js';
+import { UMB_BLOCK_WORKSPACE_ALIAS, UmbBlockRefNameSlotMixin } from '../../../block/index.js';
+import '../../../block/components/block-state-tag/block-state-tag.element.js';
 const apiArgsCreator = (manifest) => {
     return [{ manifest }];
 };
-let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extends UmbLitElement {
+/**
+ * @element umb-block-grid-block-inline
+ * @slot name - Content rendered as the block's primary label. The expected projection is a `<umb-ufm-render>` element owned by the parent block-grid entry.
+ */
+let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extends UmbBlockRefNameSlotMixin(UmbLitElement) {
     //
     #blockContext;
     #workspaceContext;
@@ -110,9 +115,6 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
     #expose = () => {
         this.#workspaceContext?.expose();
     };
-    #onUfmResolved = (event) => {
-        this.#blockContext?.setName(event.detail.text);
-    };
     render() {
         return html `
 			<div id="host">
@@ -132,21 +134,9 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				<span id="icon">
 					<umb-icon .name=${this.icon}></umb-icon>
 				</span>
-				<div id="info">
-					<umb-ufm-render
-						id="name"
-						inline
-						.markdown=${this.label}
-						.value=${blockValue}
-						@umb-ufm-resolved=${this.#onUfmResolved}>
-					</umb-ufm-render>
-				</div>
+				<div id="info">${this.renderNameSlot(blockValue)}</div>
 			</span>
-			${when(this.unpublished, () => html `
-					<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}>
-						<umb-localize key="blockEditor_notExposedLabel"></umb-localize>
-					</uui-tag>
-				`)}
+			<umb-block-state-tag slot="name"></umb-block-state-tag>
 		`;
     }
     #renderInside() {
@@ -279,24 +269,19 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 				padding-left: var(--uui-size-2, 6px);
 			}
 
-			uui-tag {
-				margin-left: 0.5em;
-				margin-bottom: -0.3em;
-				margin-top: -0.3em;
-				vertical-align: text-top;
-			}
-
 			:host(:not([disabled])) #open-part:hover #icon {
 				color: var(--uui-color-interactive-emphasis);
 			}
-			:host(:not([disabled])) #open-part:hover #name {
+			:host(:not([disabled])) #open-part:hover #name,
+			:host(:not([disabled])) #open-part:hover ::slotted([slot='name']) {
 				color: var(--uui-color-interactive-emphasis);
 			}
 
 			:host([disabled]) #icon {
 				color: var(--uui-color-disabled-contrast);
 			}
-			:host([disabled]) #name {
+			:host([disabled]) #name,
+			:host([disabled]) ::slotted([slot='name']) {
 				color: var(--uui-color-disabled-contrast);
 			}
 
@@ -311,9 +296,6 @@ let UmbBlockGridBlockInlineElement = class UmbBlockGridBlockInlineElement extend
 __decorate([
     property({ attribute: false })
 ], UmbBlockGridBlockInlineElement.prototype, "config", void 0);
-__decorate([
-    property({ type: String, reflect: false })
-], UmbBlockGridBlockInlineElement.prototype, "label", void 0);
 __decorate([
     property({ type: String, reflect: false })
 ], UmbBlockGridBlockInlineElement.prototype, "icon", void 0);

package/dist-cms/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.d.ts

@@ -1,6 +1,8 @@
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 export declare class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
     #private;
+    private _externalContentFailure?;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];
 }

package/dist-cms/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.js

@@ -4,38 +4,47 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { UMB_BLOCK_ENTRY_CONTEXT } from '../../../block/context/block-entry.context-token.js';
+import { getUnsupportedBlockMessageKeys } from '../../../block/utils/get-unsupported-block-message-keys.function.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
-import { css, customElement, html } from '../../../../../external/lit/index.js';
+import { css, customElement, html, state } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
 let UmbBlockGridBlockUnsupportedElement = class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
+    constructor() {
+        super();
+        this.consumeContext(UMB_BLOCK_ENTRY_CONTEXT, (context) => {
+            this.observe(context?.externalContentFailure, (failure) => (this._externalContentFailure = failure), 'observeExternalContentFailure');
+        });
+    }
     render() {
+        const keys = getUnsupportedBlockMessageKeys(this._externalContentFailure);
         return html `
 			<div id="host">
 				<div id="open-part">
-					${this.#renderBlockInfo()}
+					${this.#renderBlockInfo(keys.nameKey)}
 					<slot></slot>
 					<slot name="tag"></slot>
 				</div>
-				${this.#renderInside()}
+				${this.#renderInside(keys.descriptionKey)}
 			</div>
 		`;
     }
-    #renderBlockInfo() {
+    #renderBlockInfo(nameKey) {
         return html `
 			<span id="content">
 				<span id="icon">
 					<umb-icon name="icon-alert"></umb-icon>
 				</span>
 				<div id="info">
-					<span id="name">${this.localize.term('blockEditor_unsupportedBlockName')}</span>
+					<span id="name">${this.localize.term(nameKey)}</span>
 				</div>
 			</span>
 		`;
     }
-    #renderInside() {
+    #renderInside(descriptionKey) {
         return html `
 			<div id="inside" draggable="false">
-				${this.localize.term('blockEditor_unsupportedBlockDescription')}
+				${this.localize.term(descriptionKey)}
 				<umb-block-grid-areas-container slot="areas"></umb-block-grid-areas-container>
 			</div>
 		`;
@@ -148,6 +157,9 @@ let UmbBlockGridBlockUnsupportedElement = class UmbBlockGridBlockUnsupportedElem
 		`,
     ]; }
 };
+__decorate([
+    state()
+], UmbBlockGridBlockUnsupportedElement.prototype, "_externalContentFailure", void 0);
 UmbBlockGridBlockUnsupportedElement = __decorate([
     customElement('umb-block-grid-block-unsupported')
 ], UmbBlockGridBlockUnsupportedElement);

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.d.ts

@@ -43,12 +43,12 @@ export declare class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<t
         content: {
             key: string;
             contentTypeKey: string;
-            values: import("../../../../content/content/index.js").UmbElementValueModel<unknown>[];
+            values: import("../../../../content/content/index.js").UmbEntryValueModel<unknown>[];
         };
         settings: UmbBlockDataModel | undefined;
     } | undefined>;
     insert(layoutEntry: UmbBlockGridLayoutModel, content: UmbBlockDataModel, settings: UmbBlockDataModel | undefined, originData: UmbBlockGridWorkspaceOriginData): Promise<boolean>;
-    delete(contentKey: string): Promise<void>;
+    delete(key: string): Promise<void>;
     protected _insertFromPropertyValue(value: UmbBlockGridValueModel, originData: UmbBlockGridWorkspaceOriginData): Promise<UmbBlockGridWorkspaceOriginData>;
     protected _insertBlockFromPropertyValue(layoutEntry: UmbBlockGridLayoutModel, value: UmbBlockGridValueModel, originData: UmbBlockGridWorkspaceOriginData): Promise<void>;
     getInvalidBlockTypeLimits(): UmbBlockGridAreaTypeInvalidRuleType[];

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.context.js

@@ -61,13 +61,13 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
     }
     getMinAllowed() {
         if (this.#areaKey) {
-            return this.#areaType.getValue()?.minAllowed ?? 0;
+            return this.#areaType.getValue()?.validationLimit?.min ?? 0;
         }
         return this._manager?.getMinAllowed() ?? 0;
     }
     getMaxAllowed() {
         if (this.#areaKey) {
-            return this.#areaType.getValue()?.maxAllowed ?? Infinity;
+            return this.#areaType.getValue()?.validationLimit?.max ?? Infinity;
         }
         return this._manager?.getMaxAllowed() ?? Infinity;
     }
@@ -115,6 +115,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             const config = propertyContext.getConfig();
             const valueResolver = new UmbClipboardPastePropertyValueTranslatorValueResolver(this);
             const blockTypes = this.#allowedBlockTypes.getValue();
+            const libraryAllowedElementTypeKeys = await this._getLibraryAllowedElementTypeKeys(blockTypes);
             const configuredSize = this._manager
                 .getEditorConfiguration()
                 ?.getValueByAlias('createModalSize');
@@ -129,6 +130,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                     blocks: blockTypes,
                     blockGroups: this._manager.getBlockGroups() ?? [],
                     openClipboard: routingInfo.view === 'clipboard',
+                    libraryAllowedElementTypeKeys,
                     clipboardFilter: async (clipboardEntryDetail) => {
                         const hasSupportedPasteTranslator = clipboardContext.hasSupportedPasteTranslator(pasteTranslatorManifests, clipboardEntryDetail.values);
                         if (!hasSupportedPasteTranslator) {
@@ -152,7 +154,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             };
         })
             .onSubmit(async (value, data) => {
-            if (value?.create && data) {
+            if (value && 'create' in value && data) {
                 const created = await this.create(value.create.contentElementTypeKey, 
                 // We can parse an empty object, cause the rest will be filled in by others.
                 {}, data.originData);
@@ -163,7 +165,10 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                     throw new Error('Failed to create block');
                 }
             }
-            else if (value?.clipboard && value.clipboard.selection?.length && data) {
+            else if (value && 'library' in value) {
+                this._insertExternalContent(value.library.elementKey, data?.originData);
+            }
+            else if (value && 'clipboard' in value && value.clipboard.selection?.length && data) {
                 const clipboardContext = await this.getContext(UMB_CLIPBOARD_PROPERTY_CONTEXT);
                 if (!clipboardContext) {
                     throw new Error('Clipboard context not available');
@@ -296,8 +301,8 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
                 return undefined;
             // No need to observe as this method is called every time the area is changed.
             this.#rangeLimits.setValue({
-                min: areaType.minAllowed ?? 0,
-                max: areaType.maxAllowed ?? Infinity,
+                min: areaType.validationLimit?.min ?? 0,
+                max: areaType.validationLimit?.max ?? Infinity,
             });
         }
         else if (this.#areaKey === null) {
@@ -345,12 +350,12 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
         return this._manager?.insert(layoutEntry, content, settings, originData) ?? false;
     }
     // create Block?
-    async delete(contentKey) {
+    async delete(key) {
         // TODO: Loop through children and delete them as well?
         // Find layout entry:
-        const layout = this._layoutEntries.getValue().find((x) => x.contentKey === contentKey);
+        const layout = this._layoutEntries.getValue().find((x) => x.key === key);
         if (!layout) {
-            throw new Error(`Cannot delete block, missing layout for ${contentKey}`);
+            throw new Error(`Cannot delete block, missing layout for ${key}`);
         }
         // The following loop will only delete the referenced data of sub Layout Entries, as the Layout entry is part of the main Layout Entry they will go away when that is removed. [NL]
         await forEachBlockLayoutEntryOf(layout, async (entry) => {
@@ -360,7 +365,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             this._manager.removeOneContent(entry.contentKey);
             this._manager.removeExposesOf(entry.contentKey);
         });
-        await super.delete(contentKey);
+        await super.delete(key);
     }
     async _insertFromPropertyValue(value, originData) {
         const layoutEntries = value.layout[UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS];

package/dist-cms/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { UmbBlockGridEntriesContext } from './block-grid-entries.context.js';
 import { css, customElement, html, ifDefined, nothing, property, repeat, state, when, } from '../../../../../external/lit/index.js';
 import { getAccumulatedValueOfIndex, getInterpolatedIndexOfPositionInWeightMap, isWithinRect, } from '../../../../core/utils/index.js';
-import { UmbFormControlMixin, UmbFormControlValidator } from '../../../../core/validation/index.js';
+import { isAboveZeroAndBelowMinimum, UmbFormControlMixin, UmbFormControlValidator, } from '../../../../core/validation/index.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UmbTextStyles } from '../../../../core/style/index.js';
@@ -79,10 +79,10 @@ function resolvePlacementAsBlockGrid(args) {
 // --------------------------
 const SORTER_CONFIG = {
     getUniqueOfElement: (element) => {
-        return element.contentKey;
+        return element.key;
     },
     getUniqueOfModel: (modelEntry) => {
-        return modelEntry.contentKey;
+        return modelEntry.key;
     },
     resolvePlacement: resolvePlacementAsBlockGrid,
     identifier: 'block-grid-editor',
@@ -207,7 +207,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         if (rangeLimit?.min !== 0) {
             this.#rangeUnderflowValidator = this.addValidator('rangeUnderflow', () => {
                 return this.localize.term('validation_entriesShort', rangeLimit.min, (rangeLimit.min ?? 0) - this._layoutEntries.length);
-            }, () => this._layoutEntries.length < (rangeLimit?.min ?? 0));
+            }, () => isAboveZeroAndBelowMinimum(this._layoutEntries.length, rangeLimit?.min));
         }
         if (this.#rangeOverflowValidator) {
             this.removeValidator(this.#rangeOverflowValidator);
@@ -259,15 +259,11 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         return html `
 			${this._styleElement}
 			<div class="umb-block-grid__layout-container" data-area-length=${this._layoutEntries.length}>
-				${repeat(this._layoutEntries, (layout) => layout.contentKey, (layout, index) => html `<umb-block-grid-entry
-							class="umb-block-grid__layout-item"
-							index=${index}
-							.contentKey=${layout.contentKey}
-							.layout=${layout}>
+				${repeat(this._layoutEntries, (layout) => layout.key, (layout, index) => html `<umb-block-grid-entry class="umb-block-grid__layout-item" index=${index} .layout=${layout}>
 						</umb-block-grid-entry> `)}
 			</div>
 			${when(this._allowedBlockTypes && this._allowedBlockTypes.length > 0, () => this.#renderCreateButtonGroup())}
-			${when(this._areaKey, () => html `<uui-form-validation-message .for=${this}></uui-form-validation-message>`)}
+			${when(this._areaKey, () => html `<umb-form-validation-message .for=${this}></umb-form-validation-message>`)}
 		`;
     }
     #renderCreateButtonGroup() {

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.d.ts

@@ -1,4 +1,4 @@
-import type { UmbBlockGridLayoutModel, UmbBlockGridTypeModel } from '../../types.js';
+import type { UmbBlockGridLayoutModel, UmbBlockGridTypeColumnSpanOption, UmbBlockGridTypeModel } from '../../types.js';
 import { UMB_BLOCK_GRID_MANAGER_CONTEXT } from '../../block-grid-manager/block-grid-manager.context-token.js';
 import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../block-grid-entries/block-grid-entries.context-token.js';
 import { UmbBlockGridScaleManager } from '../../context/block-grid-scale-manager/block-grid-scale-manager.controller.js';
@@ -10,7 +10,7 @@ export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeo
     readonly columnSpan: import("rxjs").Observable<number | undefined>;
     readonly rowSpan: import("rxjs").Observable<number | undefined>;
     readonly layoutAreas: import("rxjs").Observable<import("../../types.js").UmbBlockGridLayoutAreaItemModel[] | undefined>;
-    readonly columnSpanOptions: import("rxjs").Observable<import("../../types.js").UmbBlockGridTypeColumnSpanOption[]>;
+    readonly columnSpanOptions: import("rxjs").Observable<UmbBlockGridTypeColumnSpanOption[]>;
     readonly areaTypeGridColumns: import("rxjs").Observable<number | undefined>;
     readonly areas: import("rxjs").Observable<import("../../types.js").UmbBlockGridTypeAreaType[]>;
     readonly minMaxRowSpan: import("rxjs").Observable<number[] | undefined>;
@@ -26,7 +26,6 @@ export declare class UmbBlockGridEntryContext extends UmbBlockEntryContext<typeo
     readonly isSortMode: import("rxjs").Observable<boolean | undefined>;
     readonly scaleManager: UmbBlockGridScaleManager;
     constructor(host: UmbControllerHost);
-    protected _needsLegacyLabelRenderer(): boolean;
     layoutsOfArea(areaKey: string): import("rxjs").Observable<UmbBlockGridLayoutModel[] | undefined>;
     areaType(areaKey: string): import("rxjs").Observable<import("../../types.js").UmbBlockGridTypeAreaType | undefined>;
     setLayoutsOfArea(areaKey: string, layouts: UmbBlockGridLayoutModel[]): void;

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.context.js

@@ -33,7 +33,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.areas = this._blockType.asObservablePart((x) => x?.areas ?? []);
         this.minMaxRowSpan = this._blockType.asObservablePart((x) => x ? [x.rowMinSpan ?? 1, x.rowMaxSpan ?? 1] : undefined);
         this.forceHideContentEditorInOverlay = this._blockType.asObservablePart((x) => x ? (x.forceHideContentEditorInOverlay ?? false) : undefined);
-        this.inlineEditingMode = this._blockType.asObservablePart((x) => x?.inlineEditing === true);
+        this.inlineEditingMode = mergeObservables([this._blockType.asObservablePart((x) => x?.inlineEditing === true), this.isExternalContent], ([inlineEditing, isExternalContent]) => inlineEditing === true && !isExternalContent);
         this.#relevantColumnSpanOptions = new UmbArrayState([], (x) => x);
         this.relevantColumnSpanOptions = this.#relevantColumnSpanOptions.asObservable();
         this.#canScale = new UmbBooleanState(false);
@@ -47,11 +47,6 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.isSortMode = this.#isSortMode.asObservable();
         this.scaleManager = new UmbBlockGridScaleManager(this);
     }
-    _needsLegacyLabelRenderer() {
-        // Block Grid entry element owns the canonical `<umb-ufm-render>` (via its child
-        // views) and pushes resolved text via `setName()`. No hidden virtual renderer needed.
-        return false;
-    }
     layoutsOfArea(areaKey) {
         return this._layout.asObservablePart((x) => x?.areas?.find((x) => x.key === areaKey)?.items);
     }
@@ -141,12 +136,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.observe(observeMultiple([this.minMaxRowSpan, this.columnSpanOptions, this._entries.layoutColumns]), ([minMaxRowSpan, columnSpanOptions, layoutColumns]) => {
             if (!layoutColumns || !minMaxRowSpan)
                 return;
-            const relevantColumnSpanOptions = columnSpanOptions
-                ? columnSpanOptions
-                    .filter((x) => x.columnSpan <= layoutColumns)
-                    .map((x) => x.columnSpan)
-                    .sort((a, b) => (a > b ? 1 : b > a ? -1 : 0))
-                : [];
+            const relevantColumnSpanOptions = this.#deriveRelevantColumnSpanOptions(columnSpanOptions, layoutColumns);
             this.#relevantColumnSpanOptions.setValue(relevantColumnSpanOptions);
             const hasRelevantColumnSpanOptions = relevantColumnSpanOptions.length > 1;
             const hasRowSpanOptions = minMaxRowSpan[0] !== minMaxRowSpan[1];
@@ -177,9 +167,13 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
             }
         }, 'observeAreaValidation');
         // Secure columnSpan fits options:
-        this.observe(observeMultiple([this.columnSpan, this.relevantColumnSpanOptions, this._entries.layoutColumns]), ([columnSpan, relevantColumnSpanOptions, layoutColumns]) => {
+        this.observe(observeMultiple([this.columnSpan, this.columnSpanOptions, this.minMaxRowSpan, this._entries.layoutColumns]), ([columnSpan, columnSpanOptions, minMaxRowSpan, layoutColumns]) => {
+            // `minMaxRowSpan` is only defined once the block type has loaded. Until then, empty options means "not loaded".
+            if (!minMaxRowSpan)
+                return;
             if (!layoutColumns || columnSpan === undefined)
                 return;
+            const relevantColumnSpanOptions = this.#deriveRelevantColumnSpanOptions(columnSpanOptions, layoutColumns);
             const newColumnSpan = this.#calcColumnSpan(columnSpan ?? layoutColumns, relevantColumnSpanOptions, layoutColumns);
             if (newColumnSpan !== columnSpan) {
                 const layoutValue = this._layout.getValue();
@@ -209,6 +203,12 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext {
         this.observe(this._manager.isSortMode, (isSortMode) => this.#isSortMode.setValue(isSortMode ?? false), 'observeIsSortMode');
     }
     _gotContentType() { }
+    #deriveRelevantColumnSpanOptions(columnSpanOptions, layoutColumns) {
+        return columnSpanOptions
+            .filter((x) => x.columnSpan <= layoutColumns)
+            .map((x) => x.columnSpan)
+            .sort((a, b) => a - b);
+    }
     #calcColumnSpan(columnSpan, relevantColumnSpanOptions, layoutColumns) {
         if (relevantColumnSpanOptions.length > 0) {
             // Correct to a columnSpan option.

package/dist-cms/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.d.ts

@@ -1,3 +1,4 @@
+import type { UmbBlockGridLayoutModel } from '../../types.js';
 import { UmbLitElement } from '../../../../core/lit-element/index.js';
 import type { PropertyValueMap } from '../../../../../external/lit/index.js';
 import type { UmbPropertyEditorUiElement } from '../../../../core/property-editor/index.js';
@@ -9,9 +10,18 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     #private;
     get index(): number | undefined;
     set index(value: number | undefined);
+    /**
+     * Set the layout entry for this block.
+     */
+    set layout(value: UmbBlockGridLayoutModel | undefined);
+    get key(): string | undefined;
+    private _key?;
+    /**
+     * @deprecated Use the `layout` property instead. Will be removed in Umbraco 20.
+     */
     get contentKey(): string | undefined;
     set contentKey(key: string | undefined);
-    private _contentKey?;
+    private _contentKey;
     private _contentTypeAlias?;
     private _contentTypeName?;
     private _columnSpan?;
@@ -35,14 +45,16 @@ export declare class UmbBlockGridEntryElement extends UmbLitElement implements U
     _contentInvalid?: boolean;
     _settingsInvalid?: boolean;
     private _blockViewProps;
+    private _isExternalContent;
     private _isReadOnly;
+    private _externalContentName?;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
     destroy(): void;
     protected updated(_changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
     render(): import("lit-html").TemplateResult<1> | undefined;
-    static styles: import("lit").CSSResult[];
+    static readonly styles: import("lit").CSSResult[];
 }
 export default UmbBlockGridEntryElement;
 declare global {