Output URL to post from post ID attribute

[djave-co]

In my theme, I have a number of custom blocks that allow you to select a page. In the save function, I save the pages URL, ID and Title.

registerBlockType("djave/blockwithlink", {
  attributes: {
    page: {
      // { id: 1, url: "http://site.dev/page-url", title: "Page title"}
      type: "object",
      default: {},
    },
  },
  edit,
  save: ({attributes}) => {
    return (<div>
      <a href={attributes.link.url}>{attributes.link.title}</a>
    </div>)
  }
});

This is great, when I save the block I get:

<div>
  <a href="http://site.dev/page-url">Page title</a>
</div>

But if the page being referenced is edited and its url updated to http://site.dev/new-page-url, the saved block has the out dated URL.

Is there a way to put a permalink to an ID into a save() function?

The other option I have is that I return null from the save function and instead create the template as PHP and use something like I'm used to from PHP templating like get_permalink($attributes['link']['id']).

However:

1. have lots of blocks that follow the same pattern which would need to be extracted to PHP.
2. I'm really enjoying using the save function, and don't like the idea of half of my blocks being JavaScript saved and half being PHP rendered, it seems wrong. If PHP is the only way to create dynamic content, I don't entirely understand the purpose of the JavaScript save function at all.

This feels like it must be a "solved" problem. Is there a recommended approach to this? Is there a way of having a part of a save template output a php tag?

[talldan]

This feels like it must be a "solved" problem. Is there a recommended approach to this?

Unfortunately not, some core blocks have the same issue as you're having, and the only solution right now is to use a PHP render callback. What technique you use within the render callback is up to you.

This new discussion seems relevant though, it proposes a token system to make this kind of thing easier - #39831.