two way binding test

src/Umbraco.Web.UI.Client/src/packages/core/data-type/workspace/data-type-workspace.context.ts

@@ -151,17 +151,37 @@ export class UmbDataTypeWorkspaceContext
 
 	createVariantContext(host: UmbControllerHost) {
 		const context = new UmbBasicVariantContext(host);
+
+		// Observe workspace name:
+		this.observe(this.name, (name) => {
+			context.setName(name ?? '');
+		});
+		// Observe the variant name:
+		this.observe(context.name, (name) => {
+			this.setName(name);
+		});
+
 		this.observe(
 			this.properties,
 			(properties) => {
 				if (properties) {
 					properties.forEach(async (property) => {
+						// Observe value of workspace:
 						this.observe(
 							await this.propertyValueByAlias(property.alias),
 							(value) => {
 								context.setPropertyValue(property.alias, value);
 							},
-							'observePropertyOf_' + property.alias,
+							'observeWorkspacePropertyOf_' + property.alias,
+						);
+						// Observe value of variant:
+						this.observe(
+							context.propertyValueByAlias(property.alias),
+							(value) => {
+								console.log('gets value back...');
+								this.setPropertyValue(property.alias, value);
+							},
+							'observeVariantPropertyOf_' + property.alias,
 						);
 					});
 				}

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/block-list/config/block-configuration/property-editor-ui-block-list-block-configuration.element.ts

@@ -4,6 +4,7 @@ import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/prope
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
 import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/workspace';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import { UMB_DATA_TYPE_WORKSPACE_CONTEXT } from 'src/packages/core/data-type/workspace/data-type-workspace.context';
 
 /**
  * @element umb-property-editor-ui-block-list-block-configuration
@@ -19,12 +20,21 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
+	private _workspaceContext?: typeof UMB_DATA_TYPE_WORKSPACE_CONTEXT.TYPE;
+
 	constructor() {
 		super();
 		this.consumeContext(UMB_VARIANT_CONTEXT, async (variantContext) => {
 			console.log('variantContext', variantContext);
 			this.observe(await variantContext.propertyValueByAlias('validationLimit'), (x) =>
-				console.log('validationLimit', x),
+				console.log('variant_ validationLimit', x),
+			);
+		});
+		this.consumeContext(UMB_DATA_TYPE_WORKSPACE_CONTEXT, async (workspaceContext) => {
+			this._workspaceContext = workspaceContext;
+			console.log('workspaceContext', workspaceContext);
+			this.observe(await workspaceContext.propertyValueByAlias('validationLimit'), (x) =>
+				console.log('workspace_ validationLimit', x),
 			);
 		});
 	}
@@ -34,6 +44,13 @@ export class UmbPropertyEditorUIBlockListBlockConfigurationElement
 			<div>umb-property-editor-ui-block-list-block-configuration</div>
 
 			Temporary used for the Variant Context tester..
+
+			<button
+				@click=${() => {
+					this._workspaceContext?.setPropertyValue('validationLimit', { min: 123, max: 456 });
+				}}>
+				hello
+			</button>
 		`;
 	}
 

src/Umbraco.Web.UI.Client/src/packages/core/workspace/variant-context/basic-variant-context.ts

@@ -5,6 +5,10 @@ import { UMB_VARIANT_CONTEXT, UmbVariantContext } from '@umbraco-cms/backoffice/
 import { UmbArrayState, UmbStringState } from '@umbraco-cms/backoffice/observable-api';
 import { UmbVariantId } from '@umbraco-cms/backoffice/variant';
 
+/**
+ * A basic variant context, holds a name and a a set of properties.
+ * This is the base type for all variant contexts.
+ */
 export class UmbBasicVariantContext
 	extends UmbContextBase<typeof UMB_VARIANT_CONTEXT.TYPE>
 	implements UmbVariantContext
@@ -31,6 +35,7 @@ export class UmbBasicVariantContext
 	getVariantId() {
 		return UmbVariantId.CreateInvariant();
 	}
+	// variant id for a specific property?
 
 	constructor(host: UmbControllerHost) {
 		// The controller alias, is a very generic name cause we want only one of these for this controller host.
@@ -39,7 +44,6 @@ export class UmbBasicVariantContext
 
 	/**
 	 * TODO: Write proper JSDocs here.
-	 * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property.
 	 */
 	propertyValueByAlias<ReturnType = unknown>(propertyAlias: string) {
 		return this.#values.asObservablePart((values) => {
@@ -50,7 +54,6 @@ export class UmbBasicVariantContext
 
 	/**
 	 * TODO: Write proper JSDocs here.
-	 * Ideally do not use these methods, its better to communicate directly with the workspace, but if you do not know the property variant id, then this will figure it out for you. So good for externals to set or get values of a property.
 	 */
 	setPropertyValue(alias: string, value: unknown) {
 		this.#values.appendOne({ alias, value });