Merge pull request #7506 from umbraco/update-block-custom-view

Block custom view update

Author: eshanrnh

16/umbraco-cms/customizing/extending-overview/extension-types/block-custom-view.md

@@ -8,11 +8,17 @@ 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](../../../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.
 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
@@ -25,11 +31,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(s) here
     }
   ]
-
+}
 ```
 {% endcode %}
 
@@ -48,10 +55,14 @@ export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implemen
 	@property({ attribute: false })
 	content?: UmbBlockDataType;
 
+	@property({ attribute: false })
+	settings?: UmbBlockDataType;
+
 	render() {
 		return html`
 			<h5>My Custom View</h5>
 			<p>Headline: ${this.content?.headline}</p>
+			<p>Theme: ${this.settings?.theme}</p>
 		`;
 	}
 

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)