新增自訂區塊

雖然 Blockly 定義了許多標準區塊，但大多數應用程式需要定義並導入至少一些與網域相關的區塊。

區塊由三個元件組成：

Block 定義物件：定義區塊的外觀和行為包括文字、色彩、欄位和連接
Toolbox 參考資料：工具箱 XML 中區塊類型的參照，因此使用者可以將工作加到工作區
產生器函式：產生這個區塊的程式碼字串。即使目標語言不是 JavaScript，這類內容一律會以 JavaScript 編寫。

Block 定義

禁止透過指令碼檔案載入區塊。blocks/ 目錄包含標準區塊的幾個這類範例。假設區塊並不適合現有類別，請建立新的 JavaScript 檔案。這個新的 JavaScript 檔案必須納入編輯器 HTML 檔案中的 <script ...> 標記清單。

一般區塊定義如下所示：

JSON

Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};

JavaScript

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

string_length：這是區塊類型名稱。由於所有區塊都共用相同的命名空間，建議您使用由類別 (本例為 string) 和區塊函式 (本例為 length) 組成的名稱。
init：此函式可定義區塊的外觀和感受。

這會定義下列區塊：

`string_length` 區塊。

如要進一步瞭解封鎖定義，請前往定義區塊。

JSON 陣列

您可以使用 JSON 區塊定義陣列，一次定義多個區塊。

JSON

Blockly.defineBlocksWithJsonArray([
  // Block for colour picker.
  {
    "type": "colour_picker",
    "message0": "%1",
    "args0": [
      {
        "type": "field_colour",
        "name": "COLOUR",
        "colour": "#ff0000"
      }
    ],
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_PICKER_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_PICKER_TOOLTIP}",
    "extensions": ["parent_tooltip_when_inline"]
  },
  // Block for random colour.
  {
    "type": "colour_random",
    "message0": "%{BKY_COLOUR_RANDOM_TITLE}",
    "output": "Colour",
    "helpUrl": "%{BKY_COLOUR_RANDOM_HELPURL}",
    "style": "colour_blocks",
    "tooltip": "%{BKY_COLOUR_RANDOM_TOOLTIP}"
  }
]);

新增工具箱參照

定義完成後，請使用類型名稱參照工具箱中的區塊：

<xml id="toolbox" style="display: none">
  <category name="Text">
    <block type="string_length"></block>
  </category>
  ...
</xml>

詳情請參閱Toolbox 指南。

新增區塊程式碼產生器

最後，如要將區塊轉換為程式碼，請將區塊與產生器配對函式。產生器會依所需的輸出語言而異，但標準產生器通常採用以下格式：

javascriptGenerator.forBlock['text_length'] = function(block, generator) {
  // String or array length.
  var argument0 = generator.valueToCode(block, 'VALUE', Order.FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Order.MEMBER];
};

產生器函式會取得要處理的區塊參照。這項服務會將輸入內容 (上述的 VALUE 輸入內容) 轉譯為程式碼字串，然後串連成更大的運算式

→ 進一步瞭解區塊程式碼產生器...