diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/local-components.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/local-components.ts
index 2e9d905a1a1e..eaaec9e3f27b 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/local-components.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-grid/local-components.ts
@@ -1,4 +1,3 @@
-import '@umbraco-cms/backoffice/property-sort-mode';
import './components/block-grid-areas-container/block-grid-areas-container.element.js';
import './components/block-grid-block-inline/block-grid-block-inline.element.js';
import './components/block-grid-block-unsupported/block-grid-block-unsupported.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
index 658f5b25f9ce..0e921026a768 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/block-list-entry/block-list-entry.element.ts
@@ -5,7 +5,7 @@ import {
UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
} from '../../constants.js';
-import { css, customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
import { stringOrStringArrayContains } from '@umbraco-cms/backoffice/utils';
import { UmbDataPathBlockElementDataQuery } from '@umbraco-cms/backoffice/block';
@@ -96,6 +96,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
@state()
private _inlineEditingMode?: boolean;
+ @state()
+ private _isSortMode?: boolean;
+
// 'content-invalid' attribute is used for styling purpose.
@property({ type: Boolean, attribute: 'content-invalid', reflect: true })
private _contentInvalid?: boolean;
@@ -122,6 +125,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
super();
this.#init();
}
+
#init() {
this.observe(
this.#context.showContentEdit,
@@ -188,13 +192,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
},
null,
);
- this.observe(
- this.#context.inlineEditingMode,
- (mode) => {
- this._inlineEditingMode = mode;
- },
- null,
- );
+ this.observe(this.#context.inlineEditingMode, (mode) => (this._inlineEditingMode = mode), null);
+ this.observe(this.#context.isSortMode, (isSortMode) => (this._isSortMode = isSortMode), null);
+
// Data props:
this.observe(
this.#context.layout,
@@ -370,15 +370,19 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
};
#renderRefBlock() {
- return html``;
+ return html`
+
+
+ `;
}
#renderInlineBlock() {
@@ -412,33 +416,42 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper
};
#renderBlock() {
- return this.contentKey && (this._contentTypeAlias || this._unsupported)
- ? html`
-
-
- ${this.#renderActionBar()}
- ${!this._showContentEdit && this._contentInvalid
- ? html`!`
- : nothing}
-
- `
- : nothing;
+ return when(
+ this.contentKey && (this._contentTypeAlias || this._unsupported),
+ () => html`
+
+ ${when(
+ this._isSortMode,
+ () => this.#renderRefBlock(),
+ () => html`
+
+
+ `,
+ )}
+ ${this.#renderActionBar()}
+ ${!this._showContentEdit && this._contentInvalid
+ ? html`!`
+ : nothing}
+
+ `,
+ );
}
#renderActionBar() {
- return this._showActions
- ? html`
- ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
- ${this.#renderDeleteAction()}
- `
- : nothing;
+ if (this._isSortMode) return nothing;
+ if (!this._showActions) return nothing;
+ return html`
+
+ ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()}
+ ${this.#renderDeleteAction()}
+
+ `;
}
#renderEditContentAction() {
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
index 433fd2da18cc..f97045aa6bd3 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/components/ref-list-block/ref-list-block.element.ts
@@ -40,10 +40,11 @@ export class UmbRefListBlockElement extends UmbLitElement {
${when(
this.unpublished,
- () =>
- html``,
+ () => html`
+
+
+
+ `,
)}
`;
@@ -54,6 +55,7 @@ export class UmbRefListBlockElement extends UmbLitElement {
uui-ref-node {
min-height: var(--uui-size-16);
}
+
uui-tag {
margin-left: 0.5em;
margin-bottom: -0.3em;
@@ -69,6 +71,22 @@ export class UmbRefListBlockElement extends UmbLitElement {
:host([unpublished]) umb-ufm-render {
opacity: 0.6;
}
+
+ @keyframes umb-icon-jiggle {
+ 0%,
+ 100% {
+ transform: rotate(6deg);
+ }
+ 50% {
+ transform: rotate(-6deg);
+ }
+ }
+
+ :host(.sortable) {
+ umb-icon {
+ animation: umb-icon-jiggle 500ms infinite ease-in-out;
+ }
+ }
`,
];
}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entry.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entry.context.ts
index afc6867b330e..9d218426788a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entry.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-entry.context.ts
@@ -22,18 +22,27 @@ export class UmbBlockListEntryContext extends UmbBlockEntryContext<
},
);
+ #isSortMode = new UmbBooleanState(undefined);
+ readonly isSortMode = this.#isSortMode.asObservable();
+
constructor(host: UmbControllerHost) {
super(host, UMB_BLOCK_LIST_MANAGER_CONTEXT, UMB_BLOCK_LIST_ENTRIES_CONTEXT);
}
protected override _gotManager() {
+ if (!this._manager) return;
+
this.observe(
- this._manager?.inlineEditingMode,
- (inlineEditingMode) => {
- this.#inlineEditingMode.setValue(inlineEditingMode);
- },
+ this._manager.inlineEditingMode,
+ (inlineEditingMode) => this.#inlineEditingMode.setValue(inlineEditingMode),
'observeInlineEditingMode',
);
+
+ this.observe(
+ this._manager.isSortMode,
+ (isSortMode) => this.#isSortMode.setValue(isSortMode ?? false),
+ 'observeIsSortMode',
+ );
}
protected override _gotEntries() {}
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
index 6670faf5b914..f06f0b0dafa0 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/context/block-list-manager.context.ts
@@ -3,6 +3,8 @@ import type { UmbBlockListWorkspaceOriginData } from '../index.js';
import type { UmbBlockDataModel } from '../../block/types.js';
import { UmbBooleanState } from '@umbraco-cms/backoffice/observable-api';
import { UmbBlockManagerContext } from '@umbraco-cms/backoffice/block';
+import { UMB_PROPERTY_SORT_MODE_CONTEXT } from '@umbraco-cms/backoffice/property-sort-mode';
+import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
/**
* A implementation of the Block Manager specifically for the Block List Editor.
@@ -21,6 +23,28 @@ export class UmbBlockListManagerContext<
return this.#inlineEditingMode.getValue();
}
+ #sortModeContext?: typeof UMB_PROPERTY_SORT_MODE_CONTEXT.TYPE;
+ #isSortMode = new UmbBooleanState(undefined);
+ readonly isSortMode = this.#isSortMode.asObservable();
+
+ setIsSortMode(isSortMode: boolean) {
+ this.#sortModeContext?.setIsSortMode(isSortMode);
+ }
+ getIsSortMode(): boolean | undefined {
+ return this.#sortModeContext?.getIsSortMode();
+ }
+
+ constructor(host: UmbControllerHost) {
+ super(host);
+
+ this.consumeContext(UMB_PROPERTY_SORT_MODE_CONTEXT, (sortPropertyContext) => {
+ this.#sortModeContext = sortPropertyContext;
+ this.observe(this.#sortModeContext?.isSortMode, (isSortMode) => {
+ this.#isSortMode.setValue(isSortMode);
+ });
+ });
+ }
+
/**
* @param contentElementTypeKey
* @param partialLayoutEntry
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
index a4b475556f33..68cc013d0b9a 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/manifests.ts
@@ -1,14 +1,14 @@
import { manifests as clipboardManifests } from './clipboard/manifests.js';
-import { manifests as propertValueClonerManifests } from './property-value-cloner/manifests.js';
import { manifests as propertyEditorManifests } from './property-editors/manifests.js';
+import { manifests as propertyValueClonerManifests } from './property-value-cloner/manifests.js';
import { manifests as validationManifests } from './validation/manifests.js';
import { manifests as workspaceManifests } from './workspace/manifests.js';
import type { UmbExtensionManifestKind } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array = [
...clipboardManifests,
- ...propertValueClonerManifests,
...propertyEditorManifests,
+ ...propertyValueClonerManifests,
...validationManifests,
...workspaceManifests,
];
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts
index 45a4782f1a88..0fcff0940f6e 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/Umbraco.BlockList.ts
@@ -1,11 +1,12 @@
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/property-editor';
export const manifest: ManifestPropertyEditorSchema = {
type: 'propertyEditorSchema',
name: 'Block List',
- alias: 'Umbraco.BlockList',
+ alias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
meta: {
- defaultPropertyEditorUiAlias: 'Umb.PropertyEditorUi.BlockList',
+ defaultPropertyEditorUiAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
settings: {
properties: [
{
diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
index abb35b5c9fe1..a381ea980023 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-list/property-editors/block-list-editor/manifests.ts
@@ -1,57 +1,85 @@
-import { manifest as blockListSchemaManifest } from './Umbraco.BlockList.js';
-import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
+import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS, UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS } from './constants.js';
+import { manifest as propertyEditorSchema } from './Umbraco.BlockList.js';
import { UmbStandardBlockValueResolver } from '@umbraco-cms/backoffice/block';
+import { UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/property';
-export const manifests: Array = [
- {
- type: 'propertyEditorUi',
- alias: 'Umb.PropertyEditorUi.BlockList',
- name: 'Block List Property Editor UI',
- element: () => import('./property-editor-ui-block-list.element.js'),
- meta: {
- label: 'Block List',
- propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
- icon: 'icon-thumbnail-list',
- group: 'richContent',
- supportsReadOnly: true,
- settings: {
- properties: [
- {
- alias: 'useSingleBlockMode',
- label: 'Single block mode',
- description:
- 'When in Single block mode, the output will be BlockListItem<>, instead of BlockListModel.\n\n**NOTE:**\nSingle block mode requires a maximum of one available block, and an amount set to minimum 1 and maximum 1 blocks.',
- propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
- },
- {
- alias: 'useLiveEditing',
- label: 'Live editing mode',
- description:
- 'Live editing in editor overlays for live updated custom views or labels using custom expression.',
- propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
- },
- {
- alias: 'useInlineEditingAsDefault',
- label: 'Inline editing mode',
- description: 'Use the inline editor as the default block view.',
- propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
- },
- {
- alias: 'maxPropertyWidth',
- label: 'Property editor width',
- description: 'Optional CSS override, example: 800px or 100%',
- propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
- },
- ],
- },
+const propertyEditorUi: UmbExtensionManifest = {
+ type: 'propertyEditorUi',
+ alias: UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS,
+ name: 'Block List Property Editor UI',
+ element: () => import('./property-editor-ui-block-list.element.js'),
+ meta: {
+ label: 'Block List',
+ propertyEditorSchemaAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
+ icon: 'icon-thumbnail-list',
+ group: 'richContent',
+ supportsReadOnly: true,
+ settings: {
+ properties: [
+ {
+ alias: 'useSingleBlockMode',
+ label: 'Single block mode',
+ description:
+ 'When in Single block mode, the output will be BlockListItem<>, instead of BlockListModel.\n\n**NOTE:**\nSingle block mode requires a maximum of one available block, and an amount set to minimum 1 and maximum 1 blocks.',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ {
+ alias: 'useLiveEditing',
+ label: 'Live editing mode',
+ description:
+ 'Live editing in editor overlays for live updated custom views or labels using custom expression.',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ {
+ alias: 'useInlineEditingAsDefault',
+ label: 'Inline editing mode',
+ description: 'Use the inline editor as the default block view.',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.Toggle',
+ },
+ {
+ alias: 'maxPropertyWidth',
+ label: 'Property editor width',
+ description: 'Optional CSS override, example: 800px or 100%',
+ propertyEditorUiAlias: 'Umb.PropertyEditorUi.TextBox',
+ },
+ ],
},
},
- {
- type: 'propertyValueResolver',
- alias: 'Umb.PropertyValueResolver.BlockList',
- name: 'Block Value Resolver',
- api: UmbStandardBlockValueResolver,
- forEditorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
- },
- blockListSchemaManifest,
+};
+
+const propertyValueResolver: UmbExtensionManifest = {
+ type: 'propertyValueResolver',
+ alias: 'Umb.PropertyValueResolver.BlockList',
+ name: 'Block List Value Resolver',
+ api: UmbStandardBlockValueResolver,
+ forEditorAlias: UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS,
+};
+
+const sortModePropertyContext: UmbExtensionManifest = {
+ type: 'propertyContext',
+ kind: 'sortMode',
+ alias: 'Umb.PropertyContext.BlockList.SortMode',
+ name: 'Block List Sort Mode Property Context',
+ forPropertyEditorUis: [UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS],
+};
+
+const sortModePropertyAction: UmbExtensionManifest = {
+ type: 'propertyAction',
+ kind: 'sortMode',
+ alias: 'Umb.PropertyAction.BlockList.SortMode',
+ name: 'Block List Sort Mode Property Action',
+ forPropertyEditorUis: [UMB_BLOCK_LIST_PROPERTY_EDITOR_UI_ALIAS],
+ conditions: [
+ {
+ alias: UMB_PROPERTY_HAS_VALUE_CONDITION_ALIAS,
+ },
+ ],
+};
+
+export const manifests: Array = [
+ propertyEditorSchema,
+ propertyEditorUi,
+ propertyValueResolver,
+ sortModePropertyContext,
+ sortModePropertyAction,
];
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 ca74c65beb72..aebc8c021bd7 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
@@ -3,31 +3,30 @@ import { UmbBlockListEntriesContext } from '../../context/block-list-entries.con
import type { UmbBlockListLayoutModel, UmbBlockListValueModel } from '../../types.js';
import type { UmbBlockListEntryElement } from '../../components/block-list-entry/index.js';
import { UMB_BLOCK_LIST_PROPERTY_EDITOR_SCHEMA_ALIAS } from './constants.js';
-import { UmbLitElement, umbDestroyOnDisconnect } from '@umbraco-cms/backoffice/lit-element';
-import { html, customElement, property, state, repeat, css, nothing } from '@umbraco-cms/backoffice/external/lit';
-import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
-import type {
- UmbPropertyEditorConfigCollection,
- UmbPropertyEditorUiElement,
-} from '@umbraco-cms/backoffice/property-editor';
-import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
-import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
-import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
-import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
-import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
-import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
-
-import '../../components/block-list-entry/index.js';
-import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import { debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
import {
extractJsonQueryProps,
- UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
UmbFormControlMixin,
UmbValidationContext,
+ UMB_VALIDATION_EMPTY_LOCALIZATION_KEY,
} from '@umbraco-cms/backoffice/validation';
import { jsonStringComparison, observeMultiple } from '@umbraco-cms/backoffice/observable-api';
-import { debounceTime } from '@umbraco-cms/backoffice/external/rxjs';
+import { umbDestroyOnDisconnect, UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
+import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
+import { UMB_PROPERTY_CONTEXT, UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UMB_CONTENT_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/content';
+import type { UmbBlockLayoutBaseModel } from '@umbraco-cms/backoffice/block';
+import type { UmbBlockTypeBaseModel } from '@umbraco-cms/backoffice/block-type';
+import type { UmbModalRouteBuilder } from '@umbraco-cms/backoffice/router';
+import type { UmbNumberRangeValueType } from '@umbraco-cms/backoffice/models';
+import type {
+ UmbPropertyEditorConfigCollection,
+ UmbPropertyEditorUiElement,
+} from '@umbraco-cms/backoffice/property-editor';
+import type { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
+
+import '../../components/block-list-entry/index.js';
const SORTER_CONFIG: UmbSorterConfig = {
getUniqueOfElement: (element) => {
@@ -162,6 +161,9 @@ export class UmbPropertyEditorUIBlockListElement
@state()
private _notSupportedVariantSetting?: boolean;
+ @state()
+ private _isSortMode = false;
+
constructor() {
super();
@@ -250,6 +252,8 @@ export class UmbPropertyEditorUIBlockListElement
this.#managerContext.setVariantId(context?.getVariantId());
});
+ this.observe(this.#managerContext.isSortMode, (isSortMode) => (this._isSortMode = isSortMode ?? false));
+
this.addValidator(
'rangeUnderflow',
() =>
@@ -372,10 +376,9 @@ export class UmbPropertyEditorUIBlockListElement
}
override render() {
- if (this._notSupportedVariantSetting) {
- return nothing;
- }
+ if (this._notSupportedVariantSetting) return nothing;
return html`
+ ${this.#renderSortModeToolbar()}
${repeat(
this._layouts,
(layout, index) => `${index}_${layout.contentKey}`,
@@ -400,9 +403,12 @@ export class UmbPropertyEditorUIBlockListElement
#renderInlineCreateButton(index: number) {
if (this.readonly) return nothing;
- return html``;
+ return html`
+
+
+ `;
}
#renderCreateButton() {
@@ -435,9 +441,12 @@ export class UmbPropertyEditorUIBlockListElement
`;
}
- static override readonly styles = [
- UmbTextStyles,
+ #renderSortModeToolbar() {
+ if (!this._isSortMode) return nothing;
+ return html``;
+ }
+ static override readonly styles = [
css`
:host {
display: grid;
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
index a4ee26214f26..a2e86028438f 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/entry-point.ts
@@ -15,6 +15,7 @@ import './extension-registry/components/index.js';
import './menu/components/index.js';
import './property-action/components/index.js';
import './property-editor-data-source/global-components.js';
+import './property-sort-mode/global-components/index.js';
export const onInit: UmbEntryPointOnInit = (host, extensionRegistry) => {
new UmbExtensionsApiInitializer(host, extensionRegistry, 'globalContext', [host]);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/components/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/global-components/index.ts
similarity index 52%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/components/index.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/global-components/index.ts
index 37ec27f494d4..689a47f48968 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/global-components/index.ts
@@ -1 +1,3 @@
+import './property-sort-mode-toolbar.element.js';
+
export * from './property-sort-mode-toolbar.element.js';
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/components/property-sort-mode-toolbar.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/global-components/property-sort-mode-toolbar.element.ts
similarity index 100%
rename from src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/components/property-sort-mode-toolbar.element.ts
rename to src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/global-components/property-sort-mode-toolbar.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/index.ts b/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/index.ts
index 1b312928b50c..65157ca25223 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/property-sort-mode/index.ts
@@ -1,5 +1,5 @@
export * from './constants.js';
-export * from './components/index.js';
+export * from './global-components/index.js';
export * from './property-action/index.js';
export * from './property-context/index.js';