重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
umbraco-block-editor-custom-view by umbraco/umbraco-cms-backoffice-skills
npx skills add https://github.com/umbraco/umbraco-cms-backoffice-skills --skill umbraco-block-editor-custom-view区块编辑器自定义视图为区块列表、区块网格或区块富文本编辑器中的区块提供自定义视觉呈现。您无需使用默认的区块渲染方式,而是可以创建一个自定义 Web 组件,以专门的方式显示区块内容——这对于主题预览、特定领域可视化或增强的编辑体验非常有用。
在实施前请务必获取最新文档:
umbraco-umbraco-elementUmbraco 源代码中包含一个可运行的示例:
位置 : /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/block-custom-view/
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
此示例演示了自定义区块视图的实现。请研究此示例以了解生产模式。
{
"name": "My Block Views",
"extensions": [
{
"type": "blockEditorCustomView",
"alias": "My.BlockView.Hero",
"name": "Hero Block View",
"element": "/App_Plugins/MyBlocks/hero-view.js",
"forContentTypeAlias": "heroBlock",
"forBlockEditor": "block-list"
}
]
}
import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Hero',
name: 'Hero Block View',
element: () => import('./hero-block-view.element.js'),
forContentTypeAlias: 'heroBlock',
forBlockEditor: ['block-list', 'block-grid'],
};
export const manifests = [manifest];
import { html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbBlockEditorCustomViewElement, UmbBlockDataType } from '@umbraco-cms/backoffice/block';
@customElement('my-hero-block-view')
export class MyHeroBlockViewElement extends UmbLitElement implements UmbBlockEditorCustomViewElement {
@property({ attribute: false })
content?: UmbBlockDataType;
@property({ attribute: false })
settings?: UmbBlockDataType;
render() {
return html`
<div class="hero-preview">
<h2>${this.content?.headline ?? 'No headline'}</h2>
<p>${this.content?.subheadline ?? ''}</p>
${this.content?.backgroundImage
? html`<div class="bg-indicator">Has background image</div>`
: ''}
</div>
`;
}
static styles = css`
:host {
display: block;
}
.hero-preview {
padding: var(--uui-size-space-4);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--uui-border-radius);
min-height: 100px;
}
h2 {
margin: 0 0 var(--uui-size-space-2);
font-size: 1.2em;
}
p {
margin: 0;
opacity: 0.8;
}
.bg-indicator {
margin-top: var(--uui-size-space-2);
font-size: 0.8em;
opacity: 0.6;
}
`;
}
export default MyHeroBlockViewElement;
declare global {
interface HTMLElementTagNameMap {
'my-hero-block-view': MyHeroBlockViewElement;
}
}
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Cards',
name: 'Card Blocks View',
element: () => import('./card-block-view.element.js'),
forContentTypeAlias: ['cardBlock', 'featureCard', 'testimonialCard'],
forBlockEditor: 'block-grid',
};
// 省略 forContentTypeAlias 以应用于所有区块
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Universal',
name: 'Universal Block View',
element: () => import('./universal-view.element.js'),
forBlockEditor: 'block-list', // 仅指定编辑器类型
};
@customElement('my-styled-block-view')
export class MyStyledBlockViewElement extends UmbLitElement implements UmbBlockEditorCustomViewElement {
@property({ attribute: false })
content?: UmbBlockDataType;
@property({ attribute: false })
settings?: UmbBlockDataType;
render() {
// 设置包含区块配置(颜色、布局选项等)
const bgColor = this.settings?.backgroundColor ?? '#ffffff';
const padding = this.settings?.padding ?? 'medium';
return html`
<div style="background-color: ${bgColor}" class="padding-${padding}">
<h3>${this.content?.title}</h3>
<div>${this.content?.text}</div>
</div>
`;
}
}
| 属性 | 描述 |
|---|---|
forContentTypeAlias | 此视图适用的内容类型别名(一个或多个) |
forBlockEditor | 编辑器类型:block-list、block-grid、block-rte |
| 属性 | 类型 | 描述 |
|---|---|---|
content | UmbBlockDataType | 区块的内容数据 |
settings | UmbBlockDataType | 区块的设置数据 |
就是这样!请务必获取最新文档,保持示例简洁,并生成完整可运行的代码。
每周安装次数
69
代码仓库
GitHub 星标数
14
首次出现
2026年2月4日
安全审计
安装于
github-copilot50
cursor23
opencode21
codex21
gemini-cli19
amp19
A Block Editor Custom View provides a custom visual representation for blocks in Block List, Block Grid, or Block RTE editors. Instead of the default block rendering, you can create a custom Web Component that displays block content in a specialized way - useful for themed previews, domain-specific visualizations, or enhanced editing experiences.
Always fetch the latest docs before implementing:
umbraco-umbraco-elementThe Umbraco source includes a working example:
Location : /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/block-custom-view/
This example demonstrates a custom block view implementation. Study this for production patterns.
{
"name": "My Block Views",
"extensions": [
{
"type": "blockEditorCustomView",
"alias": "My.BlockView.Hero",
"name": "Hero Block View",
"element": "/App_Plugins/MyBlocks/hero-view.js",
"forContentTypeAlias": "heroBlock",
"forBlockEditor": "block-list"
}
]
}
import type { ManifestBlockEditorCustomView } from '@umbraco-cms/backoffice/extension-registry';
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Hero',
name: 'Hero Block View',
element: () => import('./hero-block-view.element.js'),
forContentTypeAlias: 'heroBlock',
forBlockEditor: ['block-list', 'block-grid'],
};
export const manifests = [manifest];
import { html, css, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { UmbBlockEditorCustomViewElement, UmbBlockDataType } from '@umbraco-cms/backoffice/block';
@customElement('my-hero-block-view')
export class MyHeroBlockViewElement extends UmbLitElement implements UmbBlockEditorCustomViewElement {
@property({ attribute: false })
content?: UmbBlockDataType;
@property({ attribute: false })
settings?: UmbBlockDataType;
render() {
return html`
<div class="hero-preview">
<h2>${this.content?.headline ?? 'No headline'}</h2>
<p>${this.content?.subheadline ?? ''}</p>
${this.content?.backgroundImage
? html`<div class="bg-indicator">Has background image</div>`
: ''}
</div>
`;
}
static styles = css`
:host {
display: block;
}
.hero-preview {
padding: var(--uui-size-space-4);
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border-radius: var(--uui-border-radius);
min-height: 100px;
}
h2 {
margin: 0 0 var(--uui-size-space-2);
font-size: 1.2em;
}
p {
margin: 0;
opacity: 0.8;
}
.bg-indicator {
margin-top: var(--uui-size-space-2);
font-size: 0.8em;
opacity: 0.6;
}
`;
}
export default MyHeroBlockViewElement;
declare global {
interface HTMLElementTagNameMap {
'my-hero-block-view': MyHeroBlockViewElement;
}
}
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Cards',
name: 'Card Blocks View',
element: () => import('./card-block-view.element.js'),
forContentTypeAlias: ['cardBlock', 'featureCard', 'testimonialCard'],
forBlockEditor: 'block-grid',
};
// Omit forContentTypeAlias to apply to all blocks
const manifest: ManifestBlockEditorCustomView = {
type: 'blockEditorCustomView',
alias: 'My.BlockView.Universal',
name: 'Universal Block View',
element: () => import('./universal-view.element.js'),
forBlockEditor: 'block-list', // Only specify editor type
};
@customElement('my-styled-block-view')
export class MyStyledBlockViewElement extends UmbLitElement implements UmbBlockEditorCustomViewElement {
@property({ attribute: false })
content?: UmbBlockDataType;
@property({ attribute: false })
settings?: UmbBlockDataType;
render() {
// Settings contain block configuration (colors, layout options, etc.)
const bgColor = this.settings?.backgroundColor ?? '#ffffff';
const padding = this.settings?.padding ?? 'medium';
return html`
<div style="background-color: ${bgColor}" class="padding-${padding}">
<h3>${this.content?.title}</h3>
<div>${this.content?.text}</div>
</div>
`;
}
}
| Property | Description |
|---|---|
forContentTypeAlias | Content type alias(es) this view applies to |
forBlockEditor | Editor type(s): block-list, block-grid, block-rte |
| Property | Type | Description |
|---|---|---|
content | UmbBlockDataType | The block's content data |
settings | UmbBlockDataType | The block's settings data |
That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.
Weekly Installs
69
Repository
GitHub Stars
14
First Seen
Feb 4, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot50
cursor23
opencode21
codex21
gemini-cli19
amp19
前端开发AI工具 | 5大专业能力构建生产级前端页面 | 设计工程与动效系统
759 周安装