Feature: Property Value Preset

src/Umbraco.Web.UI.Client/src/libs/extension-api/controller/base-extensions-initializer.controller.ts

@@ -177,6 +177,7 @@ export abstract class UmbBaseExtensionsInitializer<
 
 		this.#exposedPermittedExts = approvedExtensions;
 
+		// TODO: Option to first resolve once all have responded are completed. [NL]
 		if (this.#exposedPermittedExts.length > 0) {
 			this.#promiseResolvers.forEach((x) => x());
 			this.#promiseResolvers = [];

src/Umbraco.Web.UI.Client/src/libs/extension-api/functions/create-extension-api.function.ts

@@ -5,10 +5,10 @@ import type { UmbApiConstructorArgumentsMethodType } from './types.js';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 
 /**
- *
- * @param host
- * @param manifest
- * @param constructorArgs
+ * @param {UmbControllerHost} host - The controller host for this controller to be appended to
+ * @param {ManifestApi} manifest - The manifest of the extension
+ * @param {Array | UmbApiConstructorArgumentsMethodType} constructorArgs - The constructor arguments to pass to the API class
+ * @returns {Promise<UmbApi | undefined>} - The API class instance
  */
 export async function createExtensionApi<ApiType extends UmbApi = UmbApi>(
 	host: UmbControllerHost,

src/Umbraco.Web.UI.Client/src/libs/extension-api/registry/extension.registry.ts

@@ -467,7 +467,9 @@ export class UmbExtensionRegistry<
 			return [];
 		}
 		const kinds = this._kinds.getValue();
-		return exts.map((ext) => (ext?.kind ? (this.#mergeExtensionWithKinds([ext, kinds]) ?? ext) : ext));
+		return exts
+			.map((ext) => (ext?.kind ? (this.#mergeExtensionWithKinds([ext, kinds]) ?? ext) : ext))
+			.sort(sortExtensions);
 	}
 
 	/**

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

@@ -436,7 +436,7 @@ export class UmbBlockGridEntriesContext
 		originData?: UmbBlockGridWorkspaceOriginData,
 	) {
 		await this._retrieveManager;
-		return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
+		return await this._manager?.createWithPresets(contentElementTypeKey, partialLayoutEntry, originData);
 	}
 
 	// insert Block?

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

@@ -10,7 +10,7 @@ import {
 import { transformServerPathToClientPath } from '@umbraco-cms/backoffice/utils';
 import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
 import { UMB_APP_CONTEXT } from '@umbraco-cms/backoffice/app';
-import type { UmbBlockDataModel } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockDataModel, UmbBlockDataObjectModel } from '@umbraco-cms/backoffice/block';
 import type { UmbBlockTypeGroup } from '@umbraco-cms/backoffice/block-type';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
@@ -91,15 +91,30 @@ export class UmbBlockGridManagerContext<
 			this.#serverUrl = appContext.getServerUrl();
 		});
 	}
-
+	/**
+	 * @deprecated Use createWithPresets instead. Will be removed in v.17.
+	 */
 	create(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		contentElementTypeKey: string,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		// This property is used by some implementations, but not used in this. Do not remove. [NL]
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData?: UmbBlockGridWorkspaceOriginData,
+	) {
+		throw new Error('Method deparecated use createWithPresets');
+		return {} as UmbBlockDataObjectModel<BlockLayoutType>;
+	}
+
+	async createWithPresets(
 		contentElementTypeKey: string,
 		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
 		// This property is used by some implementations, but not used in this.
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		originData?: UmbBlockGridWorkspaceOriginData,
 	) {
-		return super._createBlockData(contentElementTypeKey, partialLayoutEntry);
+		return await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
 	}
 
 	/**

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

@@ -168,7 +168,7 @@ export class UmbBlockListEntriesContext extends UmbBlockEntriesContext<
 		originData?: UmbBlockListWorkspaceOriginData,
 	) {
 		await this._retrieveManager;
-		return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
+		return await this._manager?.createWithPresets(contentElementTypeKey, partialLayoutEntry, originData);
 	}
 
 	// insert Block?

src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts

@@ -2,7 +2,7 @@ import type { UmbBlockListLayoutModel, UmbBlockListTypeModel } from '../types.js
 import type { UmbBlockListWorkspaceOriginData } from '../index.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
-import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UmbBlockManagerContext, type UmbBlockDataObjectModel } from '@umbraco-cms/backoffice/block';
 
 /**
  * A implementation of the Block Manager specifically for the Block List Editor.
@@ -21,14 +21,29 @@ export class UmbBlockListManagerContext<
 		return this.#inlineEditingMode.getValue();
 	}
 
+	/**
+	 * @deprecated Use createWithPresets instead. Will be removed in v.17.
+	 */
 	create(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		contentElementTypeKey: string,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		// This property is used by some implementations, but not used in this. Do not remove. [NL]
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData?: UmbBlockListWorkspaceOriginData,
+	) {
+		throw new Error('Method deparecated use createWithPresets');
+		return {} as UmbBlockDataObjectModel<BlockLayoutType>;
+	}
+	async createWithPresets(
 		contentElementTypeKey: string,
 		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
 		// This property is used by some implementations, but not used in this. Do not remove. [NL]
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		_originData?: UmbBlockListWorkspaceOriginData,
 	) {
-		return super._createBlockData(contentElementTypeKey, partialLayoutEntry);
+		return await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
 	}
 
 	insert(

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

@@ -111,7 +111,7 @@ export class UmbBlockRteEntriesContext extends UmbBlockEntriesContext<
 		originData?: UmbBlockRteWorkspaceOriginData,
 	) {
 		await this._retrieveManager;
-		return this._manager?.create(contentElementTypeKey, partialLayoutEntry, originData);
+		return await this._manager?.createWithPresets(contentElementTypeKey, partialLayoutEntry, originData);
 	}
 
 	// insert Block?

src/Umbraco.Web.UI.Client/src/packages/block/block-rte/context/block-rte-manager.context.ts

@@ -1,7 +1,7 @@
 import type { UmbBlockRteWorkspaceOriginData } from '../workspace/block-rte-workspace.modal-token.js';
 import type { UmbBlockRteLayoutModel, UmbBlockRteTypeModel } from '../types.js';
 import type { UmbBlockDataModel } from '../../block/types.js';
-import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UmbBlockManagerContext, type UmbBlockDataObjectModel } from '@umbraco-cms/backoffice/block';
 
 import '../components/block-rte-entry/index.js';
 
@@ -18,14 +18,29 @@ export class UmbBlockRteManagerContext<
 		this._layouts.remove(contentKeys);
 	}
 
+	/**
+	 * @deprecated Use createWithPresets instead. Will be removed in v.17.
+	 */
 	create(
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		contentElementTypeKey: string,
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		// This property is used by some implementations, but not used in this. Do not remove. [NL]
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		_originData?: UmbBlockRteWorkspaceOriginData,
+	) {
+		throw new Error('Method deparecated use createWithPresets');
+		return {} as UmbBlockDataObjectModel<BlockLayoutType>;
+	}
+	async createWithPresets(
 		contentElementTypeKey: string,
 		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
 		// This property is used by some implementations, but not used in this, do not remove. [NL]
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		_originData?: UmbBlockRteWorkspaceOriginData,
 	) {
-		const data = super._createBlockData(contentElementTypeKey, partialLayoutEntry);
+		const data = await super._createBlockData(contentElementTypeKey, partialLayoutEntry);
 
 		// Find block type.
 		const blockType = this.getBlockTypes().find((x) => x.contentElementTypeKey === contentElementTypeKey);

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

@@ -398,11 +398,11 @@ export abstract class UmbBlockEntryContext<
 
 		this.observe(
 			observeMultiple([this.settingsKey, this.blockType]),
-			([settingsKey, blockType]) => {
+			async ([settingsKey, blockType]) => {
 				if (!this.#contentKey || settingsKey === undefined || !blockType) return;
 				if (settingsKey == null && blockType.settingsElementTypeKey) {
 					// We have a settings ElementType in config but not in data, so lets create the scaffold for that: [NL]
-					const settingsData = this._manager!.createBlockSettingsData(blockType.contentElementTypeKey); // Yes its on purpose we use the contentElementTypeKey here, as this is our identifier for a BlockType. [NL]
+					const settingsData = await this._manager!.createBlockSettingsData(blockType.contentElementTypeKey); // Yes its on purpose we use the contentElementTypeKey here, as this is our identifier for a BlockType. [NL]
 					this._manager?.setOneSettings(settingsData);
 					this._layout.update({ settingsKey: settingsData.key } as Partial<BlockLayoutType>);
 				} else if (settingsKey && blockType.settingsElementTypeKey === undefined) {

src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-manager.context.ts

@@ -18,6 +18,13 @@
 import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
 import { UmbReadOnlyVariantStateManager } from '@umbraco-cms/backoffice/utils';
+import {
+	UmbPropertyValuePresetVariantBuilderController,
+	type UmbPropertyTypePresetModel,
+	type UmbPropertyTypePresetModelTypeModel,
+} from '@umbraco-cms/backoffice/property';
+import { UMB_APP_LANGUAGE_CONTEXT } from '@umbraco-cms/backoffice/language';
+import { UmbDataTypeDetailRepository } from '@umbraco-cms/backoffice/data-type';
 
 export type UmbBlockDataObjectModel<LayoutEntryType extends UmbBlockLayoutBaseModel> = {
 	layout: LayoutEntryType;
@@ -317,13 +324,25 @@
 		);
 	}
 
+	/**
+	 * @deprecated Use `createWithPresets` instead. Which is Async. Will be removed in v.17
+	 * @param contentElementTypeKey
+	 * @param partialLayoutEntry
+	 * @param originData
+	 */
 	abstract create(
 		contentElementTypeKey: string,
 		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
 		originData?: BlockOriginDataType,
 	): UmbBlockDataObjectModel<BlockLayoutType> | undefined;
 
-	public createBlockSettingsData(contentElementTypeKey: string) {
+	abstract createWithPresets(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+		originData?: BlockOriginDataType,
+	): Promise<UmbBlockDataObjectModel<BlockLayoutType> | undefined>;
+
+	public async createBlockSettingsData(contentElementTypeKey: string) {
 		const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey);
 		if (!blockType) {
 			throw new Error(`Cannot create block settings, missing block type for ${contentElementTypeKey}`);
@@ -332,22 +351,80 @@
 			throw new Error(`Cannot create block settings, missing settings element type for ${contentElementTypeKey}`);
 		}
 
+		// TODO: Handle presets here [NL]
+
 		return {
 			key: UmbId.new(),
 			contentTypeKey: blockType.settingsElementTypeKey,
 			values: [],
 		};
 	}
 
-	protected _createBlockElementData(key: string, elementTypeKey: string) {
+	protected async _createBlockElementData(key: string, contentTypeKey: string) {
+		//
+		const appLanguage = await this.getContext(UMB_APP_LANGUAGE_CONTEXT);
+
+		const contentStructure = this.getStructure(contentTypeKey);
+		if (!contentStructure) {
+			throw new Error(`Cannot create Preset for Block, missing content structure for ${contentTypeKey}`);
+		}
+
+		// Set culture and segment for all values:
+		const cutlures = contentStructure.variesByCulture ? await appLanguage.getCultures() : [];
+		if (cutlures.length === 0) {
+			throw new Error('Could not retrieve app cultures.');
+		}
+		// TODO: Receive the segments from somewhere. [NL]
+		const segments: Array<string> | undefined = contentStructure.variesBySegment ? [] : undefined;
+
+		const repo = new UmbDataTypeDetailRepository(this);
+
+		const propertyTypes = await contentStructure.getContentTypeProperties();
+		const valueDefinitions = await Promise.all(
+			propertyTypes.map(async (property) => {
+				// TODO: Implement caching for data-type requests. [NL]
+				const dataType = (await repo.requestByUnique(property.dataType.unique)).data;
+				// This means if its not loaded this will never resolve and the error below will never happen.
+				if (!dataType) {
+					throw new Error(`DataType of "${property.dataType.unique}" not found.`);
+				}
+				if (!dataType.editorUiAlias) {
+					throw new Error(`DataType of "${property.dataType.unique}" did not have a editorUiAlias.`);
+				}
+
+				return {
+					alias: property.alias,
+					propertyEditorUiAlias: dataType.editorUiAlias,
+					propertyEditorSchemaAlias: dataType.editorAlias,
+					config: dataType.values,
+					typeArgs: {
+						variesByCulture: property.variesByCulture,
+						variesBySegment: property.variesBySegment,
+					} as UmbPropertyTypePresetModelTypeModel,
+				} as UmbPropertyTypePresetModel;
+			}),
+		);
+
+		const controller = new UmbPropertyValuePresetVariantBuilderController(this);
+		controller.setCultures(cutlures);
+		if (segments) {
+			controller.setSegments(segments);
+		}
+		const values = await controller.create(valueDefinitions);
+
+		// Set culture and segment for all values:
+
 		return {
-			key: key,
-			contentTypeKey: elementTypeKey,
-			values: [],
+			key,
+			contentTypeKey,
+			values,
 		};
 	}
 
-	protected _createBlockData(contentElementTypeKey: string, partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>) {
+	protected async _createBlockData(
+		contentElementTypeKey: string,
+		partialLayoutEntry?: Omit<BlockLayoutType, 'contentKey'>,
+	) {
 		// Find block type.
 		const blockType = this.#blockTypes.value.find((x) => x.contentElementTypeKey === contentElementTypeKey);
 		if (!blockType) {
@@ -360,12 +437,12 @@
 			...(partialLayoutEntry as Partial<BlockLayoutType>),
 		} as BlockLayoutType;
 
-		const content = this._createBlockElementData(layout.contentKey, contentElementTypeKey);
+		const content = await this._createBlockElementData(layout.contentKey, contentElementTypeKey);
 		let settings: UmbBlockDataModel | undefined = undefined;
 
 		if (blockType.settingsElementTypeKey) {
 			layout.settingsKey = UmbId.new();
-			settings = this._createBlockElementData(layout.settingsKey, blockType.settingsElementTypeKey);
+			settings = await this._createBlockElementData(layout.settingsKey, blockType.settingsElementTypeKey);
 		}
 
 		return {

src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts

@@ -133,10 +133,7 @@ export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseMod
 	}
 
 	#createPropertyVariantId(property: UmbPropertyTypeModel, variantId: UmbVariantId) {
-		return UmbVariantId.Create({
-			culture: property.variesByCulture ? variantId.culture : null,
-			segment: property.variesBySegment ? variantId.segment : null,
-		});
+		return variantId.toVariant(property.variesByCulture, property.variesBySegment);
 	}
 
 	// We will implement propertyAlias in the future, when implementing Varying Blocks. [NL]
@@ -192,6 +189,7 @@ export class UmbBlockElementManager<LayoutDataType extends UmbBlockLayoutBaseMod
 			throw new Error(`Property alias "${alias}" not found.`);
 		}
 
+		// TODO: I think we should await this in the same way as we do for Content Detail Workspace Context. [NL]
 		const editorAlias = this.#dataTypeSchemaAliasMap.get(property.dataType.unique);
 		if (!editorAlias) {
 			throw new Error(`Editor Alias of "${property.dataType.unique}" not found.`);