Merge remote-tracking branch 'origin/main' into v14/bugfix/focus-directive-late-focus

Author: leekelleher

examples/block-custom-view/README.md

@@ -0,0 +1,7 @@
+# Property Dataset Dashboard Example
+
+This example is a work in progress example of how to write a property editor.
+
+This example covers a few points:
+
+- Using an existing Property Editor Schema

examples/block-custom-view/block-custom-view.ts

@@ -0,0 +1,42 @@
+import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
+import { html, customElement, LitElement, property, css } from '@umbraco-cms/backoffice/external/lit';
+import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
+import type { UmbBlockDataType, UmbBlockEditorCustomViewElement } from '@umbraco-cms/backoffice/extension-registry';
+
+@customElement('example-block-custom-view')
+export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implements UmbBlockEditorCustomViewElement {
+	//
+	@property({ attribute: false })
+	content?: UmbBlockDataType;
+
+	override render() {
+		return html`
+			<div class="uui-text">
+				<h5 class="uui-text">My Custom View</h5>
+				<p>Headline: ${this.content.headline}</p>
+			</div>
+		`;
+	}
+
+	static override styles = [
+		UmbTextStyles,
+		css`
+			:host {
+				display: block;
+				height: 100%;
+				box-sizing: border-box;
+				background-color: #dddddd;
+				border-radius: 9px;
+				padding: 12px;
+			}
+		`,
+	];
+}
+
+export default ExampleBlockCustomView;
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'example-block-custom-view': ExampleBlockCustomView;
+	}
+}

examples/block-custom-view/index.ts

@@ -0,0 +1,12 @@
+import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
+
+export const manifests: Array<ManifestBlockEditorCustomView> = [
+	{
+		type: 'blockEditorCustomView',
+		alias: 'Umb.blockEditorCustomView.TestView',
+		name: 'Block Editor Custom View Test',
+		element: () => import('./block-custom-view.js'),
+		forContentTypeAlias: 'headlineUmbracoDemoBlock',
+		forBlockEditor: 'block-grid',
+	},
+];

package-lock.json

@@ -222,7 +222,7 @@
 		"@hey-api/openapi-ts": "^0.48.3",
 		"@mdx-js/react": "^3.0.1",
 		"@open-wc/testing": "^4.0.0",
-		"@playwright/test": "^1.45.2",
+		"@playwright/test": "^1.45.3",
 		"@rollup/plugin-commonjs": "^26.0.1",
 		"@rollup/plugin-json": "^6.1.0",
 		"@rollup/plugin-node-resolve": "^15.2.3",
@@ -267,7 +267,7 @@
 		"storybook": "^7.6.17",
 		"tiny-glob": "^0.2.9",
 		"tsc-alias": "^1.8.10",
-		"typedoc": "^0.26.4",
+		"typedoc": "^0.26.5",
 		"typescript": "^5.5.3",
 		"typescript-eslint": "^7.16.1",
 		"typescript-json-schema": "^0.64.0",

package.json

@@ -1735,18 +1735,19 @@ export default {
 		enabled: 'Enabled',
 		events: 'Events',
 		event: 'Event',
-		url: 'Url',
+		url: 'URL',
 		types: 'Types',
 		webhookKey: 'Webhook key',
 		retryCount: 'Retry count',
-		urlDescription: 'The url to call when the webhook is triggered.',
+		urlDescription: 'The URL to call when the webhook is triggered.',
 		eventDescription: 'The events for which the webhook should be triggered.',
 		contentTypeDescription: 'Only trigger the webhook for a specific content type.',
 		enabledDescription: 'Is the webhook enabled?',
 		headersDescription: 'Custom headers to include in the webhook request.',
 		contentType: 'Content Type',
 		headers: 'Headers',
 		selectEventFirst: 'Please select an event first.',
+		selectEvents: 'Select events',
 	},
 	languages: {
 		addLanguage: 'Add language',

src/assets/css/umbraco-blockgridlayout-flexbox.css

@@ -79,7 +79,9 @@ export class UmbPropertyEditorUIBlockGridLayoutStylesheetElement
 				.min=${this._limitMin}
 				.max=${this._limitMax}></umb-input-static-file>
 			<br />
-			<a href="/umbraco/backoffice/assets/css/umbraco-blockgridlayout.css">Link to default layout stylesheet</a>
+			<a href="/umbraco/backoffice/css/umbraco-blockgridlayout.css" target="_blank"
+				>Link to default layout stylesheet</a
+			>
 		`;
 	}
 

src/assets/css/umbraco-blockgridlayout.css

@@ -90,17 +90,18 @@ export class UmbCompositionPickerModalElement extends UmbModalBaseElement<
 		await this.#init;
 		if (!this.#compositionRepository) return;
 
-		const isElement = this.data?.isElement;
-		const currentPropertyAliases = this.data?.currentPropertyAliases;
+		// Notice isElement is not available on all types that can be composed.
+		const isElement = this.data?.isElement ?? undefined;
+		const currentPropertyAliases = this.data?.currentPropertyAliases ?? [];
 
 		const { data } = await this.#compositionRepository.availableCompositions({
 			unique: this.#unique,
 			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 			// @ts-ignore
 			// TODO: isElement is not available on all types that can be composed.
-			isElement: isElement ?? false,
+			isElement: isElement,
 			currentCompositeUniques: this._selection,
-			currentPropertyAliases: currentPropertyAliases ?? [],
+			currentPropertyAliases: currentPropertyAliases,
 		});
 
 		if (!data) return;