@umbraco-cms/backoffice 18.2.0 → 18.3.0-rc

package/dist-cms/packages/block/block/context/block-manager.context.js

@@ -1,4 +1,5 @@
 import { UmbBlockInsertedEvent } from '../events/block-inserted.event.js';
+import { UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME, UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME } from '../constants.js';
 import { UMB_BLOCK_MANAGER_CONTEXT } from './block-manager.context-token.js';
 import { UmbContextBase } from '../../../../libs/class-api/index.js';
 import { UmbArrayState, UmbBooleanState, UmbClassState, UmbStringState, mergeObservables, } from '../../../../libs/observable-api/index.js';
@@ -10,6 +11,9 @@ import { UmbDeprecation, UmbReadOnlyVariantGuardManager } from '../../../core/ut
 import { UmbPropertyValuePresetVariantBuilderController, } from '../../../core/property/index.js';
 import { UMB_APP_LANGUAGE_CONTEXT } from '../../../language/index.js';
 import { UmbDataTypeDetailRepository } from '../../../data-type/index.js';
+import { UMB_VALIDATION_CONTEXT, UmbValidationCleanUpByUniqueManager, } from '../../../core/validation/index.js';
+const UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS = Symbol();
+const UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS = Symbol();
 export class UmbBlockManagerContext extends UmbContextBase {
     get contentTypesLoaded() {
         return Promise.all(this.#contentTypeRequests);
@@ -30,7 +34,9 @@ export class UmbBlockManagerContext extends UmbContextBase {
     #structures;
     #blockTypes;
     #contents;
+    #contentKeys;
     #settings;
+    #settingsKeys;
     #exposes;
     setEditorConfiguration(configs) {
         this._editorConfiguration.setValue(configs);
@@ -71,12 +77,13 @@ export class UmbBlockManagerContext extends UmbContextBase {
     setContents(contents) {
         this.#contents.setValue(contents);
     }
+    // TODO: make return undefined when undefined in v.19
     /**
      * Get all contents.
      * @returns {Array<UmbBlockDataModel>} - All contents.
      */
     getContents() {
-        return this.#contents.value;
+        return this.#contents.value ?? [];
     }
     /**
      * Set all settings.
@@ -85,12 +92,13 @@ export class UmbBlockManagerContext extends UmbContextBase {
     setSettings(settings) {
         this.#settings.setValue(settings);
     }
+    // TODO: make return undefined when undefined in v.19
     /**
      * Get all settings.
      * @returns {Array<UmbBlockDataModel>} - All settings.
      */
     getSettings() {
-        return this.#settings.value;
+        return this.#settings.value ?? [];
     }
     /**
      * Set all exposes.
@@ -123,10 +131,14 @@ export class UmbBlockManagerContext extends UmbContextBase {
         this.liveEditingMode = this._liveEditingMode.asObservable();
         this._layouts = new UmbArrayState([], (x) => x.contentKey);
         this.layouts = this._layouts.asObservable();
-        this.#contents = new UmbArrayState([], (x) => x.key);
-        this.contents = this.#contents.asObservable();
-        this.#settings = new UmbArrayState([], (x) => x.key);
-        this.settings = this.#settings.asObservable();
+        this.#contents = new UmbArrayState(undefined, (x) => x.key);
+        // TODO: Remove ?? [] fallback in v.19 (or v.20)
+        this.contents = this.#contents.asObservablePart((x) => x ?? []);
+        this.#contentKeys = this.#contents.asObservablePart((x) => (x ? x.map((y) => y.key) : undefined));
+        this.#settings = new UmbArrayState(undefined, (x) => x.key);
+        // TODO: Remove ?? [] fallback in v.19 (or v.20)
+        this.settings = this.#settings.asObservablePart((x) => x ?? []);
+        this.#settingsKeys = this.#settings.asObservablePart((x) => (x ? x.map((y) => y.key) : undefined));
         // TODO: This is a bad seperation of concerns, this should be self initializing, not defined from the outside. [NL]
         this.readOnlyState = new UmbReadOnlyVariantGuardManager(this);
         this.#exposes = new UmbArrayState([], (x) => x.contentKey + '_' + x.culture + '_' + x.segment);
@@ -134,6 +146,21 @@ export class UmbBlockManagerContext extends UmbContextBase {
         this.observe(this.blockTypes, (blockTypes) => {
             this.#ensureContentTypes(blockTypes);
         }, null);
+        // Clean up validation messages for Block content/settings that are no longer part of this Block
+        // Editor's data. Deliberately does not skip the host: we want the Validation Context of the
+        // Property Editor hosting this Block Manager, which is provided on this very same element. [NL]
+        this.consumeContext(UMB_VALIDATION_CONTEXT, (context) => this.#gotValidationContext(context));
+    }
+    #gotValidationContext(context) {
+        // Only accept a Validation Context that is actually ours — a Block Manager can legitimately be
+        // hosted without one, in which case no clean up happens (silent no-op, not an error). [NL]
+        if (!context || context.getHostElement() !== this.getHostElement()) {
+            this.removeUmbControllerByAlias(UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS);
+            this.removeUmbControllerByAlias(UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS);
+            return;
+        }
+        new UmbValidationCleanUpByUniqueManager(this, context, `$.${UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME}`, this.#contentKeys, (queryParams) => queryParams.key, UMB_CONTENT_VALIDATION_CLEAN_UP_ALIAS);
+        new UmbValidationCleanUpByUniqueManager(this, context, `$.${UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME}`, this.#settingsKeys, (queryParams) => queryParams.key, UMB_SETTINGS_VALIDATION_CLEAN_UP_ALIAS);
     }
     #ensureContentTypes(blockTypes) {
         // Collect all unique content type keys
@@ -227,10 +254,10 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this._layouts.asObservablePart((source) => source.find((x) => x.contentKey === contentKey));
     }
     contentOf(key) {
-        return this.#contents.asObservablePart((source) => source.find((x) => x.key === key));
+        return this.#contents.asObservablePart((source) => source?.find((x) => x.key === key));
     }
     settingsOf(key) {
-        return this.#settings.asObservablePart((source) => source.find((x) => x.key === key));
+        return this.#settings.asObservablePart((source) => source?.find((x) => x.key === key));
     }
     currentExposeOf(contentKey) {
         return mergeObservables([this.#exposes.asObservablePart((source) => source.filter((x) => x.contentKey === contentKey)), this.variantId], ([exposes, variantId]) => {
@@ -279,10 +306,10 @@ export class UmbBlockManagerContext extends UmbContextBase {
         return this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentTypeKey);
     }
     getContentOf(contentKey) {
-        return this.#contents.value.find((x) => x.key === contentKey);
+        return this.#contents.value?.find((x) => x.key === contentKey);
     }
     getSettingsOf(settingsKey) {
-        return this.#settings.value.find((x) => x.key === settingsKey);
+        return this.#settings.value?.find((x) => x.key === settingsKey);
     }
     // originData param is used by some implementations. [NL] should be here, do not remove it.
     setOneLayout(layoutData, _originData) {
@@ -320,17 +347,33 @@ export class UmbBlockManagerContext extends UmbContextBase {
             return;
         this.#exposes.filter((x) => !(x.contentKey === contentKey && variantId.compare(x)));
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     setOneContentProperty(key, propertyAlias, value) {
         this.#contents.updateOne(key, { [propertyAlias]: value });
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     setOneSettingsProperty(key, propertyAlias, value) {
         this.#settings.updateOne(key, { [propertyAlias]: value });
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     contentProperty(key, propertyAlias) {
-        this.#contents.asObservablePart((source) => source.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
+        this.#contents.asObservablePart((source) => source?.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
     }
+    /**
+     * @deprecated this is not working, use the Property Dataset instead.
+     */
+    // TODO: Deprecate and remove this.
     settingsProperty(key, propertyAlias) {
-        this.#settings.asObservablePart((source) => source.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
+        this.#settings.asObservablePart((source) => source?.find((x) => x.key === key)?.values?.find((values) => values.alias === propertyAlias)?.value);
     }
     async createBlockSettingsData(contentElementTypeKey) {
         const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey);

package/dist-cms/packages/block/block/index.d.ts

@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './action/index.js';
 export * from './clipboard/index.js';
 export * from './conditions/constants.js';

package/dist-cms/packages/block/block/index.js

@@ -1,3 +1,4 @@
+export * from './constants.js';
 export * from './action/index.js';
 export * from './clipboard/index.js';
 export * from './conditions/constants.js';

package/dist-cms/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.js

@@ -191,14 +191,14 @@ let UmbBlockCatalogueModalElement = class UmbBlockCatalogueModalElement extends
 					label=${this.localize.term('blockEditor_tabCreateEmpty')}
 					?active=${!this._openClipboard}
 					@click=${() => (this._openClipboard = false)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
+					<umb-localize key="blockEditor_tabCreateEmpty">Create Empty</umb-localize>
 					<uui-icon slot="icon" name="icon-add"></uui-icon>
 				</uui-tab>
 				<uui-tab
 					label=${this.localize.term('blockEditor_tabClipboard')}
 					?active=${this._openClipboard}
 					@click=${() => (this._openClipboard = true)}>
-					<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
+					<umb-localize key="blockEditor_tabClipboard">Clipboard</umb-localize>
 					<uui-icon slot="icon" name="icon-clipboard"></uui-icon>
 				</uui-tab>
 			</uui-tab-group>

package/dist-cms/packages/block/block/validation/data-path-generator-for-element-data.function.d.ts

@@ -0,0 +1,9 @@
+import type { UmbBlockDataModel } from '../types.js';
+/**
+ * Validation Data Path generator for Block Element Data.
+ * Writes a JSON-Path similar to `$.contentData[?(@.key == 'my-key://1234')]`
+ * @param {string} dataPathPropertyName - The property name holding the element data, either `contentData` or `settingsData`.
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path.
+ */
+export declare function UmbDataPathGeneratorForBlockElementData(dataPathPropertyName: string, data: Pick<UmbBlockDataModel, 'key'>): string;

package/dist-cms/packages/block/block/validation/data-path-generator-for-element-data.function.js

@@ -0,0 +1,11 @@
+import { UmbDataPathBlockElementDataQuery } from './data-path-element-data-query.function.js';
+/**
+ * Validation Data Path generator for Block Element Data.
+ * Writes a JSON-Path similar to `$.contentData[?(@.key == 'my-key://1234')]`
+ * @param {string} dataPathPropertyName - The property name holding the element data, either `contentData` or `settingsData`.
+ * @param {{key: string}} data - A data object with the key property.
+ * @returns {string} The JSON-Path.
+ */
+export function UmbDataPathGeneratorForBlockElementData(dataPathPropertyName, data) {
+    return `$.${dataPathPropertyName}[${UmbDataPathBlockElementDataQuery(data)}]`;
+}

package/dist-cms/packages/block/block/validation/index.d.ts

@@ -1,2 +1,3 @@
 export * from './data-path-element-data-query.function.js';
+export * from './data-path-generator-for-element-data.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

package/dist-cms/packages/block/block/validation/index.js

@@ -1,2 +1,3 @@
 export * from './data-path-element-data-query.function.js';
+export * from './data-path-generator-for-element-data.function.js';
 export * from './block-editor-validation-property-path-translator-base.api.js';

package/dist-cms/packages/block/block/workspace/block-element-manager.js

@@ -1,3 +1,4 @@
+import { UmbDataPathGeneratorForBlockElementData } from '../validation/data-path-generator-for-element-data.function.js';
 import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
 import { UmbContentTypeStructureManager } from '../../../content/content-type/index.js';
 import { UmbClassState, appendToFrozenArray, mergeObservables, } from '../../../../libs/observable-api/index.js';
@@ -78,7 +79,7 @@ export class UmbBlockElementManager extends UmbControllerBase {
         }, null);
         this.observe(this.unique, (key) => {
             if (key) {
-                this.validation.setDataPath('$.' + dataPathPropertyName + `[?(@.key == '${key}')]`);
+                this.validation.setDataPath(UmbDataPathGeneratorForBlockElementData(dataPathPropertyName, { key }));
             }
         }, null);
         this.observe(this.structure.contentTypeDataTypeUniques, (dataTypeUniques) => {

package/dist-cms/packages/block/block/workspace/block-workspace-editor.element.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { UMB_BLOCK_WORKSPACE_CONTEXT } from './index.js';
-import { css, customElement, html, nothing, state } from '../../../../external/lit/index.js';
+import { css, customElement, html, state, when } from '../../../../external/lit/index.js';
 import { UmbLitElement } from '../../../core/lit-element/index.js';
 let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extends UmbLitElement {
     constructor() {
@@ -23,14 +23,14 @@ let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extend
         });
     }
     render() {
-        return html `<umb-workspace-editor
-			><div slot="header">
-				<h3 id="headline" title="${this._headline}" data-mark="layout-headline">${this._headline}</h3>
-				${this._readOnly
-            ? html `<uui-tag look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`
-            : nothing}
-			</div></umb-workspace-editor
-		>`;
+        return html `
+			<umb-workspace-editor>
+				<div slot="header">
+					<h3 id="headline" title=${this._headline} data-mark="layout-headline">${this._headline}</h3>
+					${when(this._readOnly, () => html `<uui-tag look="secondary">${this.localize.term('general_readOnly')}</uui-tag>`)}
+				</div>
+			</umb-workspace-editor>
+		`;
     }
     static { this.styles = [
         css `
@@ -43,6 +43,10 @@ let UmbBlockWorkspaceEditorElement = class UmbBlockWorkspaceEditorElement extend
 				display: flex;
 				align-items: center;
 				gap: var(--uui-size-3);
+				min-width: 0;
+			}
+			uui-tag {
+				flex-shrink: 0;
 			}
 			#headline {
 				display: block;

package/dist-cms/packages/block/block/workspace/block-workspace.context.js

@@ -1,4 +1,5 @@
 import { UMB_BLOCK_ENTRIES_CONTEXT, UMB_BLOCK_MANAGER_CONTEXT } from '../context/index.js';
+import { UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME, UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME } from '../constants.js';
 import { UmbBlockWorkspaceEditorElement } from './block-workspace-editor.element.js';
 import { UmbBlockElementManager } from './block-element-manager.js';
 import { UMB_BLOCK_WORKSPACE_VIEW_CONTENT, UMB_BLOCK_WORKSPACE_VIEW_SETTINGS } from './constants.js';
@@ -46,8 +47,8 @@ export class UmbBlockWorkspaceContext extends UmbSubmittableWorkspaceContextBase
         this.layout = this.#layout.asObservable();
         this.unique = this.#layout.asObservablePart((x) => x?.contentKey);
         this.contentKey = this.#layout.asObservablePart((x) => x?.contentKey);
-        this.content = new UmbBlockElementManager(this, 'contentData', UMB_BLOCK_WORKSPACE_VIEW_CONTENT);
-        this.settings = new UmbBlockElementManager(this, 'settingsData', UMB_BLOCK_WORKSPACE_VIEW_SETTINGS);
+        this.content = new UmbBlockElementManager(this, UMB_BLOCK_CONTENT_DATA_PATH_PROPERTY_NAME, UMB_BLOCK_WORKSPACE_VIEW_CONTENT);
+        this.settings = new UmbBlockElementManager(this, UMB_BLOCK_SETTINGS_DATA_PATH_PROPERTY_NAME, UMB_BLOCK_WORKSPACE_VIEW_SETTINGS);
         this.#name = new UmbStringState(undefined);
         this.name = this.#name.asObservable();
         this.#labelRender = new UmbUfmVirtualRenderController(this);

package/dist-cms/packages/block/block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js

@@ -257,12 +257,22 @@ let UmbBlockWorkspaceViewEditContentNoRouterElement = class UmbBlockWorkspaceVie
 				display: block;
 				height: 100%;
 				--uui-tab-background: var(--uui-color-surface);
-
-				padding: calc(var(--uui-size-layout-1));
 			}
 			umb-badge {
 				--uui-badge-inset: 0 0 auto auto;
 			}
+
+			uui-tab-group {
+				margin-left: calc(var(--uui-size-space-4));
+				padding-left: calc(var(--uui-size-space-1));
+				margin-right: calc(var(--uui-size-space-4));
+				padding-right: calc(var(--uui-size-space-1));
+				border-bottom: 1px solid var(--uui-color-border);
+			}
+			umb-block-workspace-view-edit-tab {
+				display: block;
+				margin: calc(var(--uui-size-layout-1));
+			}
 		`,
     ]; }
 };

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

@@ -173,7 +173,6 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext {
             }
         })
             .observeRouteBuilder((routeBuilder) => {
-            // TODO: Does it make any sense that this is a state? Check usage and confirm. [NL]
             this._catalogueRouteBuilderState.setValue(routeBuilder);
         });
         new UmbModalRouteRegistrationController(this, UMB_BLOCK_GRID_WORKSPACE_MODAL)

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

@@ -17,6 +17,7 @@ export declare class UmbBlockGridEntriesElement extends UmbBlockGridEntriesEleme
     private _layoutEntries;
     private _limitMax?;
     private _styleElement?;
+    private _catalogueRouteBuilder?;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
     static styles: import("lit").CSSResult[];

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

@@ -107,7 +107,6 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
             // Only when there is a area key we should create a validator, otherwise it is the root entries element, which is taking part of the Property Editor Form Control. [NL]
             // Currently there is no server validation for areas. So we can leave out the data path for it for now. [NL]
             this.#controlValidator = new UmbFormControlValidator(this, this);
-            //new UmbBindServerValidationToFormControl(this, this, "$.values.[?(@.alias == 'my-input-alias')].value");
         }
     }
     get areaKey() {
@@ -119,6 +118,12 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
     get layoutColumns() {
         return this.#context.getLayoutColumns();
     }
+    #getPathForCreateBlock(index) {
+        return this._catalogueRouteBuilder?.({ view: 'create', index });
+    }
+    #getPathForClipboard(index) {
+        return this._catalogueRouteBuilder?.({ view: 'clipboard', index });
+    }
     constructor() {
         super();
         this.#sorter = new UmbSorterController(this, {
@@ -145,6 +150,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         this.#context = new UmbBlockGridEntriesContext(this);
         this._isReadOnly = false;
         this._layoutEntries = [];
+        this.observe(this.#context.catalogueRouteBuilder, (builder) => (this._catalogueRouteBuilder = builder), null);
         this.observe(this.#context.layoutEntries, (layoutEntries) => {
             //const oldValue = this._layoutEntries;
             this.#sorter.setModel(layoutEntries);
@@ -277,7 +283,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
         else if (this._isReadOnly === false) {
             return html `
 				<uui-button-inline-create
-					href=${this.#context.getPathForCreateBlock(-1) ?? ''}
+					href=${this.#getPathForCreateBlock(-1) ?? ''}
 					label=${this.localize.term('blockEditor_addBlock')}></uui-button-inline-create>
 			`;
         }
@@ -288,7 +294,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
     #renderCreateButton() {
         if (this._isReadOnly && this._layoutEntries.length > 0)
             return nothing;
-        const createPath = this.#context.getPathForCreateBlock(-1);
+        const createPath = this.#getPathForCreateBlock(-1);
         return html `
 			<uui-button
 				look="placeholder"
@@ -334,7 +340,7 @@ let UmbBlockGridEntriesElement = class UmbBlockGridEntriesElement extends UmbFor
 			<uui-button
 				label=${this.localize.term('content_createFromClipboard')}
 				look="placeholder"
-				href=${this.#context.getPathForClipboard(-1) ?? ''}
+				href=${this.#getPathForClipboard(-1) ?? ''}
 				?disabled=${this._isReadOnly}
 				title=${this.localize.term('general_clipboard')}>
 				<uui-icon name="icon-clipboard-paste"></uui-icon>
@@ -433,6 +439,9 @@ __decorate([
 __decorate([
     state()
 ], UmbBlockGridEntriesElement.prototype, "_styleElement", void 0);
+__decorate([
+    state()
+], UmbBlockGridEntriesElement.prototype, "_catalogueRouteBuilder", void 0);
 UmbBlockGridEntriesElement = __decorate([
     customElement('umb-block-grid-entries')
 ], UmbBlockGridEntriesElement);

package/dist-cms/packages/block/block-grid/property-editors/block-grid-area-type-permission/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Area Type Permission Configuration Property Editor UI',
     element: () => import('./block-grid-area-type-permission.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid Area Type Permissions',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-areas-config/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Areas Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-areas-config.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid Areas Configuration',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-column-span/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Column Span Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-column-span.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid Column Span',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/Umbraco.BlockGrid.js

@@ -9,24 +9,18 @@ export const manifest = {
             properties: [
                 {
                     alias: 'blocks',
-                    label: 'Blocks',
-                    description: 'Define Blocks based on Element Types.',
+                    label: 'Available Blocks',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockGridTypeConfiguration',
                 },
                 {
                     alias: 'validationLimit',
                     label: 'Amount',
+                    description: 'Set a required range of blocks',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.NumberRange',
                     config: [{ alias: 'validationRange', value: { min: 0, max: Infinity } }],
                     weight: 100,
                 },
             ],
-            defaultData: [
-                {
-                    alias: 'gridColumns',
-                    value: 12,
-                },
-            ],
         },
     },
 };

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/manifests.js

@@ -7,6 +7,7 @@ const propertyEditorUi = {
     name: 'Block Grid Property Editor UI',
     element: () => import('./property-editor-ui-block-grid.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid',
         propertyEditorSchemaAlias: UMB_BLOCK_GRID_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-layout',
@@ -30,8 +31,9 @@ const propertyEditorUi = {
                 {
                     alias: 'maxPropertyWidth',
                     label: 'Editor width',
-                    description: 'Optional css overwrite. (example: 1200px or 100%)',
+                    description: 'Example: `1200px`',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                    config: [{ alias: 'placeholder', value: '100%' }],
                 },
                 {
                     alias: 'createLabel',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.js

@@ -61,8 +61,8 @@ let UmbPropertyEditorUIBlockGridElement = class UmbPropertyEditorUIBlockGridElem
             super.value = undefined;
             // Clear manager state so blocks are actually removed
             this.#managerContext.setLayouts([]);
-            this.#managerContext.setContents([]);
-            this.#managerContext.setSettings([]);
+            this.#managerContext.setContents(undefined);
+            this.#managerContext.setSettings(undefined);
             this.#managerContext.setExposes([]);
             return;
         }

package/dist-cms/packages/block/block-grid/property-editors/block-grid-group-configuration/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Group Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-group-configuration.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: '',
         icon: 'icon-box-alt',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-layout-stylesheet/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Layout Stylesheet Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-layout-stylesheet.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid Layout Stylesheet',
         icon: 'icon-document',
         group: '#propertyEditorUIGroups_common',

package/dist-cms/packages/block/block-grid/property-editors/block-grid-type-configuration/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block Grid Block Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-grid-type-configuration.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block Grid Block Configuration',
         icon: 'icon-autofill',
         group: '#propertyEditorUIGroups_blocks',

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.js

@@ -10,7 +10,6 @@ export const manifest = {
                 {
                     alias: 'blocks',
                     label: 'Available Blocks',
-                    description: 'Define the available blocks.',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockListTypeConfiguration',
                 },
                 {

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/manifests.js

@@ -8,6 +8,7 @@ const propertyEditorUi = {
     name: 'Block List Property Editor UI',
     element: () => import('./property-editor-ui-block-list.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block List',
         propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
         icon: 'icon-thumbnail-list',
@@ -19,20 +20,21 @@ const propertyEditorUi = {
                 {
                     alias: 'useLiveEditing',
                     label: 'Live editing mode',
-                    description: 'Live editing in editor overlays for live updated custom views or labels using custom expression.',
+                    description: 'Instant updates',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
                 },
                 {
                     alias: 'useInlineEditingAsDefault',
                     label: 'Inline editing mode',
-                    description: 'Use the inline editor as the default block view.',
+                    description: 'Expand to edit',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
                 },
                 {
                     alias: 'maxPropertyWidth',
-                    label: 'Property editor width',
-                    description: 'Optional CSS override, example: 800px or 100%',
+                    label: 'Property Editor width',
+                    description: 'Example: `800px`',
                     propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+                    config: [{ alias: 'placeholder', value: '100%' }],
                 },
                 {
                     alias: 'createModalSize',

package/dist-cms/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.js

@@ -10,7 +10,7 @@ import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
 import { UmbLitElement, umbDestroyOnDisconnect } from '../../../../core/lit-element/index.js';
 import { html, customElement, property, state, repeat, css, nothing, ifDefined, } from '../../../../../external/lit/index.js';
 import { debounceTime } from '../../../../../external/rxjs/index.js';
-import { extractJsonQueryProps, UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../../../core/validation/index.js';
+import { UmbFormControlMixin, UmbValidationContext, UMB_VALIDATION_EMPTY_LOCALIZATION_KEY, } from '../../../../core/validation/index.js';
 import { jsonStringComparison, observeMultiple } from '../../../../../libs/observable-api/index.js';
 import { UmbSorterController } from '../../../../core/sorter/index.js';
 import { UMB_PROPERTY_CONTEXT } from '../../../../core/property/index.js';
@@ -38,8 +38,8 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
             super.value = undefined;
             // Clear manager state so blocks are actually removed
             this.#managerContext.setLayouts([]);
-            this.#managerContext.setContents([]);
-            this.#managerContext.setSettings([]);
+            this.#managerContext.setContents(undefined);
+            this.#managerContext.setSettings(undefined);
             this.#managerContext.setExposes([]);
             return;
         }
@@ -156,31 +156,6 @@ let UmbPropertyEditorUIBlockListElement = class UmbPropertyEditorUIBlockListElem
         this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
             this.#gotPropertyContext(context);
         });
-        // TODO: Why is this logic not part of the Block Grid and RTE Editors? [NL]
-        // Observe Blocks and clean up validation messages for content/settings that are not in the block list anymore:
-        this.observe(this.#managerContext.layouts, (layouts) => {
-            const validationMessagesToRemove = [];
-            const contentKeys = layouts.map((x) => x.contentKey);
-            this.#validationContext.messages.getMessagesOfPathAndDescendant('$.contentData').forEach((message) => {
-                // get the KEY from this string: $.contentData[?(@.key == 'KEY')]
-                // TODO: Investigate if this is missing a part to just get the [] part of the path. Cause couldn't there be a sub path inside of this. [NL]
-                const key = extractJsonQueryProps(message.path).key;
-                if (key && contentKeys.indexOf(key) === -1) {
-                    validationMessagesToRemove.push(message.key);
-                }
-            });
-            const settingsKeys = layouts.map((x) => x.settingsKey).filter((x) => x !== undefined);
-            this.#validationContext.messages.getMessagesOfPathAndDescendant('$.settingsData').forEach((message) => {
-                // TODO: Investigate if this is missing a part to just get the [] part of the path. Cause couldn't there be a sub path inside of this. [NL]
-                // get the key from this string: $.settingsData[?(@.key == 'KEY')]
-                const key = extractJsonQueryProps(message.path).key;
-                if (key && settingsKeys.indexOf(key) === -1) {
-                    validationMessagesToRemove.push(message.key);
-                }
-            });
-            // Remove the messages after the loop to prevent changing the array while iterating over it.
-            this.#validationContext.messages.removeMessageByKeys(validationMessagesToRemove);
-        }, null);
         this.consumeContext(UMB_VARIANT_CONTEXT, async (context) => {
             this.observe(context?.displayVariantId, (variantId) => {
                 this.#managerContext.setVariantId(variantId);

package/dist-cms/packages/block/block-list/property-editors/block-list-type-configuration/manifests.js

@@ -4,6 +4,7 @@ export const manifest = {
     name: 'Block List Type Configuration Property Editor UI',
     element: () => import('./property-editor-ui-block-list-type-configuration.element.js'),
     meta: {
+        supportsVariantChange: true,
         label: 'Block List Type Configuration',
         icon: 'icon-autofill',
         group: '#propertyEditorUIGroups_common',