variant id

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

@@ -34,7 +34,7 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 		super(host, UMB_BLOCK_GRID_MANAGER_CONTEXT);
 
 		this.#catalogueModal = new UmbModalRouteRegistrationController(this, UMB_BLOCK_CATALOGUE_MODAL)
-			.addUniquePaths(['propertyAlias', 'parentUnique', 'areaKey'])
+			.addUniquePaths(['propertyAlias', 'variantId', 'parentUnique', 'areaKey'])
 			.addAdditionalPath(':view/:index')
 			.onSetup((routingInfo) => {
 				// Idea: Maybe on setup should be async, so it can retrieve the values when needed? [NL]
@@ -64,6 +64,16 @@ export class UmbBlockGridEntriesContext extends UmbBlockEntriesContext<
 			},
 			'observePropertyAlias',
 		);
+
+		this.observe(
+			this._manager.variantId,
+			(variantId) => {
+				if (variantId) {
+					this.#catalogueModal.setUniquePathValue('variantId', variantId.toString());
+				}
+			},
+			'observePropertyAlias',
+		);
 	}
 
 	getPathForCreateBlock(index: number) {

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

@@ -11,6 +11,7 @@ import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 export type UmbBlockDataObjectModel<LayoutEntryType extends UmbBlockLayoutBaseModel> = {
 	layout: LayoutEntryType;
@@ -31,6 +32,9 @@ export abstract class UmbBlockManagerContext<
 	#propertyAlias = new UmbStringState(undefined);
 	propertyAlias = this.#propertyAlias.asObservable();
 
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
+	variantId = this.#variantId.asObservable();
+
 	#contentTypes = new UmbArrayState(<Array<UmbContentTypeModel>>[], (x) => x.unique);
 	public readonly contentTypes = this.#contentTypes.asObservable();
 
@@ -89,13 +93,15 @@ export abstract class UmbBlockManagerContext<
 				propertyContext?.alias,
 				(alias) => {
 					this.#propertyAlias.setValue(alias);
+					this.#workspaceModal.setUniquePathValue('propertyAlias', alias);
 				},
 				'observePropertyAlias',
 			);
 			this.observe(
 				propertyContext?.variantId,
 				(variantId) => {
-					// TODO: This might not be the property variant ID, but the content variant ID. Check up on what makes most sense.
+					this.#variantId.setValue(variantId);
+					// TODO: This might not be the property variant ID, but the content variant ID. Check up on what makes most sense?
 					this.#workspaceModal.setUniquePathValue('variantId', variantId?.toString());
 				},
 				'observePropertyVariantId',
@@ -112,10 +118,6 @@ export abstract class UmbBlockManagerContext<
 				const newPath = routeBuilder({});
 				this.#workspacePath.setValue(newPath);
 			});
-
-		this.observe(this.propertyAlias, (alias) => {
-			this.#workspaceModal.setUniquePathValue('propertyAlias', alias);
-		});
 	}
 
 	async ensureContentType(unique?: string) {

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

@@ -64,12 +64,16 @@ export class UmbBlockWorkspaceContext<
 
 		this.#retrieveBlockManager = this.consumeContext(UMB_BLOCK_MANAGER_CONTEXT, (context) => {
 			this.#blockManager = context;
-			this.#editorConfigPromise = this.observe(context.editorConfiguration, (editorConfigs) => {
-				if (editorConfigs) {
-					const value = editorConfigs.getValueByAlias<boolean>('useLiveEditing');
-					this.#liveEditingMode = value;
-				}
-			}).asPromise();
+			this.#editorConfigPromise = this.observe(
+				context.editorConfiguration,
+				(editorConfigs) => {
+					if (editorConfigs) {
+						const value = editorConfigs.getValueByAlias<boolean>('useLiveEditing');
+						this.#liveEditingMode = value;
+					}
+				},
+				'observeEditorConfig',
+			).asPromise();
 		}).asPromise();
 
 		this.#retrieveBlockEntries = this.consumeContext(UMB_BLOCK_ENTRIES_CONTEXT, (context) => {