Skip to content

Commit 8be3c69

Browse files
committed
Review feedback. Copying to v17 docs.
1 parent 37a0b7c commit 8be3c69

File tree

2 files changed

+69
-82
lines changed
  • 16/umbraco-cms/customizing/extending-overview/extension-types
  • 17/umbraco-cms/customizing/extending-overview/extension-types

2 files changed

+69
-82
lines changed

16/umbraco-cms/customizing/extending-overview/extension-types/kind.md

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,36 @@ description: Create reusable, standardized configurations for extensions, helpin
44

55
# Kind
66

7-
A Kind is a preset configuration that extensions can inherit to ensure consistency and reduce redundancy. It defines a set of default properties or behaviors that extensions can adopt, making it easier to maintain and configure extensions that share similar functionality.
7+
A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties. This simplifies maintenance for extensions sharing similar functionality.
88

9-
A Kind is always linked to a specific extension type. Extensions using the same type and referencing a Kind automatically inherit its settings, ensuring uniformity across different extensions.
9+
Every Kind links to a specific extension type. Extensions of that type referencing a Kind automatically inherit its settings. This ensures uniformity across different extensions.
1010

1111
## Benefits of Using a Kind
1212

13-
- Reduces redundancy – Common settings are defined once and reused across extensions.
14-
- Ensures consistency – Extensions using the same Kind follow a standardized structure and behavior.
15-
- Simplifies extension definitions – Extensions inherit predefined properties, reducing manual configuration.
13+
- **Reduces redundancy**Defines common settings once for reuse across extensions.
14+
- **Ensures consistency** – Extensions using the same Kind follow a standardized structure.
15+
- **Simplifies definitions** – Extensions inherit predefined properties to reduce manual configuration.
1616

1717
## Kind Registration
1818

19-
To register a Kind, use the same method as other extensions. The key properties that define a Kind registration are:
19+
Register a Kind using the standard extension method. The key properties defining a Kind registration are:
2020

21-
- `type`: Always set to `kind`.
21+
- `type`: Always set this to `kind`.
2222
- `alias`: A unique identifier for the Kind.
23-
- `matchType`: Specifies the extension type that the Kind applies to.
24-
- `matchKind`: Defines the Kind alias, which extensions must reference.
25-
- `manifest`: Contains the preset values that extensions will inherit.
23+
- `matchType`: Specifies the applicable extension type.
24+
- `matchKind`: Defines the Kind alias referenced by extensions.
25+
- `manifest`: Contains preset values for inheritance.
2626

2727
### Example: Registering a Button Kind for Header Apps
2828

29-
The following example shows how to register a Button Kind for [**Header Apps**](../extension-types/header-apps.md). This kind provides a preset configuration for a button element that can be reused by other Header App extensions.
29+
This example registers a Button Kind for [**Header Apps**](../extension-types/header-apps.md). It provides a preset button configuration for other extensions to reuse.
30+
31+
Properties:
32+
33+
- `type` is 'kind', registering it as a Kind extension.
34+
- `matchType` is 'headerApp', targeting Header App extensions.
35+
- `matchKind` is 'button', serving as the Kind's alias.
36+
- The `manifest` holds default properties, like `elementName`, for inheritance.
3037

3138
```typescript
3239
import type { UmbExtensionManifestKind } from "@umbraco-cms/backoffice/extension-registry";
@@ -43,16 +50,9 @@ export const customHeaderAppButton: UmbExtensionManifestKind = {
4350
};
4451
```
4552

46-
Properties:
47-
48-
- `type` is set to 'kind' to register it as a Kind extension.
49-
- `matchType` is 'headerApp', specifying that this Kind is for Header App extensions.
50-
- `matchKind` is 'button', which is the alias of the Kind.
51-
- The `manifest` contains default properties like elementName that extensions using this Kind will inherit.
52-
5353
## Using the Kind in Other Extensions
5454

55-
To use the Kind in other extensions, the extension must reference it by setting the `type` and `kind` properties. The extension will automatically inherit the Kind's properties.
55+
Use a Kind by setting the `type` and `kind` properties. The extension then automatically inherits the Kind's properties.
5656

5757
### Example: Header App Extension Using the Button Kind
5858

@@ -70,18 +70,13 @@ const manifest = {
7070
};
7171
```
7272

73-
In this example, the Header App extension uses the `kind: 'button'`, meaning it inherits the `elementName` defined in the Button Kind. The extension can still add custom properties (like metadata in this case) to further customize the behavior or appearance.
73+
Here, the extension uses `kind: 'button'` to inherit `elementName`. It also adds custom metadata to further customize behavior or appearance.
7474

75-
## Kind Example
75+
## Custom Kind Example
7676

77-
Here’s an example of how to register and use the Button Kind in a Header App extension:
77+
The code below demonstrates how to create a custom kind and then use it to create a header button app.
7878

7979
{% code title="kinds/manifests.ts" %}
80-
81-
{% hint style="info" %}
82-
This example uses the dynamic extension registration approach. `umbExtensionsRegistry.register()` might be called from within an entrypoint lifecycle method like `onInit()`. For more information, see the [Backoffice Entry Point](./backoffice-entry-point.md) article.
83-
{% endhint %}
84-
8580
```typescript
8681
import type { UmbExtensionManifestKind } from "@umbraco-cms/backoffice/extension-registry";
8782

@@ -97,11 +92,11 @@ export const customHeaderAppButton: UmbExtensionManifestKind = {
9792
```
9893
{% endcode %}
9994

100-
This code registers the Button Kind, so other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
95+
This code registers the Button Kind. Other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
10196

102-
Now another Header App extension can be created without defining `elementName`, as it will automatically inherit it from the Kind:
97+
Another Header App extension can be created without defining `elementName`. It automatically inherits this property from the Kind.
10398

104-
{% code title="kinds/manifests.ts" %}
99+
{% code title="header-button/manifests.ts" %}
105100
```typescript
106101
const manifest = {
107102
type: 'headerApp',
@@ -117,4 +112,4 @@ const manifest = {
117112
```
118113
{% endcode %}
119114

120-
By referencing the Kind, the extension inherits shared properties like `elementName`, ensuring consistency and reducing redundancy across extensions. This method also makes it easier to update configurations across multiple extensions.
115+
Referencing the Kind ensures consistency by inheriting shared properties. This also simplifies updating configurations across multiple extensions.
Lines changed: 43 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,58 @@
11
---
2-
description: A kind extension provides the preset for other extensions to use.
2+
description: Create reusable, standardized configurations for extensions, helping to streamline development, ensure consistency, and reduce duplication.
33
---
44

55
# Kind
66

7-
{% hint style="warning" %}
8-
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
9-
{% endhint %}
7+
A Kind is a preset configuration that extensions inherit for consistency. It reduces redundancy by defining default properties. This simplifies maintenance for extensions sharing similar functionality.
108

11-
A Kind is a preset configuration that can be inherited by extensions to ensure consistency and reduce redundancy. It defines a set of default properties or behaviors that extensions can adopt, making it easier to maintain and configure extensions that share similar functionality.
12-
13-
A Kind is always linked to a specific extension type. Extensions using the same type and referencing a Kind automatically inherit its settings, ensuring uniformity across different extensions.
9+
Every Kind links to a specific extension type. Extensions of that type referencing a Kind automatically inherit its settings. This ensures uniformity across different extensions.
1410

1511
## Benefits of Using a Kind
1612

17-
- Reduces redundancy – Common settings are defined once and reused across extensions.
18-
- Ensures consistency – Extensions using the same Kind follow a standardized structure and behavior.
19-
- Simplifies extension definitions – Extensions inherit predefined properties, reducing manual configuration.
13+
- **Reduces redundancy**Defines common settings once for reuse across extensions.
14+
- **Ensures consistency** – Extensions using the same Kind follow a standardized structure.
15+
- **Simplifies definitions** – Extensions inherit predefined properties to reduce manual configuration.
2016

2117
## Kind Registration
2218

23-
To register a Kind, use the same method as other extensions. The key properties that define a Kind registration are:
19+
Register a Kind using the standard extension method. The key properties defining a Kind registration are:
2420

25-
- `type`: Always set to `kind`.
21+
- `type`: Always set this to `kind`.
2622
- `alias`: A unique identifier for the Kind.
27-
- `matchType`: Specifies the extension type that the Kind applies to.
28-
- `matchKind`: Defines the Kind alias, which extensions must reference.
29-
- `manifest`: Contains the preset values that extensions will inherit.
23+
- `matchType`: Specifies the applicable extension type.
24+
- `matchKind`: Defines the Kind alias referenced by extensions.
25+
- `manifest`: Contains preset values for inheritance.
3026

3127
### Example: Registering a Button Kind for Header Apps
3228

33-
The following example shows how to register a Button Kind for [**Header Apps**](../extension-types/header-apps.md). This kind provides a preset configuration for a button element that can be reused by other Header App extensions.
29+
This example registers a Button Kind for [**Header Apps**](../extension-types/header-apps.md). It provides a preset button configuration for other extensions to reuse.
30+
31+
Properties:
32+
33+
- `type` is 'kind', registering it as a Kind extension.
34+
- `matchType` is 'headerApp', targeting Header App extensions.
35+
- `matchKind` is 'button', serving as the Kind's alias.
36+
- The `manifest` holds default properties, like `elementName`, for inheritance.
3437

3538
```typescript
36-
const manifest: ManifestKind = {
39+
import type { UmbExtensionManifestKind } from "@umbraco-cms/backoffice/extension-registry";
40+
41+
export const customHeaderAppButton: UmbExtensionManifestKind = {
3742
type: 'kind',
38-
alias: 'Umb.Kind.MyButtonKind', // Unique alias for the Kind
39-
matchType: 'headerApp', // Applies to Header App extensions
40-
matchKind: 'button', // Defines the Kind alias
43+
alias: 'Umb.Kind.MyButtonKind',
44+
matchType: 'headerApp',
45+
matchKind: 'button',
4146
manifest: {
4247
// Add default properties for the 'button' Kind
4348
elementName: 'umb-header-app-button',
4449
},
4550
};
4651
```
4752

48-
In this example:
49-
50-
- `type` is set to 'kind' to register it as a Kind extension.
51-
- `matchType` is 'headerApp', specifying that this Kind is for Header App extensions.
52-
- `matchKind` is 'button', which is the alias of the Kind.
53-
- The `manifest` contains default properties like elementName that extensions using this Kind will inherit.
54-
5553
## Using the Kind in Other Extensions
5654

57-
To use the Kind in other extensions, the extension must reference it by setting the `type` and `kind` properties. The extension will automatically inherit the Kind's properties.
55+
Use a Kind by setting the `type` and `kind` properties. The extension then automatically inherits the Kind's properties.
5856

5957
### Example: Header App Extension Using the Button Kind
6058

@@ -70,42 +68,39 @@ const manifest = {
7068
href: '/some/path/to/open/when/clicked',
7169
},
7270
};
73-
74-
extensionRegistry.register(manifest);
7571
```
7672

77-
In this example, the Header App extension uses the `kind: 'button'`, meaning it inherits the `elementName` defined in the Button Kind. The extension can still add custom properties (like metadata in this case) to further customize the behavior or appearance.
73+
Here, the extension uses `kind: 'button'` to inherit `elementName`. It also adds custom metadata to further customize behavior or appearance.
7874

79-
## Kind Example
75+
## Custom Kind Example
8076

81-
Here’s an example of how to register and use the Button Kind in a Header App extension:
77+
The code below demonstrates how to create a custom kind and then use it to create a header button app.
8278

79+
{% code title="kinds/manifests.ts" %}
8380
```typescript
84-
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
81+
import type { UmbExtensionManifestKind } from "@umbraco-cms/backoffice/extension-registry";
8582

86-
const manifest: UmbExtensionManifest = {
83+
export const customHeaderAppButton: UmbExtensionManifestKind = {
8784
type: 'kind',
88-
alias: 'Umb.Kind.MyButtonKind', // Alias for the Kind
89-
matchType: 'headerApp', // Extension type the Kind applies to
90-
matchKind: 'button', // Defines the Kind alias
85+
alias: 'Umb.Kind.MyButtonKind',
86+
matchType: 'headerApp',
87+
matchKind: 'customHeaderAppButton',
9188
manifest: {
9289
elementName: 'umb-header-app-button',
9390
},
9491
};
95-
96-
umbExtensionsRegistry.register(manifest);
9792
```
93+
{% endcode %}
9894

99-
This code registers the Button Kind, so other Header App extensions using `type: 'headerApp'` and `kind: 'button'` will inherit the preset `elementName: 'umb-header-app-button'`.
95+
This code registers the Button Kind. Other Header App extensions using `type: 'headerApp'` and `kind: 'customHeaderAppButton'` will inherit the preset `elementName: 'umb-header-app-button'`.
10096

101-
Now, another Header App extension can be created without defining `elementName`, as it will automatically inherit it from the Kind:
97+
Another Header App extension can be created without defining `elementName`. It automatically inherits this property from the Kind.
10298

99+
{% code title="header-button/manifests.ts" %}
103100
```typescript
104-
import { extensionRegistry } from '@umbraco-cms/extension-registry';
105-
106101
const manifest = {
107-
type: 'headerApp', // Extension type
108-
kind: 'button', // References the 'button' Kind
102+
type: 'headerApp',
103+
kind: 'customHeaderAppButton',
109104
name: 'My Header App Example',
110105
alias: 'My.HeaderApp.Example',
111106
meta: {
@@ -114,10 +109,7 @@ const manifest = {
114109
href: '/some/path/to/open/when/clicked',
115110
},
116111
};
117-
118-
extensionRegistry.register(manifest);
119112
```
113+
{% endcode %}
120114

121-
By referencing the Kind, the extension inherits shared properties like `elementName`, ensuring consistency and reducing redundancy across extensions. This method also makes it easier to update configurations across multiple extensions.
122-
123-
By using Kinds, you can create reusable, standardized configurations for extensions, helping to streamline development, ensure consistency, and reduce duplication. Understanding how to register and reference Kinds effectively will enhance the maintainability of your Umbraco extensions.
115+
Referencing the Kind ensures consistency by inheriting shared properties. This also simplifies updating configurations across multiple extensions.

0 commit comments

Comments
 (0)