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 f0f5a9de01..d4b38c13e8 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 @@ -92,6 +92,9 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper @state() _unsupported?: boolean; + @state() + _showActions?: boolean; + @state() _workspaceEditContentPath?: string; @@ -214,6 +217,13 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper }, null, ); + this.observe( + this.#context.actionsVisibility, + (showActions) => { + this._showActions = showActions; + }, + null, + ); this.observe( this.#context.inlineEditingMode, @@ -546,12 +556,14 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper } #renderActionBar() { - return html` - - ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()} - ${this.#renderDeleteAction()} - `; + return this._showActions + ? html` + + ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()} + ${this.#renderDeleteAction()} + ` + : nothing; } #renderEditAction() { 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 6242f413a3..b20e72711c 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 @@ -84,6 +84,9 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper @state() _unsupported?: boolean; + @state() + _showActions?: boolean; + @state() _workspaceEditContentPath?: string; @@ -178,6 +181,13 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper }, null, ); + this.observe( + this.#context.actionsVisibility, + (showActions) => { + this._showActions = showActions; + }, + null, + ); this.observe( this.#context.inlineEditingMode, (mode) => { @@ -412,10 +422,7 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper single >${this.#renderBuiltinBlockView()} - - ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} - ${this.#renderCopyToClipboardAction()} ${this.#renderDeleteAction()} - + ${this.#renderActionBar()} ${!this._showContentEdit && this._contentInvalid ? html`!` : nothing} @@ -424,6 +431,15 @@ export class UmbBlockListEntryElement extends UmbLitElement implements UmbProper : nothing; } + #renderActionBar() { + return this._showActions + ? html` + ${this.#renderEditContentAction()} ${this.#renderEditSettingsAction()} ${this.#renderCopyToClipboardAction()} + ${this.#renderDeleteAction()} + ` + : nothing; + } + #renderEditContentAction() { return this._showContentEdit && this._workspaceEditContentPath ? html` { + this._showActions = showActions; + }, + null, + ); // Data props: this.observe( this.#context.layout, @@ -269,7 +280,7 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert single> ${this.#renderRefBlock()} - ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} + ${this.#renderActionBar()} ${!this._showContentEdit && this._contentInvalid ? html`!` : nothing} @@ -278,6 +289,12 @@ export class UmbBlockRteEntryElement extends UmbLitElement implements UmbPropert : nothing; } + #renderActionBar() { + return this._showActions + ? html` ${this.#renderEditAction()} ${this.#renderEditSettingsAction()} ` + : nothing; + } + #renderRefBlock() { return html`