Custom backoffice views for blocks in Umbraco 17 - click to edit

Questions
1

In Umbraco 13.x when you have a custom backoffice view for a block you can include ng-click=“block.edit()” to make the entire block clickable, where a click opens the edit content pane.

Is there an equivalent for Umbraco 17? Without it users have to click the tiny edit icon, but I don’t see any mention of it on the docs page.

2

Hi @sussexrick

You are right, this is missing, good call.

This is possible, and it is also a good example of where the Core code would work as a guide on the possibilities. Cause the Core Default Views are implemented with the same APIs as Custom Views have available. — In general, there is no difference between Core code and customizations, so if you learn to navigate the Core code base there is a ton of knowledge available for you :slight_smile:

I took some code from there, which shows how to make it happen via a URL. This is the preferred implementation as it enables the user to copy the link or just Ctrl+Click/CMD+Click (or right-click ‘open in a new tab’) to open the Edit modal in a new Tab.

	@property({ attribute: false })
	config?: UmbBlockEditorCustomViewConfiguration;

	override render() {
		return html`<a href=${this.config?.editContentPath ?? ''}>...</a>`;
	}

(there is a similar one for settings)

If you are not able to use the URL, then it is still possible to call a method top open the Block Workspace.

For this, you need to get the context of UMB_BLOCK_ENTRY_CONTEXT, which holds the methods edit() and editSettings().

It would be lovely to see a PR incorporating this in the Docs. Would you be up for it?

Good luck with your project and thanks in advance

1 Like
3

Great, thank you! Yes I’m happy to do the docs update. May be a few days before I get to it but I’ll add it to my task list.

1 Like