Skip to content

Commit e00dcef

Browse files
leekelleherleekelleher
authored
UFM: Make Block Settings data available (#19686)
* Adds support to UFM for Block settings data Fixes #17619 * Code/markup tidy-up makes use of Lit's `when` directive to simplify the conditional.
1 parent 1f84fe4 commit e00dcef

File tree

5 files changed

+77
-58
lines changed

5 files changed

+77
-58
lines changed

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

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
import { UMB_BLOCK_GRID_ENTRY_CONTEXT } from '../block-grid-entry/constants.js';
22
import type { UmbBlockGridWorkspaceOriginData } from '../../workspace/block-grid-workspace.modal-token.js';
33
import { UMB_BLOCK_GRID_ENTRIES_CONTEXT } from '../block-grid-entries/constants.js';
4-
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
5-
import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
6-
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
7-
import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
8-
import {
9-
type UMB_BLOCK_WORKSPACE_CONTEXT,
10-
UMB_BLOCK_WORKSPACE_ALIAS,
11-
type UmbBlockDataType,
12-
} from '@umbraco-cms/backoffice/block';
4+
import { css, customElement, html, property, state, when } from '@umbraco-cms/backoffice/external/lit';
135
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
14-
import {
15-
UmbExtensionApiInitializer,
16-
UmbExtensionsApiInitializer,
17-
type UmbApiConstructorArgumentsMethodType,
18-
} from '@umbraco-cms/backoffice/extension-api';
6+
import { UmbDataPathPropertyValueQuery } from '@umbraco-cms/backoffice/validation';
7+
import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
198
import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
9+
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
2010
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
21-
import { UmbDataPathPropertyValueQuery } from '@umbraco-cms/backoffice/validation';
11+
import { UMB_BLOCK_WORKSPACE_ALIAS } from '@umbraco-cms/backoffice/block';
12+
import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
13+
import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
14+
import type { UmbPropertyTypeModel } from '@umbraco-cms/backoffice/content-type';
2215
import type { UmbVariantId } from '@umbraco-cms/backoffice/variant';
16+
import type { UMB_BLOCK_WORKSPACE_CONTEXT, UmbBlockDataType } from '@umbraco-cms/backoffice/block';
2317

2418
const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
2519
return [{ manifest }];
@@ -50,6 +44,9 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
5044
@property({ attribute: false })
5145
content?: UmbBlockDataType;
5246

47+
@property({ attribute: false })
48+
settings?: UmbBlockDataType;
49+
5350
@state()
5451
_inlineProperty?: UmbPropertyTypeModel;
5552

@@ -176,20 +173,23 @@ export class UmbBlockGridBlockInlineElement extends UmbLitElement {
176173
}
177174

178175
#renderBlockInfo() {
176+
const blockValue = { ...this.content, $settings: this.settings };
179177
return html`
180178
<span id="content">
181179
<span id="icon">
182180
<umb-icon .name=${this.icon}></umb-icon>
183181
</span>
184182
<div id="info">
185-
<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
183+
<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
186184
</div>
187185
</span>
188-
${this.unpublished
189-
? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
186+
${when(
187+
this.unpublished,
188+
() =>
189+
html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
190190
><umb-localize key="blockEditor_notExposedLabel"></umb-localize
191-
></uui-tag>`
192-
: nothing}
191+
></uui-tag>`,
192+
)}
193193
`;
194194
}
195195

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

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
2-
import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
2+
import { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
33
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
44
import type { UmbBlockEditorCustomViewConfiguration } from '@umbraco-cms/backoffice/block-custom-view';
55

@@ -23,19 +23,27 @@ export class UmbBlockGridBlockElement extends UmbLitElement {
2323
@property({ attribute: false })
2424
content?: UmbBlockDataType;
2525

26+
@property({ attribute: false })
27+
settings?: UmbBlockDataType;
28+
2629
override render() {
27-
return html`<umb-ref-grid-block
28-
standalone
29-
href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
30-
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
31-
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
32-
${this.unpublished
33-
? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
34-
><umb-localize key="blockEditor_notExposedLabel"></umb-localize
35-
></uui-tag>`
36-
: nothing}
37-
<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
38-
</umb-ref-grid-block>`;
30+
const blockValue = { ...this.content, $settings: this.settings };
31+
return html`
32+
<umb-ref-grid-block
33+
standalone
34+
href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
35+
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
36+
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
37+
${when(
38+
this.unpublished,
39+
() =>
40+
html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
41+
><umb-localize key="blockEditor_notExposedLabel"></umb-localize
42+
></uui-tag>`,
43+
)}
44+
<umb-block-grid-areas-container slot="areas" draggable="false"></umb-block-grid-areas-container>
45+
</umb-ref-grid-block>
46+
`;
3947
}
4048

4149
static override styles = [

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import { UMB_BLOCK_LIST_ENTRY_CONTEXT } from '../../context/index.js';
2-
import {
3-
UMB_BLOCK_WORKSPACE_ALIAS,
4-
type UmbBlockDataType,
5-
type UMB_BLOCK_WORKSPACE_CONTEXT,
6-
} from '@umbraco-cms/backoffice/block';
7-
import {
8-
UmbExtensionApiInitializer,
9-
UmbExtensionsApiInitializer,
10-
type UmbApiConstructorArgumentsMethodType,
11-
} from '@umbraco-cms/backoffice/extension-api';
2+
import { UMB_BLOCK_WORKSPACE_ALIAS } from '@umbraco-cms/backoffice/block';
3+
import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
4+
import { UmbExtensionApiInitializer, UmbExtensionsApiInitializer } from '@umbraco-cms/backoffice/extension-api';
125
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
13-
import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
6+
import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
147
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
158
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
9+
import type { UmbApiConstructorArgumentsMethodType } from '@umbraco-cms/backoffice/extension-api';
10+
import type { UmbBlockDataType, UMB_BLOCK_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/block';
1611

1712
import '../../../block/workspace/views/edit/block-workspace-view-edit-content-no-router.element.js';
18-
import { UmbLanguageItemRepository } from '@umbraco-cms/backoffice/language';
1913

2014
const apiArgsCreator: UmbApiConstructorArgumentsMethodType<unknown> = (manifest: unknown) => {
2115
return [{ manifest }];
@@ -42,6 +36,9 @@ export class UmbInlineListBlockElement extends UmbLitElement {
4236
@property({ attribute: false })
4337
content?: UmbBlockDataType;
4438

39+
@property({ attribute: false })
40+
settings?: UmbBlockDataType;
41+
4542
@state()
4643
private _exposed?: boolean;
4744

@@ -156,20 +153,23 @@ export class UmbInlineListBlockElement extends UmbLitElement {
156153
}
157154

158155
#renderBlockInfo() {
156+
const blockValue = { ...this.content, $settings: this.settings };
159157
return html`
160158
<span id="content">
161159
<span id="icon">
162160
<umb-icon .name=${this.icon}></umb-icon>
163161
</span>
164162
<div id="info">
165-
<umb-ufm-render id="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
163+
<umb-ufm-render id="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
166164
</div>
167165
</span>
168-
${this.unpublished
169-
? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
166+
${when(
167+
this.unpublished,
168+
() =>
169+
html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
170170
><umb-localize key="blockEditor_notExposedLabel"></umb-localize
171-
></uui-tag>`
172-
: nothing}
171+
></uui-tag>`,
172+
)}
173173
`;
174174
}
175175

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

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
1+
import { css, customElement, html, property, when } from '@umbraco-cms/backoffice/external/lit';
22
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
33
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
44

@@ -20,19 +20,25 @@ export class UmbRefListBlockElement extends UmbLitElement {
2020
@property({ attribute: false })
2121
content?: UmbBlockDataType;
2222

23+
@property({ attribute: false })
24+
settings?: UmbBlockDataType;
25+
2326
@property({ attribute: false })
2427
config?: UmbBlockEditorCustomViewConfiguration;
2528

2629
override render() {
30+
const blockValue = { ...this.content, $settings: this.settings };
2731
return html`
2832
<uui-ref-node standalone href=${(this.config?.showContentEdit ? this.config?.editContentPath : undefined) ?? ''}>
2933
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
30-
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
31-
${this.unpublished
32-
? html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
34+
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
35+
${when(
36+
this.unpublished,
37+
() =>
38+
html`<uui-tag slot="name" look="secondary" title=${this.localize.term('blockEditor_notExposedDescription')}
3339
><umb-localize key="blockEditor_notExposedLabel"></umb-localize
34-
></uui-tag>`
35-
: nothing}
40+
></uui-tag>`,
41+
)}
3642
</uui-ref-node>
3743
`;
3844
}

‎src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/ref-rte-block/ref-rte-block.element.ts

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import { UMB_BLOCK_ENTRY_CONTEXT, type UmbBlockDataType } from '@umbraco-cms/backoffice/block';
21
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
32
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
3+
import { UMB_BLOCK_ENTRY_CONTEXT } from '@umbraco-cms/backoffice/block';
4+
import type { UmbBlockDataType } from '@umbraco-cms/backoffice/block';
45

56
/**
67
* @element umb-ref-rte-block
@@ -20,6 +21,9 @@ export class UmbRefRteBlockElement extends UmbLitElement {
2021
@property({ attribute: false })
2122
content?: UmbBlockDataType;
2223

24+
@property({ attribute: false })
25+
settings?: UmbBlockDataType;
26+
2327
@state()
2428
_workspaceEditPath?: string;
2529

@@ -38,10 +42,11 @@ export class UmbRefRteBlockElement extends UmbLitElement {
3842
}
3943

4044
override render() {
45+
const blockValue = { ...this.content, $settings: this.settings };
4146
return html`
4247
<uui-ref-node standalone href=${this._workspaceEditPath ?? '#'}>
4348
<umb-icon slot="icon" .name=${this.icon}></umb-icon>
44-
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${this.content}></umb-ufm-render>
49+
<umb-ufm-render slot="name" inline .markdown=${this.label} .value=${blockValue}></umb-ufm-render>
4550
</uui-ref-node>
4651
`;
4752
}

0 commit comments

Comments
 (0)