From 8798d4cd8606bd0416a6c91b14cd1fdb7ce6edf2 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Wed, 31 Jan 2024 10:45:50 +0100
Subject: [PATCH 01/11] make OpenAPI and the server url public accessible
 through the UmbAuthContext

---
 .../src/shared/auth/auth.context.ts           | 45 +++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts b/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
index 7fa2415579..6e86150fbc 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
@@ -3,19 +3,22 @@ import { UMB_AUTH_CONTEXT } from './auth.context.token.js';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
+import { OpenAPI } from '@umbraco-cms/backoffice/backend-api';
 
 export class UmbAuthContext extends UmbBaseController {
 	#isAuthorized = new UmbBooleanState<boolean>(false);
 	readonly isAuthorized = this.#isAuthorized.asObservable();
 
 	#isBypassed = false;
-	#backofficePath: string;
-
+	#serverUrl;
+	#backofficePath;
 	#authFlow;
+	#openApi = OpenAPI;
 
 	constructor(host: UmbControllerHostElement, serverUrl: string, backofficePath: string, isBypassed: boolean) {
 		super(host);
 		this.#isBypassed = isBypassed;
+		this.#serverUrl = serverUrl;
 		this.#backofficePath = backofficePath;
 
 		this.#authFlow = new UmbAuthFlow(serverUrl, this.#getRedirectUrl());
@@ -65,7 +68,7 @@ export class UmbAuthContext extends UmbBaseController {
 	 *
 	 * NB! The user may experience being redirected to the login screen if the token is expired.
 	 *
-	 * @example
+	 * @example <caption>Using the latest token</caption>
 	 * ```js
 	 *   const token = await authContext.getLatestToken();
 	 *   const result = await fetch('https://my-api.com', { headers: { Authorization: `Bearer ${token}` } });
@@ -94,6 +97,42 @@ export class UmbAuthContext extends UmbBaseController {
 		return this.#authFlow.signOut();
 	}
 
+	/**
+	 * Get the server url to the Management API.
+	 * @memberof UmbAuthContext
+	 * @example <caption>Using the server url</caption>
+	 * ```js
+	 * 	const serverUrl = authContext.getServerUrl();
+	 * 	OpenAPI.BASE = serverUrl;
+	 * ```
+	 * @example <caption></caption>
+	 * ```js
+	 * 	const serverUrl = authContext.getServerUrl();
+	 * 	const token = await authContext.getLatestToken();
+	 * 	const result = await fetch(`${serverUrl}/umbraco/management/api/v1/my-resource`, { headers: { Authorization: `Bearer ${token}` } });
+	 * ```
+	 * @returns The server url to the Management API
+	 */
+	getServerUrl() {
+		return this.#serverUrl;
+	}
+
+	/**
+	 * Get the default OpenAPI configuration, which is set up to communicate with the Management API.
+	 * @remark This is useful if you want to communicate with your own resources generated by the [openapi-typescript-codegen](https://github.com/ferdikoomen/openapi-typescript-codegen) library.
+	 * @memberof UmbAuthContext
+	 *
+	 * @example <caption>Using the default OpenAPI configuration</caption>
+	 * ```js
+	 *  	const defaultOpenApi = authContext.getOpenApiConfiguration();
+	 *  	OpenAPI = { ...OpenAPI, ...openApi };
+	 * ```
+	 * @returns The default OpenAPI configuration
+	 */
+	getOpenApiConfiguration() {
+		return this.#openApi;
+	}
+
 	#getRedirectUrl() {
 		return `${window.location.origin}${this.#backofficePath}`;
 	}

From 0236144d6ad73c07e315ab55a1a0e0b83bdda31e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Mon, 5 Feb 2024 11:17:54 +0100
Subject: [PATCH 02/11] beautify

---
 .../sorter-with-nested-containers/sorter-dashboard.ts |  1 +
 .../sorter-with-nested-containers/sorter-group.ts     | 11 +++--------
 .../sorter-with-two-containers/sorter-dashboard.ts    |  1 +
 .../sorter-with-two-containers/sorter-group.ts        |  3 +++
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
index 36f96e5de2..daefba21f6 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
@@ -75,6 +75,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 
 			.outer-wrapper {
 				display: flex;
+				gap: var(--uui-size-layout-1);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
index 85688f727d..d1a0c7e35e 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
@@ -78,6 +78,9 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			:host {
 				display: block;
 				width: 100%;
+				border: 1px dashed rgba(122, 122, 122, 0.25);
+				border-radius: calc(var(--uui-border-radius) * 2);
+				padding: var(--uui-size-space-1);
 			}
 
 			.sorter-placeholder {
@@ -87,14 +90,6 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			.sorter-container {
 				min-height: 20px;
 			}
-
-			example-sorter-group {
-				display: block;
-				width: 100%;
-				border: 1px dashed rgba(122, 122, 122, 0.25);
-				border-radius: calc(var(--uui-border-radius) * 2);
-				padding: var(--uui-size-space-1);
-			}
 		`,
 	];
 }
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
index 7747317257..feb0979603 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-dashboard.ts
@@ -57,6 +57,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
 
 			.outer-wrapper {
 				display: flex;
+				gap: var(--uui-size-layout-1);
 			}
 		`,
 	];
diff --git a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
index 6975854446..da4b209172 100644
--- a/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
+++ b/src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
@@ -69,6 +69,9 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
 			:host {
 				display: block;
 				width: 100%;
+				border: 1px dashed rgba(122, 122, 122, 0.25);
+				border-radius: calc(var(--uui-border-radius) * 2);
+				padding: var(--uui-size-space-1);
 			}
 
 			.sorter-placeholder {

From 55c2e5a2bbaa00344d6b1d642c88974ca7fbd154 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 5 Feb 2024 13:34:16 +0100
Subject: [PATCH 03/11] localizations

---
 .../property-editor-ui-block-grid.element.ts                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index 7c9b52e093..f4d2b2e5ac 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -44,7 +44,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 	private _directRoute?: string;
 
 	@state()
-	private _createButtonLabel = this.localize.term('content_createEmpty');
+	private _createButtonLabel = this.localize.term('blockEditor_addBlock');
 
 	@property({ attribute: false })
 	public set config(config: UmbPropertyEditorConfigCollection | undefined) {
@@ -62,7 +62,7 @@ export class UmbPropertyEditorUIBlockGridElement extends UmbLitElement implement
 		if (customCreateButtonLabel) {
 			this._createButtonLabel = customCreateButtonLabel;
 		} else if (this._blocks.length === 1) {
-			this._createButtonLabel = `${this.localize.term('general_add')} ${this._blocks[0].label}`;
+			this._createButtonLabel = this.localize.term('blockEditor_addThis', [this._blocks[0].label]);
 		}
 
 		//const useInlineEditingAsDefault = config.getValueByAlias<boolean>('useInlineEditingAsDefault');

From 5d92c81533d7da77e401b55d8a52709f13464b3d Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:13:10 +0100
Subject: [PATCH 04/11] hotfix event export

---
 src/Umbraco.Web.UI.Client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 30a36f3953..03bac9db89 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -45,7 +45,7 @@
 		"./tree": "./dist-cms/packages/core/tree/index.js",
 		"./variant": "./dist-cms/packages/core/variant/index.js",
 		"./workspace": "./dist-cms/packages/core/workspace/index.js",
-		"./events": "./dist-cms/packages/core/umb-events/index.js",
+		"./event": "./dist-cms/packages/core/event/index.js",
 		"./repository": "./dist-cms/packages/core/repository/index.js",
 		"./temporary-file": "./dist-cms/packages/core/temporary-file/index.js",
 		"./block": "./dist-cms/packages/block/index.js",

From 0c4599f87854be807bf39cc70abe81826aac5f18 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:31:56 +0100
Subject: [PATCH 05/11] size

---
 .../block-grid-editor/property-editor-ui-block-grid.element.ts  | 2 +-
 .../modals/block-catalogue/block-catalogue-modal.element.ts     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
index f4d2b2e5ac..fccea2bcf0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-editor/property-editor-ui-block-grid.element.ts
@@ -1,6 +1,6 @@
 import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type { ManifestPropertyEditorUi, 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';
 import {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index e12ac2b161..8cc4b3f4d6 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -117,7 +117,7 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		return html`
 			${mappedGroupsAndBlocks.map(
 				(group) => html`
-					${group.name ? html`<h2>${group.name}</h2>` : nothing}
+					${group.name ? html`<h4>${group.name}</h4>` : nothing}
 					<div class="blockGroup">
 						${repeat(
 							group.blocks,

From 064d7430e4adf40e32c1799aea9af94d71bde610 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:41:31 +0100
Subject: [PATCH 06/11] set value for credentials

---
 src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts b/src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts
index 1663dd3d26..88aa57b3ef 100644
--- a/src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts
@@ -136,6 +136,7 @@ export class UmbAppElement extends UmbLitElement {
 		// Instruct all requests to use the auth flow to get and use the access_token for all subsequent requests
 		OpenAPI.TOKEN = () => this.#authContext!.getLatestToken();
 		OpenAPI.WITH_CREDENTIALS = true;
+		OpenAPI.CREDENTIALS = 'include';
 	}
 
 	#redirect() {

From ebeadda9fa91c2052057d658365df0ad073ae660 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:45:57 +0100
Subject: [PATCH 07/11] model to hold openapi configuration

---
 .../auth/models/openApiConfiguration.ts       | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/Umbraco.Web.UI.Client/src/shared/auth/models/openApiConfiguration.ts

diff --git a/src/Umbraco.Web.UI.Client/src/shared/auth/models/openApiConfiguration.ts b/src/Umbraco.Web.UI.Client/src/shared/auth/models/openApiConfiguration.ts
new file mode 100644
index 0000000000..0bdc8ea97a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/shared/auth/models/openApiConfiguration.ts
@@ -0,0 +1,32 @@
+/**
+ * Configuration for the OpenAPI (Umbraco) server. This is used to communicate with the Management API.
+ * This is useful if you want to configure your Fetch, Axios or other HTTP client to communicate with the Management API.
+ * If you use the recommended resource generator [openapi-typescript-codegen](https://github.com/ferdikoomen/openapi-typescript-codegen) this can be used to configure the `OpenAPI` object.
+ */
+export interface UmbOpenApiConfiguration {
+	/**
+	 * The base URL of the OpenAPI (Umbraco) server.
+	 */
+	readonly base: string;
+
+	/**
+	 * The configured version of the Management API to use.
+	 */
+	readonly version: string;
+
+	/**
+	 * The `withCredentials` option for the Fetch API.
+	 */
+	readonly withCredentials: boolean;
+
+	/**
+	 * The `credentials` option for the Fetch API.
+	 */
+	readonly credentials: 'include' | 'omit' | 'same-origin';
+
+	/**
+	 * The token to use for the Authorization header.
+	 * @returns A resolver for the token to use for the Authorization header.
+	 */
+	readonly token: () => Promise<string>;
+}

From a477495e509f27e32c5738829fd138275c6eee35 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:46:13 +0100
Subject: [PATCH 08/11] export model

---
 src/Umbraco.Web.UI.Client/src/shared/auth/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Umbraco.Web.UI.Client/src/shared/auth/index.ts b/src/Umbraco.Web.UI.Client/src/shared/auth/index.ts
index e2633039d7..e6dc7d478d 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/auth/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/auth/index.ts
@@ -1,2 +1,3 @@
 export * from './auth.context.js';
 export * from './auth.context.token.js';
+export * from './models/openApiConfiguration.js';

From 8dfe36400a99fa0f567a755768a6e8351038f057 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Mon, 5 Feb 2024 14:46:32 +0100
Subject: [PATCH 09/11] export our own model instead of the generated model and
 update the example

---
 .../src/shared/auth/auth.context.ts              | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts b/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
index 6e86150fbc..21cbf444cd 100644
--- a/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/shared/auth/auth.context.ts
@@ -1,5 +1,6 @@
 import { UmbAuthFlow } from './auth-flow.js';
 import { UMB_AUTH_CONTEXT } from './auth.context.token.js';
+import type { UmbOpenApiConfiguration } from './models/openApiConfiguration.js';
 import type { UmbControllerHostElement } from '@umbraco-cms/backoffice/controller-api';
 import { UmbBaseController } from '@umbraco-cms/backoffice/class-api';
 import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
@@ -125,12 +126,21 @@ export class UmbAuthContext extends UmbBaseController {
 	 * @example <caption>Using the default OpenAPI configuration</caption>
 	 * ```js
 	 *  	const defaultOpenApi = authContext.getOpenApiConfiguration();
-	 *  	OpenAPI = { ...OpenAPI, ...openApi };
+	 *  	OpenAPI.BASE = defaultOpenApi.base;
+	 * 		OpenAPI.WITH_CREDENTIALS = defaultOpenApi.withCredentials;
+	 * 		OpenAPI.CREDENTIALS = defaultOpenApi.credentials;
+	 * 		OpenAPI.TOKEN = defaultOpenApi.token;
 	 * ```
 	 * @returns The default OpenAPI configuration
 	 */
-	getOpenApiConfiguration() {
-		return this.#openApi;
+	getOpenApiConfiguration(): UmbOpenApiConfiguration {
+		return {
+			base: OpenAPI.BASE,
+			version: OpenAPI.VERSION,
+			withCredentials: OpenAPI.WITH_CREDENTIALS,
+			credentials: OpenAPI.CREDENTIALS,
+			token: () => this.getLatestToken(),
+		};
 	}
 
 	#getRedirectUrl() {

From 76825064f61cfe47111067ebe32cecd766c26038 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:13:21 +0100
Subject: [PATCH 10/11] render and grouping

---
 .../block-catalogue-modal.element.ts          | 64 ++++++++-----------
 1 file changed, 25 insertions(+), 39 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 8cc4b3f4d6..6c65ce57e5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -1,8 +1,5 @@
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
-import {
-	DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
-	type UmbDocumentTypeItemModel,
-} from '@umbraco-cms/backoffice/document-type';
+import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
 import type {
 	UmbBlockCatalogueModalData,
 	UmbBlockCatalogueModalValue,
@@ -10,7 +7,6 @@ import type {
 	UmbBlockTypeWithGroupKey,
 } from '@umbraco-cms/backoffice/block';
 import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
 import {
 	UMB_MODAL_CONTEXT,
 	UmbModalBaseElement,
@@ -23,17 +19,14 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	UmbBlockCatalogueModalData,
 	UmbBlockCatalogueModalValue
 > {
-	#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
+	#itemManager = new UmbRepositoryItemsManager<UmbBlockTypeWithGroupKey>(
 		this,
 		DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
-		(x) => x.unique,
+		(x) => x.contentElementTypeKey,
 	);
 
 	@state()
-	private _blocks: Array<UmbBlockTypeWithGroupKey> = [];
-
-	@state()
-	private _blockGroups: Array<UmbBlockTypeGroup> = [];
+	private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
 
 	@state()
 	_openClipboard?: boolean;
@@ -60,19 +53,6 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 					this._workspacePath = routeBuilder({});
 				});
 		});
-
-		this.observe(this.#itemManager.items, (items) => {
-			this._blocks = items.map((item) => {
-				const blockGroup = this._blocks.find((block) => block.contentElementTypeKey === item.unique)?.groupKey;
-				const block: UmbBlockTypeWithGroupKey = {
-					contentElementTypeKey: item.unique,
-					label: item.name,
-					icon: item.icon ?? undefined,
-					groupKey: blockGroup,
-				};
-				return block;
-			});
-		});
 	}
 
 	connectedCallback() {
@@ -80,10 +60,17 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		if (!this.data) return;
 
 		this._openClipboard = this.data.openClipboard ?? false;
-		this._blocks = this.data.blocks ?? [];
-		this._blockGroups = this.data.blockGroups ?? [];
 
-		this.#itemManager.setUniques(this._blocks.map((x) => x.contentElementTypeKey));
+		const blocks: Array<UmbBlockTypeWithGroupKey> = this.data.blocks ?? [];
+		const blockGroups: Array<UmbBlockTypeGroup> = this.data.blockGroups ?? [];
+
+		const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey));
+		const grouped = blockGroups.map((group) => ({
+			name: group.name ?? '',
+			blocks: blocks.filter((block) => block.groupKey === group.key),
+		}));
+
+		this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
 	}
 
 	render() {
@@ -107,15 +94,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	}
 
 	#renderCreateEmpty() {
-		const blockArrays = groupBy(this._blocks, 'groupKey');
-
-		const mappedGroupsAndBlocks = Object.entries(blockArrays).map(([key, value]) => {
-			const group = this._blockGroups.find((group) => group.key === key);
-			return { name: group?.name, blocks: value };
-		});
-
 		return html`
-			${mappedGroupsAndBlocks.map(
+			${this._groupedBlocks.map(
 				(group) => html`
 					${group.name ? html`<h4>${group.name}</h4>` : nothing}
 					<div class="blockGroup">
@@ -141,12 +121,18 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	#renderViews() {
 		return html`
 			<uui-tab-group slot="navigation">
-				<uui-tab label="Create Empty" ?active=${!this._openClipboard} @click=${() => (this._openClipboard = false)}>
-					Create Empty
+				<uui-tab
+					label=${this.localize.term('blockEditor_tabCreateEmpty')}
+					?active=${!this._openClipboard}
+					@click=${() => (this._openClipboard = false)}>
+					<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
 					<uui-icon slot="icon" name="icon-add"></uui-icon>
 				</uui-tab>
-				<uui-tab label="Clipboard" ?active=${this._openClipboard} @click=${() => (this._openClipboard = true)}>
-					Clipboard
+				<uui-tab
+					label=${this.localize.term('blockEditor_tabClipboard')}
+					?active=${this._openClipboard}
+					@click=${() => (this._openClipboard = true)}>
+					<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
 					<uui-icon slot="icon" name="icon-paste-in"></uui-icon>
 				</uui-tab>
 			</uui-tab-group>

From 2d97e1ab6bcbc573100a8be5f8409adbf4dff0f8 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:15:28 +0100
Subject: [PATCH 11/11] remove leftovers

---
 .../block-catalogue/block-catalogue-modal.element.ts      | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
index 6c65ce57e5..1beec67023 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
@@ -1,5 +1,4 @@
 import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
-import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
 import type {
 	UmbBlockCatalogueModalData,
 	UmbBlockCatalogueModalValue,
@@ -12,19 +11,12 @@ import {
 	UmbModalBaseElement,
 	UmbModalRouteRegistrationController,
 } from '@umbraco-cms/backoffice/modal';
-import { UmbRepositoryItemsManager } from '@umbraco-cms/backoffice/repository';
 
 @customElement('umb-block-catalogue-modal')
 export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	UmbBlockCatalogueModalData,
 	UmbBlockCatalogueModalValue
 > {
-	#itemManager = new UmbRepositoryItemsManager<UmbBlockTypeWithGroupKey>(
-		this,
-		DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
-		(x) => x.contentElementTypeKey,
-	);
-
 	@state()
 	private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];