Skip to content

Commit 11e2614

Browse files
nielslyngsoenielslyngsoe
committed
unsupported block list
1 parent 1f49493 commit 11e2614

File tree

7 files changed

+209
-13
lines changed

7 files changed

+209
-13
lines changed

‎src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-block-unsupported/block-grid-block-unsupported.element.ts

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,6 @@ import '../ref-grid-block/index.js';
1010

1111
@customElement('umb-block-grid-block-unsupported')
1212
export class UmbBlockGridBlockUnsupportedElement extends UmbLitElement {
13-
@property({ attribute: false })
14-
config?: UmbBlockEditorCustomViewConfiguration;
15-
16-
@property({ attribute: false })
17-
content?: UmbBlockDataType;
18-
1913
override render() {
2014
return html`
2115
<div id="host">

‎src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -467,7 +467,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
467467
return this.#renderUnsupportedBlock();
468468
}
469469
if (this._inlineEditingMode) {
470-
return this.#renderInlineEditBlock();
470+
return this.renderInlineBlock();
471471
}
472472
return this.#renderRefBlock();
473473
}
@@ -481,7 +481,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
481481
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
482482
}
483483

484-
#renderInlineEditBlock() {
484+
renderInlineBlock() {
485485
return html`<umb-block-grid-block-inline
486486
class="umb-block-grid__block--view"
487487
.label=${this._label}

‎src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ import {
88
import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
99
import { html, css, customElement, property, state, nothing } from '@umbraco-cms/backoffice/external/lit';
1010
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
11-
import '../ref-list-block/index.js';
12-
import '../inline-list-block/index.js';
1311
import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
1412
import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
1513
import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
@@ -22,6 +20,9 @@ import { UUIBlinkAnimationValue } from '@umbraco-cms/backoffice/external/uui';
2220
import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
2321
import { UMB_CLIPBOARD_PROPERTY_CONTEXT } from '@umbraco-cms/backoffice/clipboard';
2422

23+
import '../ref-list-block/index.js';
24+
import '../inline-list-block/index.js';
25+
import '../unsupported-list-block/index.js';
2526
/**
2627
* @element umb-block-list-entry
2728
*/
@@ -79,6 +80,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
7980
@state()
8081
_exposed?: boolean;
8182

83+
@state()
84+
_unsupported?: boolean;
85+
8286
@state()
8387
_workspaceEditContentPath?: string;
8488

@@ -161,6 +165,16 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
161165
},
162166
null,
163167
);
168+
this.observe(
169+
this.#context.unsupported,
170+
(unsupported) => {
171+
if (unsupported === undefined) return;
172+
this.#updateBlockViewProps({ unsupported: unsupported });
173+
this._unsupported = unsupported;
174+
this.toggleAttribute('unsupported', unsupported);
175+
},
176+
null,
177+
);
164178
this.observe(
165179
this.#context.inlineEditingMode,
166180
(mode) => {
@@ -308,6 +322,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
308322
}
309323

310324
#extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
325+
if (this._unsupported) {
326+
// If the block is unsupported, we should not allow any custom views to render.
327+
return false;
328+
}
329+
311330
if (
312331
manifest.forContentTypeAlias &&
313332
!stringOrStringArrayContains(manifest.forContentTypeAlias, this._contentTypeAlias!)
@@ -355,8 +374,26 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
355374
${umbDestroyOnDisconnect()}></umb-inline-list-block>`;
356375
}
357376

377+
#renderUnsupportedBlock() {
378+
return html`<umb-unsupported-list-block
379+
.config=${this._blockViewProps.config}
380+
.content=${this._blockViewProps.content}
381+
.settings=${this._blockViewProps.settings}
382+
${umbDestroyOnDisconnect()}></umb-unsupported-list-block>`;
383+
}
384+
385+
#renderBuiltinBlockView() {
386+
if (this._unsupported) {
387+
return this.#renderUnsupportedBlock();
388+
}
389+
if (this._inlineEditingMode) {
390+
return this.#renderInlineBlock();
391+
}
392+
return this.#renderRefBlock();
393+
}
394+
358395
#renderBlock() {
359-
return this.contentKey && this._contentTypeAlias
396+
return this.contentKey
360397
? html`
361398
<div class="umb-block-list__block">
362399
<umb-extension-slot
@@ -366,7 +403,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
366403
.props=${this._blockViewProps}
367404
.filter=${this.#extensionSlotFilterMethod}
368405
single
369-
>${this._inlineEditingMode ? this.#renderInlineBlock() : this.#renderRefBlock()}</umb-extension-slot
406+
>${this.#renderBuiltinBlockView()}</umb-extension-slot
370407
>
371408
<uui-action-bar>
372409
${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()}

‎src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './unsupported-list-block.element.js';

‎src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/unsupported-list-block/unsupported-list-block.element.ts

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';
2+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
3+
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
4+
5+
/**
6+
* @element umb-unsupported-list-block
7+
*/
8+
@customElement('umb-unsupported-list-block')
9+
export class UmbUnsupportedListBlockElement extends UmbLitElement {
10+
override render() {
11+
return html`
12+
<div id="host">
13+
<div id="open-part">
14+
${this.#renderBlockInfo()}
15+
<slot></slot>
16+
<slot name="tag"></slot>
17+
</div>
18+
<div id="inside">${this.localize.term('blockEditor_unsupportedBlockDescription')}</div>
19+
</div>
20+
`;
21+
}
22+
23+
#renderBlockInfo() {
24+
return html`
25+
<span id="content">
26+
<span id="icon">
27+
<umb-icon name="icon-alert"></umb-icon>
28+
</span>
29+
<div id="info">
30+
<span id="name">${this.localize.term('blockEditor_unsupportedBlockName')}</span>
31+
</div>
32+
</span>
33+
`;
34+
}
35+
36+
static override styles = [
37+
UmbTextStyles,
38+
css`
39+
#host {
40+
position: relative;
41+
display: block;
42+
width: 100%;
43+
44+
box-sizing: border-box;
45+
border-radius: var(--uui-border-radius);
46+
background-color: var(--uui-color-surface);
47+
48+
border: 1px solid var(--uui-color-border);
49+
transition: border-color 80ms;
50+
51+
min-width: 250px;
52+
}
53+
54+
#open-part + * {
55+
border-top: 1px solid var(--uui-color-border);
56+
}
57+
:host([disabled]) #open-part {
58+
cursor: default;
59+
transition: border-color 80ms;
60+
}
61+
:host([disabled]) #host {
62+
border-color: var(--uui-color-disabled-standalone);
63+
}
64+
65+
:host([unpublished]) #open-part #content {
66+
opacity: 0.6;
67+
}
68+
69+
slot[name='tag'] {
70+
flex-grow: 1;
71+
72+
display: flex;
73+
justify-content: flex-end;
74+
align-items: center;
75+
}
76+
77+
button {
78+
font-size: inherit;
79+
font-family: inherit;
80+
border: 0;
81+
padding: 0;
82+
background-color: transparent;
83+
text-align: left;
84+
color: var(--uui-color-text);
85+
}
86+
87+
#content {
88+
align-self: stretch;
89+
line-height: normal;
90+
display: flex;
91+
position: relative;
92+
align-items: center;
93+
}
94+
95+
#open-part {
96+
color: inherit;
97+
text-decoration: none;
98+
99+
display: flex;
100+
text-align: left;
101+
align-items: center;
102+
justify-content: flex-start;
103+
width: 100%;
104+
border: none;
105+
background: none;
106+
107+
min-height: var(--uui-size-16);
108+
padding: calc(var(--uui-size-2) + 1px);
109+
}
110+
111+
#icon {
112+
font-size: 1.2em;
113+
margin-left: var(--uui-size-2);
114+
margin-right: var(--uui-size-1);
115+
}
116+
117+
#info {
118+
display: flex;
119+
flex-direction: column;
120+
align-items: start;
121+
justify-content: center;
122+
height: 100%;
123+
padding-left: var(--uui-size-2, 6px);
124+
}
125+
126+
#name {
127+
font-weight: 700;
128+
}
129+
130+
uui-tag {
131+
margin-left: 0.5em;
132+
margin-bottom: -0.3em;
133+
margin-top: -0.3em;
134+
vertical-align: text-top;
135+
}
136+
137+
:host([disabled]) #icon {
138+
color: var(--uui-color-disabled-contrast);
139+
}
140+
:host([disabled]) #name {
141+
color: var(--uui-color-disabled-contrast);
142+
}
143+
144+
#inside {
145+
position: relative;
146+
display: block;
147+
padding: calc(var(--uui-size-layout-1));
148+
}
149+
`,
150+
];
151+
}
152+
153+
export default UmbUnsupportedListBlockElement;
154+
155+
declare global {
156+
interface HTMLElementTagNameMap {
157+
'umb-unsupported-list-block': UmbUnsupportedListBlockElement;
158+
}
159+
}

‎src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/property-editor-ui-block-list.element.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockListLayoutModel, UmbBlockListEntryE
3535
},
3636
//identifier: 'block-list-editor',
3737
itemSelector: 'umb-block-list-entry',
38+
disabledItemSelector: '[unsupported]',
3839
//containerSelector: 'EMPTY ON PURPOSE, SO IT BECOMES THE HOST ELEMENT',
3940
};
4041

‎src/Umbraco.Web.UI.Client/src/packages/block/block/context/block-entry.context.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -517,7 +517,9 @@ export abstract class UmbBlockEntryContext<
517517
this.observe(
518518
this._manager.contentOf(this.#contentKey),
519519
(content) => {
520-
this.#unsupported.setValue(!content);
520+
if (this.#unsupported.getValue() !== true) {
521+
this.#unsupported.setValue(!content);
522+
}
521523
this.#content.setValue(content);
522524
},
523525
'observeContent',
@@ -602,6 +604,8 @@ export abstract class UmbBlockEntryContext<
602604
this.#contentStructure = this._manager.getStructure(contentTypeKey);
603605
this.#contentStructurePromiseResolve?.();
604606

607+
this.#unsupported.setValue(!this.#contentStructure);
608+
605609
this.observe(
606610
this.#contentStructure?.ownerContentType,
607611
(contentType) => {

0 commit comments

Comments
 (0)