Blockly.setLocale do not translate all block

[YUN-RU-TSENG]

Describe the bug

I want to change the language of blockly. Since Blockly needs to set the language before generating the Workspace, I regenerate the workspace every time I change the language using Blockly.setLocale, but not all blocks will be changed, some blocks' dropdown menu language will not be changed and will remain the same.

To Reproduce
here is online demo, i use vue2.

1. Click on select button, change language English to Chinese.
2. Check blocks' language, specially dropdown menu.
3. See Block do not all translate.

App.vue

<template>
  <div id="app">
    <div style="margin-bottom: 12px;">
      <label for="language">language: </label>
      <select name="language" id="language" v-model="language">
        <option value="en">English</option>
        <option value="zh-hans">Chinese</option>
        <option value="zh-hant">Chinese(Trandition)</option>
      </select>
    </div>
    <div class="workspace" ref="workspace" :key="workspaceId"></div>
  </div>
</template>

<script>
import Blockly from "blockly";

export default {
  name: "App",
  components: {},
  data() {
    return {
      workspace: null,
      language: "en",
      workspaceId: 0,
    };
  },
  watch: {
    async language() {
      ++this.workspaceId;
      const lang = await import(`blockly/msg/${this.language}`);
      Blockly.setLocale(lang);
      this.initBlockly();
    },
  },
  mounted() {
    this.initBlockly();
  },
  methods: {
    initBlockly() {
      this.workspace = Blockly.inject(this.$refs.workspace, {
        toolbox: `
<xml id="toolbox" style="display: none">

  <block type="text"></block>
  <block type="text_print"></block>
    <block type="math_arithmetic">
      <value name="A">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="B">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
    <block type="math_single">
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM">9</field>
        </shadow>
      </value>
    </block>
    <block type="math_trig">
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM">45</field>
        </shadow>
      </value>
    </block>
</xml>`,
      });
    },
  },
};
</script>

<style>
.workspace {
  width: 100vw;
  height: 100vh;
}
</style>

Expected behavior

all blocks translate to current language.

Desktop (please complete the following information):

• OS
• Browser : Chrome

[moniika]

This could be related to #4369.

[YUN-RU-TSENG]

I found something like this #1964 #1895

Is that blockly dropdown api's problem, seems like it doesn't support translate

I don't want to refresh my site, is that any other solution.

[BeksOmega]

I found something like this #1964 #1895

@YUN-RU-TSENG I think you're right and that is the issue.

I don't want to refresh my site, is there any other solution?

As mentioned here, you should be able to change all of the broken JSON block-definitions to JavaScript block-definitions to fix the issue. If you change them to JavaScript blockly-definitions you can pass the actual Blockly.Msg references, rather than the %{BKY_...} strings that break the dropdowns. For example:

Blockly.Blocks['math_single'] = {
  init: function() {
    this.appendValueInput("NUM")
        .setCheck('Number')
        .appendField(new Blockly.FieldDropdown(
          [
            // Use the actual Blockly.Msg properties.
            [Blockly.Msg['MATH_SINGLE_OP_ROOT'],"ROOT"],
            [Blockly.Msg['MATH_SINGLE_OP_ABSOLUTE'],"ABS"],
            ["option","NEG"]
            ["option","LN"],
            ["option","LONG10"],
            ["option","EXP"]
            ["option","POW10"]
          ]), "NAME");
  }
};

But be warned, this could take a lot of work :/

[YUN-RU-TSENG]

thanks.

[maribethb]

Closing as a duplicate of #1895 . Thanks for reporting!