From 94b88977152145b717aa36a9f4de3ea851c76152 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Tue, 14 Oct 2025 17:16:56 +0700 Subject: [PATCH 1/4] update block custom view --- .../extension-types/block-custom-view.md | 12 +++++++++--- .../extending-overview/extension-types/README.md | 2 +- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md index 469cd2746f1..398be142e98 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md @@ -8,6 +8,11 @@ The Block Custom View extension type lets you define a Web Component for represe ## Build a Custom View +{% hint style="info" %} +Before creating a Block Custom View, make sure you are familiar with the [Extension Registry in Umbraco](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry/extension-registry). +You can also refer to the tutorial [Custom Views for Block List](https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist) for a step-by-step guide. +{% endhint %} + 1. Make a Document Type with a Property using a Block Editor of choice. 2. Configure at least one Block Type on the Block Editor. 3. Ensure the Element Type of the Blocks Content Model has a property using `headline` as the Property Alias. @@ -25,11 +30,12 @@ The Block Custom View extension type lets you define a Web Component for represe "type": "blockEditorCustomView", "alias": "my.blockEditorCustomView.Example", "name": "My Example Custom View", - "element": "/App_Plugins/welcome-dashboard/dist/example-block-custom-view.js", - "forContentTypeAlias": "{Insert Element Type Alias here}" + "element": "/App_Plugins/block-custom-view/dist/example-block-custom-view.js", + "forContentTypeAlias": "myElementTypeAlias", // insert element type alias here + "forBlockEditor": "block-list" // insert block type here } ] - +} ``` {% endcode %} diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/README.md b/17/umbraco-cms/customizing/extending-overview/extension-types/README.md index 6cfd32a3077..2b452c8eaac 100644 --- a/17/umbraco-cms/customizing/extending-overview/extension-types/README.md +++ b/17/umbraco-cms/customizing/extending-overview/extension-types/README.md @@ -23,7 +23,7 @@ The `backofficeEntryPoint` extension type is used to execute JavaScript upon ini ### [Block Custom View](block-custom-view.md) -The `blockEditorCustomView` extension type is used to define a custom web component for representing blocks inside the Umbraco block grid property editor. +The `blockEditorCustomView` extension type is used to define a custom web component for representing blocks inside the Umbraco block property editor. ### [Bundle](bundle.md) From 98da56744507f7cbcb951b41b522a449c80e4b17 Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Wed, 15 Oct 2025 08:25:43 +0700 Subject: [PATCH 2/4] add setting value --- .../extension-types/block-custom-view.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md index 398be142e98..d3fee2f0230 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md @@ -17,7 +17,8 @@ You can also refer to the tutorial [Custom Views for Block List](https://docs.um 2. Configure at least one Block Type on the Block Editor. 3. Ensure the Element Type of the Blocks Content Model has a property using `headline` as the Property Alias. 4. Take note of the Element Type Alias as you will use that in the next step. -5. Add the following code to the `umbraco-package.json` file: +5. Create a Settings Model for the above Element Type and add a property with alias `theme`. +6. Add the following code to the `umbraco-package.json` file: {% code title="umbraco-package.json" %} ```json @@ -32,7 +33,7 @@ You can also refer to the tutorial [Custom Views for Block List](https://docs.um "name": "My Example Custom View", "element": "/App_Plugins/block-custom-view/dist/example-block-custom-view.js", "forContentTypeAlias": "myElementTypeAlias", // insert element type alias here - "forBlockEditor": "block-list" // insert block type here + "forBlockEditor": "block-list" // insert block type here } ] } @@ -54,10 +55,14 @@ export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implemen @property({ attribute: false }) content?: UmbBlockDataType; + @property({ attribute: false }) + settings?: UmbBlockDataType; + render() { return html`
My Custom View

Headline: ${this.content?.headline}

+

Theme: ${this.settings?.theme}

`; } From 240cf44b69a68e0e9c44284f8d35bfef3ad8808d Mon Sep 17 00:00:00 2001 From: NguyenThuyLan <116753400+NguyenThuyLan@users.noreply.github.com> Date: Tue, 28 Oct 2025 10:07:31 +0700 Subject: [PATCH 3/4] Update 16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md Co-authored-by: Andy Butland --- .../extending-overview/extension-types/block-custom-view.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md index d3fee2f0230..97422b9406f 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md @@ -33,7 +33,7 @@ You can also refer to the tutorial [Custom Views for Block List](https://docs.um "name": "My Example Custom View", "element": "/App_Plugins/block-custom-view/dist/example-block-custom-view.js", "forContentTypeAlias": "myElementTypeAlias", // insert element type alias here - "forBlockEditor": "block-list" // insert block type here + "forBlockEditor": "block-list" // insert block type(s) here } ] } From 61cc82d26bdbb9cd7faae605c454df2f13eccdaa Mon Sep 17 00:00:00 2001 From: Lan Nguyen Thuy Date: Tue, 28 Oct 2025 10:23:05 +0700 Subject: [PATCH 4/4] fix relative link references --- .../extending-overview/extension-types/block-custom-view.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md index 97422b9406f..31fa0a5a76e 100644 --- a/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md +++ b/16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md @@ -9,8 +9,8 @@ The Block Custom View extension type lets you define a Web Component for represe ## Build a Custom View {% hint style="info" %} -Before creating a Block Custom View, make sure you are familiar with the [Extension Registry in Umbraco](https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry/extension-registry). -You can also refer to the tutorial [Custom Views for Block List](https://docs.umbraco.com/umbraco-cms/tutorials/creating-custom-views-for-blocklist) for a step-by-step guide. +Before creating a Block Custom View, make sure you are familiar with the [Extension Registry in Umbraco](../../../customizing/extending-overview/extension-registry/register-extensions.md). +You can also refer to the tutorial [Custom Views for Block List](../../../tutorials/creating-custom-views-for-blocklist.md) for a step-by-step guide. {% endhint %} 1. Make a Document Type with a Property using a Block Editor of choice.