Skip to content

Commit 1f49493

Browse files
nielslyngsoenielslyngsoe
committed
Block Grid unsupported block
1 parent c1f74f4 commit 1f49493

File tree

9 files changed

+250
-35
lines changed

9 files changed

+250
-35
lines changed

‎src/Umbraco.Web.UI.Client/src/assets/lang/da-dk.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2385,6 +2385,9 @@ export default {
23852385
labelInlineMode: 'Indsæt på linje med tekst',
23862386
notExposedLabel: 'ikke oprettet',
23872387
notExposedDescription: 'Denne Block er endnu ikke oprettet for denne variant',
2388+
unsupportedBlockName: 'Ugyldigt indhold',
2389+
unsupportedBlockDescription:
2390+
'Dette indhold er ikke længere understøttet. Hvis du mangler dette indhold bør du kontakte din administrator. Ellers bør du slette dette indhold.',
23882391
},
23892392
contentTemplatesDashboard: {
23902393
whatHeadline: 'Hvad er Indholdsskabeloner?',

‎src/Umbraco.Web.UI.Client/src/assets/lang/en-us.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2548,6 +2548,9 @@ export default {
25482548
labelInlineMode: 'Display inline with text',
25492549
notExposedLabel: 'Draft',
25502550
notExposedDescription: 'This Block is not yet created for this variant',
2551+
unsupportedBlockName: 'Unsupported',
2552+
unsupportedBlockDescription:
2553+
'This content is no longer supported in this Editor. If you are missing this content, please contact your administrator. Otherwise delete it.',
25512554
},
25522555
contentTemplatesDashboard: {
25532556
whatHeadline: 'What are Document Blueprints?',

‎src/Umbraco.Web.UI.Client/src/assets/lang/en.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2605,6 +2605,9 @@ export default {
26052605
labelInlineMode: 'Display inline with text',
26062606
notExposedLabel: 'Draft',
26072607
notExposedDescription: 'This Block is not yet created for this variant',
2608+
unsupportedBlockName: 'Unsupported',
2609+
unsupportedBlockDescription:
2610+
'This content is no longer supported in this Editor. If you are missing this content, please contact your administrator. Otherwise delete it.',
26082611
},
26092612
contentTemplatesDashboard: {
26102613
whatHeadline: 'What are Document Blueprints?',

‎src/Umbraco.Web.UI.Client/src/packages/block/block-custom-view/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export interface UmbBlockEditorCustomViewProperties<
2727
settings?: UmbBlockDataType;
2828
contentInvalid?: boolean;
2929
settingsInvalid?: boolean;
30+
unsupported?: boolean;
3031
unpublished?: boolean;
3132
}
3233

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

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

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

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

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@ const SORTER_CONFIG: UmbSorterConfig<UmbBlockGridLayoutModel, UmbBlockGridEntryE
116116
resolvePlacement: resolvePlacementAsBlockGrid,
117117
identifier: 'block-grid-editor',
118118
itemSelector: 'umb-block-grid-entry',
119+
disabledItemSelector: 'umb-block-grid-entry[unsupported]',
119120
containerSelector: '.umb-block-grid__layout-container',
120121
};
121122

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

Lines changed: 66 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/propert
88
import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
99

1010
import '../block-grid-block-inline/index.js';
11+
import '../block-grid-block-unsupported/index.js';
1112
import '../block-grid-block/index.js';
1213
import '../block-scale-handler/index.js';
1314
import { UmbObserveValidationStateController } from '@umbraco-cms/backoffice/validation';
@@ -18,6 +19,7 @@ import type {
1819
} from '@umbraco-cms/backoffice/block-custom-view';
1920
import { UUIBlinkAnimationValue, UUIBlinkKeyframes } from '@umbraco-cms/backoffice/external/uui';
2021
import type { UmbExtensionElementInitializer } from '@umbraco-cms/backoffice/extension-api';
22+
2123
/**
2224
* @element umb-block-grid-entry
2325
*/
@@ -91,6 +93,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
9193
@state()
9294
_exposed?: boolean;
9395

96+
@state()
97+
_unsupported?: boolean;
98+
9499
@state()
95100
_workspaceEditContentPath?: string;
96101

@@ -191,6 +196,17 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
191196
},
192197
null,
193198
);
199+
this.observe(
200+
this.#context.unsupported,
201+
(unsupported) => {
202+
if (unsupported === undefined) return;
203+
this.#updateBlockViewProps({ unsupported: unsupported });
204+
this._unsupported = unsupported;
205+
this.toggleAttribute('unsupported', unsupported);
206+
},
207+
null,
208+
);
209+
194210
this.observe(
195211
this.#context.inlineEditingMode,
196212
(mode) => {
@@ -233,18 +249,14 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
233249
this.observe(
234250
this.#context.createBeforePath,
235251
(createPath) => {
236-
//const oldValue = this._createBeforePath;
237252
this._createBeforePath = createPath;
238-
//this.requestUpdate('_createPath', oldValue);
239253
},
240254
null,
241255
);
242256
this.observe(
243257
this.#context.createAfterPath,
244258
(createPath) => {
245-
//const oldValue = this._createAfterPath;
246259
this._createAfterPath = createPath;
247-
//this.requestUpdate('_createPath', oldValue);
248260
},
249261
null,
250262
);
@@ -387,6 +399,10 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
387399
};
388400

389401
#extensionSlotFilterMethod = (manifest: ManifestBlockEditorCustomView) => {
402+
if (!this._contentTypeAlias) {
403+
// accept no extensions if we don't have a content type alias
404+
return false;
405+
}
390406
// We do have _contentTypeAlias at this stage, cause we do use the filter method in the extension slot which first gets rendered when we have the _contentTypeAlias. [NL]
391407
if (
392408
manifest.forContentTypeAlias &&
@@ -416,32 +432,8 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
416432
}
417433
};
418434

419-
#renderInlineEditBlock() {
420-
return html`<umb-block-grid-block-inline
421-
class="umb-block-grid__block--view"
422-
.label=${this._label}
423-
.icon=${this._icon}
424-
.unpublished=${!this._exposed}
425-
.config=${this._blockViewProps.config}
426-
.content=${this._blockViewProps.content}
427-
.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
428-
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
429-
}
430-
431-
#renderRefBlock() {
432-
return html`<umb-block-grid-block
433-
class="umb-block-grid__block--view"
434-
.label=${this._label}
435-
.icon=${this._icon}
436-
.unpublished=${!this._exposed}
437-
.config=${this._blockViewProps.config}
438-
.content=${this._blockViewProps.content}
439-
.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
440-
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
441-
}
442-
443-
#renderBlock() {
444-
return this.contentKey && this._contentTypeAlias
435+
override render() {
436+
return this.contentKey
445437
? html`
446438
${this.#renderCreateBeforeInlineButton()}
447439
<div class="umb-block-grid__block" part="umb-block-grid__block">
@@ -452,7 +444,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
452444
default-element=${this._inlineEditingMode ? 'umb-block-grid-block-inline' : 'umb-block-grid-block'}
453445
type="blockEditorCustomView"
454446
single
455-
>${this._inlineEditingMode ? this.#renderInlineEditBlock() : this.#renderRefBlock()}</umb-extension-slot
447+
>${this.#renderBuiltinBlockView()}</umb-extension-slot
456448
>
457449
${this.#renderActionBar()}
458450
${!this._showContentEdit && this._contentInvalid
@@ -470,6 +462,49 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
470462
: nothing;
471463
}
472464

465+
#renderBuiltinBlockView() {
466+
if (this._unsupported) {
467+
return this.#renderUnsupportedBlock();
468+
}
469+
if (this._inlineEditingMode) {
470+
return this.#renderInlineEditBlock();
471+
}
472+
return this.#renderRefBlock();
473+
}
474+
475+
#renderUnsupportedBlock() {
476+
return html`<umb-block-grid-block-unsupported
477+
class="umb-block-grid__block--view"
478+
.config=${this._blockViewProps.config}
479+
.content=${this._blockViewProps.content}
480+
.settings=${this._blockViewProps.settings}></umb-block-grid-block-unsupported>`;
481+
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
482+
}
483+
484+
#renderInlineEditBlock() {
485+
return html`<umb-block-grid-block-inline
486+
class="umb-block-grid__block--view"
487+
.label=${this._label}
488+
.icon=${this._icon}
489+
.unpublished=${!this._exposed}
490+
.config=${this._blockViewProps.config}
491+
.content=${this._blockViewProps.content}
492+
.settings=${this._blockViewProps.settings}></umb-block-grid-block-inline>`;
493+
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
494+
}
495+
496+
#renderRefBlock() {
497+
return html`<umb-block-grid-block
498+
class="umb-block-grid__block--view"
499+
.label=${this._label}
500+
.icon=${this._icon}
501+
.unpublished=${!this._exposed}
502+
.config=${this._blockViewProps.config}
503+
.content=${this._blockViewProps.content}
504+
.settings=${this._blockViewProps.settings}></umb-block-grid-block>`;
505+
//TODO: investigate if we should have ${umbDestroyOnDisconnect()} here. Note how it works for drag n' drop in grid between areas and areas-root
506+
}
507+
473508
#renderCreateBeforeInlineButton() {
474509
if (this._isReadOnly) return nothing;
475510
if (!this._createBeforePath) return nothing;
@@ -559,10 +594,6 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
559594
`;
560595
}
561596

562-
override render() {
563-
return this.#renderBlock();
564-
}
565-
566597
static override styles = [
567598
UUIBlinkKeyframes,
568599
css`

0 commit comments

Comments
 (0)