Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Blockly.setLocale do not translate all block

See original GitHub issue

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.

Click on select button, change language English to Chinese.
Check blocks’ language, specially dropdown menu.
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):