block card

src/Umbraco.Web.UI.Client/src/mocks/data/data-type/data-type.data.ts

@@ -674,6 +674,8 @@ export const data: Array<UmbMockDataTypeModel> = [
 					{
 						label: 'Mocked Block Type for Block Grid',
 						contentElementTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
+						allowAtRoot: true,
+						allowInAreas: true,
 						rowMinSpan: 1,
 						rowMaxSpan: 2,
 						columnSpanOptions: [
@@ -720,6 +722,7 @@ export const data: Array<UmbMockDataTypeModel> = [
 						iconColor: '#FFFDD0',
 						backgroundColor: '#633f32',
 						editorSize: 'medium',
+						allowInAreas: true,
 					},
 
 					{
@@ -728,30 +731,35 @@ export const data: Array<UmbMockDataTypeModel> = [
 						backgroundColor: 'gold',
 						editorSize: 'medium',
 						groupKey: 'demo-block-group-id',
+						allowInAreas: true,
 					},
 					{
 						label: 'Image',
 						contentElementTypeKey: 'image-umbraco-demo-block-id',
 						editorSize: 'medium',
 						groupKey: 'demo-block-group-id',
+						allowInAreas: true,
 					},
 					{
 						label: 'Rich Text',
 						contentElementTypeKey: 'rich-text-umbraco-demo-block-id',
 						editorSize: 'medium',
 						groupKey: 'demo-block-group-id',
+						allowInAreas: true,
 					},
 					{
 						label: 'Two Column Layout',
 						contentElementTypeKey: 'two-column-layout-umbraco-demo-block-id',
 						editorSize: 'medium',
 						groupKey: 'demo-block-group-id',
+						allowAtRoot: false,
 					},
 					{
 						label: 'Test broken group key',
 						contentElementTypeKey: 'test-block-id',
 						editorSize: 'medium',
 						groupKey: 'group-id-that-does-not-exist',
+						allowAtRoot: true,
 					},
 				],
 			},

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

@@ -13,7 +13,7 @@ import type { UUIInputEvent } from '@umbraco-cms/backoffice/external/uui';
 import { UMB_PROPERTY_DATASET_CONTEXT, type UmbPropertyDatasetContext } from '@umbraco-cms/backoffice/property';
 import { UMB_WORKSPACE_MODAL, UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/modal';
 
-interface MappedGroupWithBlockTypes extends UmbBlockGridTypeGroupType {
+interface MappedGroupWithBlockTypes extends Partial<UmbBlockGridTypeGroupType> {
 	blocks: Array<UmbBlockTypeWithGroupKey>;
 }
 
@@ -90,7 +90,7 @@ export class UmbPropertyEditorUIBlockGridTypeConfigurationElement
 			return { name: group.name, key: group.key, blocks: this._value.filter((value) => value.groupKey === group.key) };
 		});
 
-		this._mappedValuesAndGroups = [{ name: '', key: '', blocks: valuesWithNoGroup }, ...valuesWithGroup];
+		this._mappedValuesAndGroups = [{ blocks: valuesWithNoGroup }, ...valuesWithGroup];
 	}
 
 	#onChange(e: CustomEvent, groupKey?: string) {

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/block-type-card/block-type-card.element.ts

@@ -44,10 +44,10 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 	private _elementTypeKey?: string | undefined;
 
 	@state()
-	_name?: string;
+	_fallbackName?: string;
 
 	@state()
-	_icon?: string | null;
+	_fallbackIcon?: string | null;
 
 	constructor() {
 		super();
@@ -55,8 +55,9 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		this.observe(this.#itemManager.items, (items) => {
 			const item = items[0];
 			if (item) {
-				this._icon = item.icon;
-				this._name = item.name;
+				console.log('got item', item);
+				this._fallbackIcon = item.icon;
+				this._fallbackName = item.name;
 			}
 		});
 	}
@@ -66,9 +67,9 @@ export class UmbBlockTypeCardElement extends UmbLitElement {
 		return html`
 			<uui-card-block-type
 				href=${ifDefined(this.href)}
-				.name=${this.name ?? this._name ?? ''}
+				.name=${this.name ?? this._fallbackName ?? ''}
 				.background=${this.backgroundColor}>
-				<uui-icon name=${this._icon ?? ''} style="color:${this.iconColor}"></uui-icon>
+				<uui-icon name=${this._fallbackIcon ?? ''} style="color:${this.iconColor}"></uui-icon>
 				<slot name="actions" slot="actions"> </slot>
 			</uui-card-block-type>
 		`;

src/Umbraco.Web.UI.Client/src/packages/block/block-type/components/input-block-type/input-block-type.element.ts

@@ -100,14 +100,14 @@ export class UmbInputBlockTypeElement<
 		</div>`;
 	}
 
-	#renderItem = (item: BlockType) => {
+	#renderItem = (block: BlockType) => {
 		return html`
 			<umb-block-type-card
 				.name=${block.label}
 				.iconColor=${block.iconColor}
 				.backgroundColor=${block.backgroundColor}
-				.href="${this.workspacePath}/edit/${item.contentElementTypeKey}"
-				.key=${item.contentElementTypeKey}>
+				.href="${this.workspacePath}/edit/${block.contentElementTypeKey}"
+				.contentElementTypeKey=${block.contentElementTypeKey}>
 				<uui-action-bar slot="actions">
 					<uui-button @click=${this.#onRequestDelete} label="Remove block">
 						<uui-icon name="icon-trash"></uui-icon>

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

@@ -13,7 +13,7 @@ export interface UmbBlockTypeBaseModel {
 }
 
 export interface UmbBlockTypeGroup {
-	name?: string | null;
+	name?: string;
 	key: string;
 }
 

src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts

@@ -5,7 +5,7 @@ import type {
 	UmbBlockTypeGroup,
 	UmbBlockTypeWithGroupKey,
 } from '@umbraco-cms/backoffice/block';
-import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
+import { css, html, customElement, state, repeat, nothing } from '@umbraco-cms/backoffice/external/lit';
 import {
 	UMB_MODAL_CONTEXT,
 	UmbModalBaseElement,
@@ -56,11 +56,9 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 		const blocks: Array<UmbBlockTypeWithGroupKey> = this.data.blocks ?? [];
 		const blockGroups: Array<UmbBlockTypeGroup> = this.data.blockGroups ?? [];
 
-		console.log(blocks, blockGroups);
-
 		const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey));
 		const grouped = blockGroups.map((group) => ({
-			name: group.name ?? '',
+			name: group.name,
 			blocks: blocks.filter((block) => block.groupKey === group.key),
 		}));
 
@@ -88,28 +86,29 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
 	}
 
 	#renderCreateEmpty() {
-		console.log('render', this._groupedBlocks);
 		return html`
-			${this._groupedBlocks.map(
-				(group) => html`
-					${group.name && group.name !== '' ? html`<h4>${group.name}</h4>` : nothing}
-					<div class="blockGroup">
-						${repeat(
-							group.blocks,
-							(block) => block.contentElementTypeKey,
-							(block) => html`
-								<umb-block-type-card
-									.name=${ifDefined(block.label)}
-									.iconColor=${block.iconColor}
-									.backgroundColor=${block.backgroundColor}
-									.key=${block.contentElementTypeKey}
-									.href="${this._workspacePath}create/${block.contentElementTypeKey}">
-								</umb-block-type-card>
-							`,
-						)}
-					</div>
-				`,
-			)}
+			${this._groupedBlocks
+				? this._groupedBlocks.map(
+						(group) => html`
+							${group.name && group.name !== '' ? html`<h4>${group.name}</h4>` : nothing}
+							<div class="blockGroup">
+								${repeat(
+									group.blocks,
+									(block) => block.contentElementTypeKey,
+									(block) => html`
+										<umb-block-type-card
+											.name=${block.label}
+											.iconColor=${block.iconColor}
+											.backgroundColor=${block.backgroundColor}
+											.contentElementTypeKey=${block.contentElementTypeKey}
+											.href="${this._workspacePath}create/${block.contentElementTypeKey}">
+										</umb-block-type-card>
+									`,
+								)}
+							</div>
+						`,
+				  )
+				: ''}
 		`;
 	}