Get current tag list in Gutenberg save function

Question

I am trying to get the current tag list for a given post inside the save function to render on page.

There is a similar Q here: How to return a list of custom taxonomy terms via the Gutenberg getEntityRecords method, but I am not sure if that is the solution to my problem?

This taxonomy is set to 'show_in_rest' => TRUE,.

A couple of attempts I have tried are:

save: function() {

  // #1:
  var tag_array = wp.data.select("core/editor").getCurrentPostAttribute("custom_taxonomy");
  var tag_list = [];
  if (tag_array) {
    tag_array.forEach(
      tag => tag_list.push(
        el('li', null, wp.data.select('core').getEntityRecord('taxonomy', 'custom_taxonomy', tag))
      ),
    );
  }

  // #2:
  const tag_array = wp.data.select("core/editor").getCurrentPostAttribute("custom_taxonomy");
  const tag_objects = wp.data.select('core').getEntityRecords('taxonomy', 'custom_taxonomy', tag_array);
  var tag_list = [];
  tag_objects.forEach(
    tag => tag_list.push(
      el('li', null, tag.name)
    )
  );
}

Attempt #1 returns objects

Attempt #2 does not filter the results to the given current tag ID's and returns the entire list of tags in the taxonomy.

wp.data.select("core/editor").getCurrentPostAttribute("custom_taxonomy"); returns the correct tag ID's.

Is there a method to load a tag name with the ID (other than .getEntityRecord())?

A bit unsure what I'm missing here, how can I get a list of selected tags for the current post?

Answer 1

Attempt #1 returns objects

If I understand it correctly, that's because getEntityRecord(), upon successful request to the REST API endpoint (e.g. /wp/v2/categories/<id>), returns the term object/data which contains term properties such as name and ID.

So,

// Instead of:
el('li', null, wp.data.select('core').getEntityRecord('taxonomy', 'custom_taxonomy', tag))

// you'd use: (note the ".name")
el('li', null, wp.data.select('core').getEntityRecord('taxonomy', 'custom_taxonomy', tag).name)

Attempt #2 does not filter the results to the given current tag ID's and returns the entire list of tags in the taxonomy.

The third parameter for getEntityRecords() is actually an object with the parameters listed here such as include for limiting the result set to specific (term) IDs, so in the case of your "Attempt #2", you can do so to limit the results to the given term IDs:

const tag_objects = wp.data.select('core').getEntityRecords('taxonomy', 'custom_taxonomy', {
    include: tag_array
});

However, it should be noted that because getEntityRecord() and getEntityRecords() perform an AJAX request, they don't immediately return the result or response from the server, so don't expect something like const term = getEntityRecord( 'taxonomy', ... ); console.log( term.name ); to (always) work because the term could be an undefined (or something else) and not the term object/data.

Secondly, instead of returning the tags/terms as elements in your save callback, how about using dynamic block whereby you'd use an attribute to save the term IDs and then use PHP to output the HTML on the front-end side? That way, when any of the terms get updated after the post is edited, the displayed term data on the front-end would also be updated without having to first edit the post (which then updates the block output, i.e. the save output).

But that is just a suggestion. :)