yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implementation of custom views for block editors

Browse Source
This commit is contained in:
Niels Lyngsø
2024-06-28 22:38:24 +02:00
parent 8177d89d47
commit 7c6ae78ad1
9 changed files with 99 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts
View File

@@ -1,9 +1,8 @@
import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
import type { PropertyValueMap } from '@umbraco-cms/backoffice/external/lit';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import type { UmbBlockViewPropsType } from '@umbraco-cms/backoffice/block';
import type { ManifestBlockEditorCustomView, UmbBlockEditorCustomViewProperties, UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbBlockGridEntryContext } from '../../context/block-grid-entry.context.js';
import type { UmbBlockGridLayoutModel } from '@umbraco-cms/backoffice/block-grid';
import '../block-grid-block-inline/index.js';
import '../block-grid-block/index.js';
@@ -40,6 +39,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
#context = new UmbBlockGridEntryContext(this);
#renderTimeout: number | undefined;
@state()
_contentTypeAlias?:string;
@state()
_columnSpan?: number;
@@ -84,9 +86,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
// TODO: use this type on the Element Interface for the Manifest.
@state()
_blockViewProps: UmbBlockViewPropsType<UmbBlockGridLayoutModel> = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
_blockViewProps: UmbBlockEditorCustomViewProperties<UmbBlockGridLayoutModel> = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render.
#updateBlockViewProps(incoming: Partial<UmbBlockViewPropsType<UmbBlockGridLayoutModel>>) {
#updateBlockViewProps(incoming: Partial<UmbBlockEditorCustomViewProperties<UmbBlockGridLayoutModel>>) {
this._blockViewProps = { ...this._blockViewProps, ...incoming };
this.requestUpdate('_blockViewProps');
}
@@ -176,6 +178,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
});
this.observe(this.#context.contentElementTypeAlias, (contentElementTypeAlias) => {
if (contentElementTypeAlias) {
this._contentTypeAlias = contentElementTypeAlias;
this.setAttribute('data-content-element-type-alias', contentElementTypeAlias);
}
});
@@ -235,8 +238,15 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
return html`<umb-block-grid-block .contentUdi=${this.contentUdi} .label=${this._label}></umb-block-grid-block>`;
}
#extensionSlotFilterMethod = (manifest:ManifestBlockEditorCustomView) => {
if(manifest.forContentTypeAlias?.indexOf(this._contentTypeAlias!) === -1) {
return false;
}
return true;
}
#renderBlock() {
return this.contentUdi
return this.contentUdi && this._contentTypeAlias
? html`
${this._createBeforePath && this._showInlineCreateBefore
? html`<uui-button-inline-create
@@ -251,6 +261,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
type="blockEditorCustomView"
default-element="umb-block-grid-block"
.props=${this._blockViewProps}
.filter=${this.#extensionSlotFilterMethod}
>${this._inlineEditingMode ? this.#renderInlineEditBlock() : this.#renderRefBlock()}</umb-extension-slot
>
<uui-action-bar>

27
src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts
View File

@@ -1,31 +1,8 @@
export interface UmbBlockLayoutBaseModel {
contentUdi: string;
settingsUdi?: string | null;
}
export interface UmbBlockDataType {
udi: string;
contentTypeKey: string;
[key: string]: unknown;
}
import type { UmbBlockDataType, UmbBlockLayoutBaseModel } from "@umbraco-cms/backoffice/extension-registry";
export type { UmbBlockViewUrlsPropType, UmbBlockDataType, UmbBlockLayoutBaseModel } from "@umbraco-cms/backoffice/extension-registry";
export interface UmbBlockValueType<BlockLayoutType extends UmbBlockLayoutBaseModel> {
layout: { [key: string]: Array<BlockLayoutType> | undefined };
contentData: Array<UmbBlockDataType>;
settingsData: Array<UmbBlockDataType>;
}
export interface UmbBlockViewUrlsPropType {
editContent?: string;
editSettings?: string;
}
export interface UmbBlockViewPropsType<BlockLayoutType extends UmbBlockLayoutBaseModel> {
label?: string;
icon?: string;
contentUdi: string;
layout?: BlockLayoutType;
content?: UmbBlockDataType;
settings?: UmbBlockDataType;
urls: UmbBlockViewUrlsPropType;
}

18
src/Umbraco.Web.UI.Client/src/packages/block/custom-view/custom-view.element.ts Normal file
View File

@@ -0,0 +1,18 @@
import type { UmbBlockDataType, UmbBlockEditorCustomViewElement } from "@umbraco-cms/backoffice/extension-registry";
import { customElement, html, property } from "@umbraco-cms/backoffice/external/lit";
import { UmbLitElement } from "@umbraco-cms/backoffice/lit-element";
@customElement('umb-custom-view-test')
export class UmbCustomViewTestElement extends UmbLitElement implements UmbBlockEditorCustomViewElement {
@property({attribute: false})
content?: UmbBlockDataType;
protected override render() {
return html`
Hello ${this.content?.headline}
`
}
}
export {UmbCustomViewTestElement as element};

10
src/Umbraco.Web.UI.Client/src/packages/block/custom-view/manifest.ts Normal file
View File

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

4
src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts
View File

@@ -1,11 +1,13 @@
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
import { manifests as blockManifests } from './block/manifests.js';
import { manifests as blockGridManifests } from './block-grid/manifests.js';
import { manifests as blockListManifests } from './block-list/manifests.js';
import { manifests as blockRteManifests } from './block-rte/manifests.js';
import { manifests as blockTypeManifests } from './block-type/manifests.js';
import type { ManifestTypes } from '@umbraco-cms/backoffice/extension-registry';
import { manifest } from './custom-view/manifest.js';
export const manifests: Array<ManifestTypes> = [
manifest,
...blockManifests,
...blockTypeManifests,
...blockListManifests,

43
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/block-editor-custom-view-element.interface.ts Normal file
View File

@@ -0,0 +1,43 @@
import type { ManifestBlockEditorCustomView } from "../index.js";
// Shared with the Property Editor
export interface UmbBlockLayoutBaseModel {
contentUdi: string;
settingsUdi?: string | null;
}
// Shared with the Property Editor
export interface UmbBlockDataType {
udi: string;
contentTypeKey: string;
[key: string]: unknown;
}
export interface UmbBlockEditorCustomViewConfiguration {
editContentPath: string;
editSettingsPath: string;
showEditBlock: boolean;
}
export interface UmbBlockViewUrlsPropType {
editContent?: string;
editSettings?: string;
}
export interface UmbBlockEditorCustomViewProperties<LayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel> {
manifest?: ManifestBlockEditorCustomView;
config?: UmbBlockEditorCustomViewConfiguration;
urls?: UmbBlockViewUrlsPropType;
contentUdi?: string;
label?: string;
icon?: string;
index?: number;
layout?: LayoutType;
content?: UmbBlockDataType;
settings?: UmbBlockDataType;
}
export interface UmbBlockEditorCustomViewElement<LayoutType extends UmbBlockLayoutBaseModel = UmbBlockLayoutBaseModel> extends UmbBlockEditorCustomViewProperties<LayoutType>, HTMLElement {
}

1
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts
View File

@@ -1,3 +1,4 @@
export * from './block-editor-custom-view-element.interface.js';
export * from './dashboard-element.interface.js';
export * from './external-login-provider-element.interface.js';
export * from './menu-item-element.interface.js';

6
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts
View File

@@ -1,6 +1,8 @@
import type { UmbPropertyEditorUiElement } from '../interfaces/index.js';
import type { ManifestElement } from '@umbraco-cms/backoffice/extension-api';
import type { UmbBlockEditorCustomViewElement } from '../interfaces/index.js';
export interface ManifestBlockEditorCustomView extends ManifestElement<UmbPropertyEditorUiElement> {
export interface ManifestBlockEditorCustomView extends ManifestElement<UmbBlockEditorCustomViewElement> {
type: 'blockEditorCustomView';
forContentTypeAlias?: Array<string>;
forBlockType?: Array<string>;
}

2
src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts
View File

@@ -1,6 +1,6 @@
import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
import type { ConditionTypes } from '../conditions/types.js';
import type { UmbEntityAction, UmbEntityActionElement } from '@umbraco-cms/backoffice/entity-action';
import type { ManifestElementAndApi, ManifestWithDynamicConditions } from '@umbraco-cms/backoffice/extension-api';
import type { UmbModalToken, UmbPickerModalData, UmbPickerModalValue } from '@umbraco-cms/backoffice/modal';
/**