diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts index 0e86d455e8..76be03cd46 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts @@ -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 = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render. + _blockViewProps: UmbBlockEditorCustomViewProperties = { contentUdi: undefined!, urls: {} }; // Set to undefined cause it will be set before we render. - #updateBlockViewProps(incoming: Partial>) { + #updateBlockViewProps(incoming: Partial>) { 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``; } + #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`${this._inlineEditingMode ? this.#renderInlineEditBlock() : this.#renderRefBlock()} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts index 433d8e28f7..a6e7722374 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block/types.ts @@ -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 { layout: { [key: string]: Array | undefined }; contentData: Array; settingsData: Array; } - -export interface UmbBlockViewUrlsPropType { - editContent?: string; - editSettings?: string; -} - -export interface UmbBlockViewPropsType { - label?: string; - icon?: string; - contentUdi: string; - layout?: BlockLayoutType; - content?: UmbBlockDataType; - settings?: UmbBlockDataType; - urls: UmbBlockViewUrlsPropType; -} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/custom-view.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/custom-view.element.ts new file mode 100644 index 0000000000..1217a95f4d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/custom-view.element.ts @@ -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}; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/manifest.ts b/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/manifest.ts new file mode 100644 index 0000000000..44e6dfbe54 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/custom-view/manifest.ts @@ -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; +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts index 80e1e2bf86..6655135552 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/manifests.ts @@ -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 = [ + manifest, ...blockManifests, ...blockTypeManifests, ...blockListManifests, diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/block-editor-custom-view-element.interface.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/block-editor-custom-view-element.interface.ts new file mode 100644 index 0000000000..cf4f0b8d4b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/block-editor-custom-view-element.interface.ts @@ -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 { + manifest?: ManifestBlockEditorCustomView; + config?: UmbBlockEditorCustomViewConfiguration; + urls?: UmbBlockViewUrlsPropType; + contentUdi?: string; + label?: string; + icon?: string; + index?: number; + layout?: LayoutType; + content?: UmbBlockDataType; + settings?: UmbBlockDataType; +} + +export interface UmbBlockEditorCustomViewElement extends UmbBlockEditorCustomViewProperties, HTMLElement { + +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts index 1721b7dfec..7585b5001b 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/interfaces/index.ts @@ -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'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts index 002d6f0ecf..7ceea8278f 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/block-editor-custom-view.model.ts @@ -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 { +export interface ManifestBlockEditorCustomView extends ManifestElement { type: 'blockEditorCustomView'; + forContentTypeAlias?: Array; + forBlockType?: Array; } diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts index a24470e952..54685e8106 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/extension-registry/models/entity-action.model.ts @@ -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'; /**