diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
index 54bcd7aeff..d7b64b1d4b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-manager.ts
@@ -2,10 +2,11 @@ import type { UmbBlockDataType } from '../types.js';
 import { UmbBlockElementPropertyDatasetContext } from './block-element-property-dataset.context.js';
 import type { UmbContentTypeModel } from '@umbraco-cms/backoffice/content-type';
 import { UmbContentTypeStructureManager } from '@umbraco-cms/backoffice/content-type';
-import { UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbClassState, UmbObjectState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbDocumentTypeDetailRepository } from '@umbraco-cms/backoffice/document-type';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 export class UmbBlockElementManager extends UmbControllerBase {
 	//
@@ -16,6 +17,9 @@ export class UmbBlockElementManager extends UmbControllerBase {
 	});
 	#getDataResolver!: () => void;
 
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
+	readonly variantId = this.#variantId.asObservable();
+
 	readonly unique = this.#data.asObservablePart((data) => data?.udi);
 	readonly contentTypeId = this.#data.asObservablePart((data) => data?.contentTypeKey);
 
@@ -35,6 +39,10 @@ export class UmbBlockElementManager extends UmbControllerBase {
 		this.#data.setValue(undefined);
 	}
 
+	setVariantId(variantId: UmbVariantId | undefined) {
+		this.#variantId.setValue(variantId);
+	}
+
 	setData(data: UmbBlockDataType | undefined) {
 		this.#data.setValue(data);
 		this.#getDataResolver();
@@ -56,6 +64,12 @@ export class UmbBlockElementManager extends UmbControllerBase {
 		return this.getData()?.contentTypeKey;
 	}
 
+	// We will implement propertyAlias in the future, when implementing Varying Blocks. [NL]
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	async propertyVariantId(propertyAlias: string) {
+		return this.variantId;
+	}
+
 	async propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
 		await this.#getDataPromise;
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
index 22a0d90c66..683d639a18 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-element-property-dataset.context.ts
@@ -35,6 +35,10 @@ export class UmbBlockElementPropertyDatasetContext extends UmbControllerBase imp
 		this.provideContext(UMB_BLOCK_ELEMENT_PROPERTY_DATASET_CONTEXT, this);
 	}
 
+	propertyVariantId?(propertyAlias: string): Promise<Observable<UmbVariantId | undefined>> {
+		return this.#elementManager.propertyVariantId(propertyAlias);
+	}
+
 	/**
 	 * TODO: Write proper JSDocs here.
 	 * @param propertyAlias
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
index 0464b2fe88..81e7bae117 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/workspace/block-workspace.context.ts
@@ -6,7 +6,7 @@ import {
 	type UmbRoutableWorkspaceContext,
 	UmbWorkspaceIsNewRedirectController,
 } from '@umbraco-cms/backoffice/workspace';
-import { UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbClassState, UmbObjectState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import type { ManifestWorkspace } from '@umbraco-cms/backoffice/extension-registry';
 import { UMB_MODAL_CONTEXT } from '@umbraco-cms/backoffice/modal';
@@ -16,6 +16,8 @@ import {
 	UMB_BLOCK_MANAGER_CONTEXT,
 	type UmbBlockWorkspaceData,
 } from '@umbraco-cms/backoffice/block';
+import { UMB_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/property';
+import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
 export type UmbBlockWorkspaceElementManagerNames = 'content' | 'settings';
 export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel>
@@ -55,6 +57,9 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 	#label = new UmbStringState<string | undefined>(undefined);
 	readonly name = this.#label.asObservable();
 
+	#variantId = new UmbClassState<UmbVariantId | undefined>(undefined);
+	readonly variantId = this.#variantId.asObservable();
+
 	constructor(host: UmbControllerHost, workspaceArgs: { manifest: ManifestWorkspace }) {
 		super(host, workspaceArgs.manifest.alias);
 		const manifest = workspaceArgs.manifest;
@@ -83,6 +88,16 @@ export class UmbBlockWorkspaceContext<LayoutDataType extends UmbBlockLayoutBaseM
 			this.#blockEntries = context;
 		}).asPromise();
 
+		this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
+			this.observe(context.variantId, (variantId) => {
+				this.#variantId.setValue(variantId);
+			});
+		});
+
+		this.observe(this.variantId, (variantId) => {
+			this.content.setVariantId(variantId);
+		});
+
 		this.routes.setRoutes([
 			{
 				path: 'create/:elementTypeKey',