From e9a5dafc6213a35007aeec0b115ba11e69741dfa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 8 May 2025 11:27:59 +0200 Subject: [PATCH] Fix #19221 (#19254) --- .../examples/block-custom-view/block-custom-view.ts | 8 ++++++++ .../block-grid-entry/block-grid-entry.element.ts | 6 ++++++ .../block-list-entry/block-list-entry.element.ts | 6 ++++++ .../components/block-rte-entry/block-rte-entry.element.ts | 7 +++++++ 4 files changed, 27 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts index 8f0e4a11e7..5da08329ab 100644 --- a/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts +++ b/src/Umbraco.Web.UI.Client/examples/block-custom-view/block-custom-view.ts @@ -29,7 +29,9 @@ export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implemen UmbTextStyles, css` :host { + position: relative; display: block; + z-index: 10000; height: 100%; box-sizing: border-box; background-color: red; @@ -38,6 +40,12 @@ export class ExampleBlockCustomView extends UmbElementMixin(LitElement) implemen padding: 12px; } + :host > div { + position: relative; + display: block; + z-index: 10000; + } + .align-center { text-align: center; } 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 1f30e8298e..f0f5a9de01 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 @@ -427,6 +427,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper #extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer) => { if (ext.component) { ext.component.classList.add('umb-block-grid__block--view'); + ext.component.setAttribute('part', 'component'); } if (this._exposed) { return ext.component; @@ -641,6 +642,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper border-color: var(--uui-color-invalid); } + umb-extension-slot::part(component) { + position: relative; + z-index: 0; + } + #invalidLocation { position: absolute; top: -1em; 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 a493b21cac..998b1f4acf 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 @@ -346,6 +346,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper }; #extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer) => { + ext.component?.setAttribute('part', 'component'); if (this._exposed) { return ext.component; } else { @@ -511,6 +512,11 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper border-color: var(--uui-color-invalid); } + umb-extension-slot::part(component) { + position: relative; + z-index: 0; + } + uui-action-bar { position: absolute; top: var(--uui-size-2); diff --git a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts index a056c7045f..6970c554e2 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/block/block-rte/components/block-rte-entry/block-rte-entry.element.ts @@ -243,6 +243,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert }; #extensionSlotRenderMethod = (ext: UmbExtensionElementInitializer) => { + ext.component?.setAttribute('part', 'component'); if (this._exposed) { return ext.component; } else { @@ -345,6 +346,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert outline: 3px solid var(--uui-color-focus); } } + + umb-extension-slot::part(component) { + position: relative; + z-index: 0; + } + uui-action-bar { position: absolute; top: var(--uui-size-2);