Problems with JavaScript drupalSettings when there are two HTM blocks on the same page

I have a case where I placed two hierarchical taxonomy menu blocks (HTM blocks) on one page. I did this because the page is showing terms from two vocabularies. One vocabulary parent and child terms and one does not. For the simple, flat vocabulary I had collapsable and interactiveParent configurations set to false. For the other vocabulary, I set them to true.

Everything seemed to work fine when I was logged in as admin, but when I logged out, the HTM block for the vocabulary with parent and child terms stopped working properly. Despite the fact that I had set collapsable and interactiveParent to true, clicking on the arrow icons did not reveal the child terms and clicking on the parent terms revealed the child terms instead of linking to the term page.

Inspecting the code, I think I understand what the problem is. The build() function for the HierarchicalTaxonomyMenuBlock class returns a render array that sets two JavaScript drupalSettings parameters: stayOpen and interactiveParentMenu. However, these parameters are not set in a way that makes them specific to an HTM block. In my case, I think the drupalSettings for the simpler HTM block were overriding the drupalSettings for the more complicated HTM block.

I was able to resolve the problem configuring both blocks so that collapsible and interactiveParent were true. Then the blocks worked when logged out.

I've not mastered the Drupal blocks, but if I were going to try to fix this, I would either:

- try to set drupalSettings in a way that specifically identifies the HTM block to which the settings apply; or
- add attributes to the block tag for the HTML block that indicate the stayOpen and interactiveParentMenu values instead of using drupalSettings