diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts index 9b19318497..744930a7d2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts @@ -10,12 +10,6 @@ import '../ref-grid-block/index.js'; @customElement('umb-block-grid-block-unsupported') export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement { - @property({ attribute: false }) - config?: UmbBlockEditorCustomViewConfiguration; - - @property({ attribute: false }) - content?: UmbBlockDataType; - override render() { return html`
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 2bda4913cf..0650b59685 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 @@ -467,7 +467,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper return this.#renderUnsupportedBlock(); } if (this._inlineEditingMode) { - return this.#renderInlineEditBlock(); + return this.renderInlineBlock(); } return this.#renderRefBlock(); } @@ -481,7 +481,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper //TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root } - #renderInlineEditBlock() { + renderInlineBlock() { return html` { + if (unsupported === undefined) return; + this.#updateBlockViewProps({ unsupported: unsupported }); + this._unsupported = unsupported; + this.toggleAttribute('unsupported', unsupported); + }, + null, + ); this.observe( this.#context.inlineEditingMode, (mode) => { @@ -308,6 +322,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper } #extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => { + if (this._unsupported) { + // If the block is unsupported, we should not allow any custom views to render. + return false; + } + if ( manifest.forContentTypeAlias && !stringOrStringArrayContains(manifest.forContentTypeAlias, this._contentTypeAlias!) @@ -355,8 +374,26 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper ${umbDestroyOnDisconnect()}>`; } + #renderUnsupportedBlock() { + return html``; + } + + #renderBuiltinBlockView() { + if (this._unsupported) { + return this.#renderUnsupportedBlock(); + } + if (this._inlineEditingMode) { + return this.#renderInlineBlock(); + } + return this.#renderRefBlock(); + } + #renderBlock() { - return this.contentKey && this._contentTypeAlias + return this.contentKey ? html`
${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}${this.#renderBuiltinBlockView()} ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/index.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/index.ts new file mode 100644 index 0000000000..b466898b6e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/index.ts @@ -0,0 +1 @@ +export * from './unsupported-list-block.element.js'; diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/unsupported-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/unsupported-list-block.element.ts new file mode 100644 index 0000000000..7b71b1e435 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/unsupported-list-block.element.ts @@ -0,0 +1,159 @@ +import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit'; +import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; + +/** + * @element umb-unsupported-list-block + */ +@customElement('umb-unsupported-list-block') +export class UmbUnsupportedListBlockElement extends UmbLitElement { + override render() { + return html` +
+
+ ${this.#renderBlockInfo()} + + +
+
${this.localize.term('blockEditor_unsupportedBlockDescription')}
+
+ `; + } + + #renderBlockInfo() { + return html` + + + + +
+ ${this.localize.term('blockEditor_unsupportedBlockName')} +
+ + `; + } + + static override styles = [ + UmbTextStyles, + css` + #host { + position: relative; + display: block; + width: 100%; + + box-sizing: border-box; + border-radius: var(--uui-border-radius); + background-color: var(--uui-color-surface); + + border: 1px solid var(--uui-color-border); + transition: border-color 80ms; + + min-width: 250px; + } + + #open-part + * { + border-top: 1px solid var(--uui-color-border); + } + :host([disabled]) #open-part { + cursor: default; + transition: border-color 80ms; + } + :host([disabled]) #host { + border-color: var(--uui-color-disabled-standalone); + } + + :host([unpublished]) #open-part #content { + opacity: 0.6; + } + + slot[name='tag'] { + flex-grow: 1; + + display: flex; + justify-content: flex-end; + align-items: center; + } + + button { + font-size: inherit; + font-family: inherit; + border: 0; + padding: 0; + background-color: transparent; + text-align: left; + color: var(--uui-color-text); + } + + #content { + align-self: stretch; + line-height: normal; + display: flex; + position: relative; + align-items: center; + } + + #open-part { + color: inherit; + text-decoration: none; + + display: flex; + text-align: left; + align-items: center; + justify-content: flex-start; + width: 100%; + border: none; + background: none; + + min-height: var(--uui-size-16); + padding: calc(var(--uui-size-2) + 1px); + } + + #icon { + font-size: 1.2em; + margin-left: var(--uui-size-2); + margin-right: var(--uui-size-1); + } + + #info { + display: flex; + flex-direction: column; + align-items: start; + justify-content: center; + height: 100%; + padding-left: var(--uui-size-2, 6px); + } + + #name { + font-weight: 700; + } + + uui-tag { + margin-left: 0.5em; + margin-bottom: -0.3em; + margin-top: -0.3em; + vertical-align: text-top; + } + + :host([disabled]) #icon { + color: var(--uui-color-disabled-contrast); + } + :host([disabled]) #name { + color: var(--uui-color-disabled-contrast); + } + + #inside { + position: relative; + display: block; + padding: calc(var(--uui-size-layout-1)); + } + `, + ]; +} + +export default UmbUnsupportedListBlockElement; + +declare global { + interface HTMLElementTagNameMap { + 'umb-unsupported-list-block': UmbUnsupportedListBlockElement; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts index 559e8230af..cb99a31c69 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts @@ -35,6 +35,7 @@ const SORTER_CONFIG: UmbSorterConfig { - this.#unsupported.setValue(!content); + if (this.#unsupported.getValue() !== true) { + this.#unsupported.setValue(!content); + } this.#content.setValue(content); }, 'observeContent', @@ -602,6 +604,8 @@ export abstract class UmbBlockEntryContext< this.#contentStructure = this._manager.getStructure(contentTypeKey); this.#contentStructurePromiseResolve?.(); + this.#unsupported.setValue(!this.#contentStructure); + this.observe( this.#contentStructure?.ownerContentType, (contentType) => {