restructure + data binding

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

@@ -26,7 +26,7 @@ export default class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlock
 	readonly properties = this.#properties.asObservable();
 
 	constructor(host: UmbControllerHostElement) {
-		// TODO: We dont need a repo here, so maybe we should not require this of the UmbEditableWorkspaceContextBase
+		// TODO: We don't need a repo here, so maybe we should not require this of the UmbEditableWorkspaceContextBase
 		super(host, 'Umb.Workspace.BlockType', undefined as never);
 	}
 
@@ -35,11 +35,17 @@ export default class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlock
 	}
 
 	async load(unique: string) {
-		// TODO: Get data, this requires the ability to proxy to the property editor.
-		console.log('load', unique);
 		this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
 			this.observe(context.value, (value) => {
-				console.log('Got value from prop', value);
+				if (value) {
+					const blockTypeData = value.find((x: UmbBlockTypeBase) => x.contentElementTypeKey === unique);
+					if (blockTypeData) {
+						this.#data.next(blockTypeData);
+						return;
+					}
+				}
+				// Fallback to undefined:
+				this.#data.next(undefined);
 			});
 		});
 	}
@@ -91,8 +97,6 @@ export default class UmbBlockTypeWorkspaceContext<BlockTypeData extends UmbBlock
 	async save() {
 		if (!this.#data.value) return;
 
-		console.log('Save!', this.#data.getValue());
-
 		this.consumeContext(UMB_PROPERTY_CONTEXT, (context) => {
 			// TODO: We should most likely consume already, in this way I avoid having the reset this consumption.
 			context.setValue(

src/Umbraco.Web.UI.Client/src/packages/block/block/manifests.ts

@@ -0,0 +1,3 @@
+import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
+
+export const manifests = [...propertyEditorManifests];

src/Umbraco.Web.UI.Client/src/packages/block/block/property-editors/block-grid/config/block-configuration/property-editor-ui-block-grid-block-configuration.element.ts

@@ -1,3 +1,4 @@
+import type { UmbBlockTypeBase, UmbInputBlockTypeElement } from '../../../../../block-type/index.js';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
@@ -12,14 +13,18 @@ export class UmbPropertyEditorUIBlockGridBlockConfigurationElement
 	extends UmbLitElement
 	implements UmbPropertyEditorUiElement
 {
-	@property()
-	value = '';
+	@property({ attribute: false })
+	value: UmbBlockTypeBase[] = [];
 
 	@property({ type: Object, attribute: false })
 	public config?: UmbPropertyEditorConfigCollection;
 
 	render() {
-		return html`<div>umb-property-editor-ui-block-grid-block-configuration</div>`;
+		return html`<umb-input-block-type
+			.value=${this.value}
+			@change=${(e: Event) => {
+				this.value = (e.target as UmbInputBlockTypeElement).value;
+			}}></umb-input-block-type>`;
 	}
 
 	static styles = [UmbTextStyles];

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

@@ -1,5 +1,5 @@
-import { type UmbBlockTypeBase, UmbInputBlockTypeElement } from '@umbraco-cms/backoffice/block';
-import '@umbraco-cms/backoffice/block';
+import type { UmbBlockTypeBase, UmbInputBlockTypeElement } from '../../../../../block-type/index.js';
+import '../../../../../block-type/components/input-block-type/index.js';
 import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';

src/Umbraco.Web.UI.Client/src/packages/block/block/property-editors/block-list/property-editor-ui-block-list.element.ts

@@ -1,8 +1,8 @@
-import type { UmbPropertyEditorConfigCollection } from '../../config/index.js';
 import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
+import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
 import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
+import type { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
 
 /**
  * @element umb-property-editor-ui-block-list

src/Umbraco.Web.UI.Client/src/packages/block/block/property-editors/manifests.ts

@@ -0,0 +1,4 @@
+import { manifests as blockGrid } from './block-grid/manifests.js';
+import { manifests as blockList } from './block-list/manifests.js';
+
+export const manifests = [...blockGrid, ...blockList];

src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts

@@ -1,3 +1,4 @@
 import { manifests as blockTypeManifests } from './block-type/manifests.js';
+import { manifests as blockManifests } from './block/manifests.js';
 
-export const manifests = [...blockTypeManifests];
+export const manifests = [...blockTypeManifests, ...blockManifests];

src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/manifests.ts

@@ -14,13 +14,11 @@ import { manifest as toggle } from './toggle/manifests.js';
 import { manifest as markdownEditor } from './markdown-editor/manifests.js';
 import { manifest as radioButtonList } from './radio-button-list/manifests.js';
 import { manifest as checkboxList } from './checkbox-list/manifests.js';
-import { manifests as blockList } from './block-list/manifests.js';
 import { manifest as numberRange } from './number-range/manifests.js';
 import { manifest as mediaPicker } from './media-picker/manifests.js';
 import { manifest as imageCropsConfiguration } from './image-crops-configuration/manifests.js';
 import { manifest as imageCropper } from './image-cropper/manifests.js';
 import { manifest as uploadField } from './upload-field/manifests.js';
-import { manifests as blockGrid } from './block-grid/manifests.js';
 import { manifest as orderDirection } from './order-direction/manifests.js';
 import { manifests as collectionView } from './collection-view/manifests.js';
 import { manifests as tinyMCE } from './tiny-mce/manifests.js';
@@ -63,8 +61,6 @@ export const manifests: Array<ManifestPropertyEditorUi> = [
 	...numbers,
 	...textBoxes,
 	...treePicker,
-	...blockList,
-	...blockGrid,
 	...collectionView,
 	...tinyMCE,
 	{