Anchor in url -> scroll to block grid element

[gentle berry]

How do I make a deep link to a content node and a block grid element on that node.

The element key is there. But is it possible to add the key to the edit url, so the user is guided directly to the location of the element on the node.

[oblique island]

Hey @gentle berry - using the same code that adds the GUID to that data attribute to populate an id e.g. id="yourguid" you can then use this fragment identifier in a URL e.g. href="#yourguid" within the page or appended to the full url.

[gentle berry]

If I add the block grid elements Key as the anchor link like I normal would do on a webpage. It do not work - Then browser does not scroll down to the element on the page

Example:
The block element has key = f9cd12fb-f818-4861-a001-aa3db8d90680

Adding it to the edit url of the page - nothing happens.
/umbraco/section/content/workspace/document/edit/d1b55dc3-2d7e-4f22-97e4-c5a123146166/invariant/tab/content#f9cd12fb-f818-4861-a001-aa3db8d90680

Examine the DOM elements there seems to be no elements with id=f9cd12fb-f818-4861-a001-aa3db8d90680
The closest element is: <umb-block-grid-entry class="umb-block-grid__layout-item" index="1" data-element-key="f9cd12fb-f818-4861-a001-aa3db8d90680" .....

[oblique island]

If you mean in the back office this could prove complex as the element is rendered from the shadow root meaning elements inside a shadow root are not accessible via fragment identifiers in the URL. You could do it with JS but in the older back office I would not go to the trouble.

[gentle berry]

The old backoffice is left behind. We are only going forward - living on the edge 🙂

Yes, our conclusion is using some kind of JS to get the element in focus.

Was just hoping that some knew of unkown Umbraco backoffice magic.

[oblique island]

So you are working in 14+?

[gentle berry]

v15.1.1

Counting down to v15.2-RC in a few days

[oblique island]

In that case definitely make a package that is a drop menu that can jump to blocks, that would be awesome.
And as the new back office is just js something like

      const target = shadowRoot.getElementById('target');
      if (target) {
        target.scrollIntoView({ behavior: 'smooth' });
      }
    }```
I am using Block Grid a lot so it could be very useful for long pages for editors.
Although to be fair I am also using @honest quiver's Block Preview which makes it very easy to find content visually.

[gentle berry]

We are only using the backoffice like a headless cms.
So we have just made our own extensions of the visiual rendering of the grid elements in the backoffice.

The tasks right now is making some deep links to these elements from a dashboard overview where we would make it easy for the editors to go directly to the content node and down to the specfic block grid element.

Think we will try the JS scrollIntoView as you mentioned.

[oblique island]

Out of interest which framework are you using to render the front end and how are you finding managing routing?

[gentle berry]

Framework?
Our setup in the Extension project is Vite+Lit+TS

A manifest with all the customview for each block grid element

Example of a customview rendering a grid element for image

[oblique island]

I meant for the front end but this is amazing

[gentle berry]

Oh 😄

Actually we are not developing the frontend.
Right now we are pushing content from Umbraco to a API that transforms content and saves it to a database. The frontend application reads data through a content-service from the database.
I think the frontend is a React app

[oblique island]

Either way it's very reassuring to see Block Grid in a package.
Perhaps this thread would have been useful in the #package-development channel 😂