refactor: Use the field registry to instantiate fields in block definitions. (#6811)

* refactor: Use the field registry to instantiate fields for list blocks. * refactor: Use the field registry to instantiate fields for procedure blocks. * refactor: Use the field registry to instantiate fields for text blocks.
2025-12-16 06:10:12 +01:00 · 2023-02-07 08:06:54 -08:00
parent 167e26521c
commit cf8be1f5d1
3 changed files with 106 additions and 42 deletions
--- a/blocks/lists.js
+++ b/blocks/lists.js
@@ -12,6 +12,7 @@

 goog.module('Blockly.libraryBlocks.lists');

+const fieldRegistry = goog.require('Blockly.fieldRegistry');
 const xmlUtils = goog.require('Blockly.utils.xml');
 const {Align} = goog.require('Blockly.Input');
 /* eslint-disable-next-line no-unused-vars */
@@ -21,7 +22,6 @@ const {Block} = goog.requireType('Blockly.Block');
 /* eslint-disable-next-line no-unused-vars */
 const BlockDefinition = Object;
 const {ConnectionType} = goog.require('Blockly.ConnectionType');
-const {FieldDropdown} = goog.require('Blockly.FieldDropdown');
 const {Msg} = goog.require('Blockly.Msg');
 const {Mutator} = goog.require('Blockly.Mutator');
 /* eslint-disable-next-line no-unused-vars */
@@ -314,8 +314,11 @@ blocks['lists_indexOf'] = {
    this.setOutput(true, 'Number');
    this.appendValueInput('VALUE').setCheck('Array').appendField(
        Msg['LISTS_INDEX_OF_INPUT_IN_LIST']);
-    this.appendValueInput('FIND').appendField(
-        new FieldDropdown(OPERATORS), 'END');
+    const operatorsDropdown = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: OPERATORS,
+    });
+    this.appendValueInput('FIND').appendField(operatorsDropdown, 'END');
    this.setInputsInline(true);
    // Assign 'this' to a variable for use in the tooltip closure below.
    const thisBlock = this;
@@ -346,8 +349,11 @@ blocks['lists_getIndex'] = {
    ];
    this.setHelpUrl(Msg['LISTS_GET_INDEX_HELPURL']);
    this.setStyle('list_blocks');
-    const modeMenu = new FieldDropdown(
-        MODE,
+    const modeMenu = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: MODE,
+    });
+    modeMenu.setValidator(
        /**
         * @param {*} value The input value.
         * @this {FieldDropdown}
@@ -525,8 +531,11 @@ blocks['lists_getIndex'] = {
    } else {
      this.appendDummyInput('AT');
    }
-    const menu = new FieldDropdown(
-        this.WHERE_OPTIONS,
+    const menu = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: this.WHERE_OPTIONS,
+    });
+    menu.setValidator(
        /**
         * @param {*} value The input value.
         * @this {FieldDropdown}
@@ -575,8 +584,12 @@ blocks['lists_setIndex'] = {
    this.setStyle('list_blocks');
    this.appendValueInput('LIST').setCheck('Array').appendField(
        Msg['LISTS_SET_INDEX_INPUT_IN_LIST']);
+    const operationDropdown = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: MODE,
+    });
    this.appendDummyInput()
-        .appendField(new FieldDropdown(MODE), 'MODE')
+        .appendField(operationDropdown, 'MODE')
        .appendField('', 'SPACE');
    this.appendDummyInput('AT');
    this.appendValueInput('TO').appendField(Msg['LISTS_SET_INDEX_INPUT_TO']);
@@ -688,8 +701,11 @@ blocks['lists_setIndex'] = {
    } else {
      this.appendDummyInput('AT');
    }
-    const menu = new FieldDropdown(
-        this.WHERE_OPTIONS,
+    const menu = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: this.WHERE_OPTIONS,
+    });
+    menu.setValidator(
        /**
         * @param {*} value The input value.
         * @this {FieldDropdown}
@@ -816,8 +832,11 @@ blocks['lists_getSublist'] = {
    } else {
      this.appendDummyInput('AT' + n);
    }
-    const menu = new FieldDropdown(
-        this['WHERE_OPTIONS_' + n],
+    const menu = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: this['WHERE_OPTIONS_' + n],
+    });
+    menu.setValidator(
        /**
         * @param {*} value The input value.
         * @this {FieldDropdown}
@@ -898,14 +917,16 @@ blocks['lists_split'] = {
  init: function() {
    // Assign 'this' to a variable for use in the closures below.
    const thisBlock = this;
-    const dropdown = new FieldDropdown(
-        [
-          [Msg['LISTS_SPLIT_LIST_FROM_TEXT'], 'SPLIT'],
-          [Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'],
-        ],
-        function(newMode) {
-          thisBlock.updateType_(newMode);
-        });
+    const dropdown = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: [
+        [Msg['LISTS_SPLIT_LIST_FROM_TEXT'], 'SPLIT'],
+        [Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'],
+      ],
+    });
+    dropdown.setValidator(function(newMode) {
+      thisBlock.updateType_(newMode);
+    });
    this.setHelpUrl(Msg['LISTS_SPLIT_HELPURL']);
    this.setStyle('list_blocks');
    this.appendValueInput('INPUT').setCheck('String').appendField(
--- a/blocks/procedures.js
+++ b/blocks/procedures.js
@@ -19,6 +19,7 @@ const Events = goog.require('Blockly.Events');
 const Procedures = goog.require('Blockly.Procedures');
 const Variables = goog.require('Blockly.Variables');
 const Xml = goog.require('Blockly.Xml');
+const fieldRegistry = goog.require('Blockly.fieldRegistry');
 const xmlUtils = goog.require('Blockly.utils.xml');
 const {Align} = goog.require('Blockly.Input');
 /* eslint-disable-next-line no-unused-vars */
@@ -28,10 +29,6 @@ const {Block} = goog.requireType('Blockly.Block');
 /* eslint-disable-next-line no-unused-vars */
 const BlockDefinition = Object;
 const {config} = goog.require('Blockly.config');
-/* eslint-disable-next-line no-unused-vars */
-const {FieldCheckbox} = goog.require('Blockly.FieldCheckbox');
-const {FieldLabel} = goog.require('Blockly.FieldLabel');
-const {FieldTextInput} = goog.require('Blockly.FieldTextInput');
 const {Msg} = goog.require('Blockly.Msg');
 const {Mutator} = goog.require('Blockly.Mutator');
 const {Names} = goog.require('Blockly.Names');
@@ -454,7 +451,11 @@ blocks['procedures_defnoreturn'] = {
   */
  init: function() {
    const initName = Procedures.findLegalName('', this);
-    const nameField = new FieldTextInput(initName, Procedures.rename);
+    const nameField = fieldRegistry.fromJson({
+      type: 'field_input',
+      text: initName,
+    });
+    nameField.setValidator(Procedures.rename);
    nameField.setSpellcheck(false);
    this.appendDummyInput()
        .appendField(Msg['PROCEDURES_DEFNORETURN_TITLE'])
@@ -497,7 +498,11 @@ blocks['procedures_defreturn'] = {
   */
  init: function() {
    const initName = Procedures.findLegalName('', this);
-    const nameField = new FieldTextInput(initName, Procedures.rename);
+    const nameField = fieldRegistry.fromJson({
+      type: 'field_input',
+      text: initName,
+    });
+    nameField.setValidator(Procedures.rename);
    nameField.setSpellcheck(false);
    this.appendDummyInput()
        .appendField(Msg['PROCEDURES_DEFRETURN_TITLE'])
@@ -546,7 +551,12 @@ blocks['procedures_mutatorcontainer'] = {
    this.appendStatementInput('STACK');
    this.appendDummyInput('STATEMENT_INPUT')
        .appendField(Msg['PROCEDURES_ALLOW_STATEMENTS'])
-        .appendField(new FieldCheckbox('TRUE'), 'STATEMENTS');
+        .appendField(
+            fieldRegistry.fromJson({
+              type: 'field_checkbox',
+              checked: true,
+            }),
+            'STATEMENTS');
    this.setStyle('procedure_blocks');
    this.setTooltip(Msg['PROCEDURES_MUTATORCONTAINER_TOOLTIP']);
    this.contextMenu = false;
@@ -559,7 +569,11 @@ blocks['procedures_mutatorarg'] = {
   * @this {Block}
   */
  init: function() {
-    const field = new FieldTextInput(Procedures.DEFAULT_ARG, this.validator_);
+    const field = fieldRegistry.fromJson({
+      type: 'field_input',
+      text: Procedures.DEFAULT_ARG,
+    });
+    field.setValidator(this.validator_);
    // Hack: override showEditor to do just a little bit more work.
    // We don't have a good place to hook into the start of a text edit.
    field.oldShowEditorFn_ = field.showEditor_;
@@ -810,7 +824,10 @@ const PROCEDURE_CALL_COMMON = {
        }
      } else {
        // Add new input.
-        const newField = new FieldLabel(this.arguments_[i]);
+        const newField = fieldRegistry.fromJson({
+          type: 'field_label',
+          text: this.arguments_[i],
+        });
        const input = this.appendValueInput('ARG' + i)
                          .setAlign(Align.RIGHT)
                          .appendField(newField, 'ARGNAME' + i);
--- a/blocks/text.js
+++ b/blocks/text.js
@@ -14,6 +14,7 @@ goog.module('Blockly.libraryBlocks.texts');

 const Extensions = goog.require('Blockly.Extensions');
 const {Msg} = goog.require('Blockly.Msg');
+const fieldRegistry = goog.require('Blockly.fieldRegistry');
 /* eslint-disable-next-line no-unused-vars */
 const xmlUtils = goog.require('Blockly.utils.xml');
 const {Align} = goog.require('Blockly.Input');
@@ -24,9 +25,6 @@ const {Block} = goog.requireType('Blockly.Block');
 /* eslint-disable-next-line no-unused-vars */
 const BlockDefinition = Object;
 const {ConnectionType} = goog.require('Blockly.ConnectionType');
-const {FieldDropdown} = goog.require('Blockly.FieldDropdown');
-const {FieldImage} = goog.require('Blockly.FieldImage');
-const {FieldTextInput} = goog.require('Blockly.FieldTextInput');
 const {Mutator} = goog.require('Blockly.Mutator');
 /* eslint-disable-next-line no-unused-vars */
 const {Workspace} = goog.requireType('Blockly.Workspace');
@@ -338,8 +336,11 @@ blocks['text_getSubstring'] = {
      this.removeInput('TAIL', true);
      this.appendDummyInput('TAIL').appendField(Msg['TEXT_GET_SUBSTRING_TAIL']);
    }
-    const menu = new FieldDropdown(
-        this['WHERE_OPTIONS_' + n],
+    const menu = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: this['WHERE_OPTIONS_' + n],
+    });
+    menu.setValidator(
        /**
         * @param {*} value The input value.
         * @this {FieldDropdown}
@@ -385,7 +386,11 @@ blocks['text_changeCase'] = {
    this.setHelpUrl(Msg['TEXT_CHANGECASE_HELPURL']);
    this.setStyle('text_blocks');
    this.appendValueInput('TEXT').setCheck('String').appendField(
-        new FieldDropdown(OPERATORS), 'CASE');
+        fieldRegistry.fromJson({
+          type: 'field_dropdown',
+          options: OPERATORS,
+        }),
+        'CASE');
    this.setOutput(true, 'String');
    this.setTooltip(Msg['TEXT_CHANGECASE_TOOLTIP']);
  },
@@ -405,7 +410,11 @@ blocks['text_trim'] = {
    this.setHelpUrl(Msg['TEXT_TRIM_HELPURL']);
    this.setStyle('text_blocks');
    this.appendValueInput('TEXT').setCheck('String').appendField(
-        new FieldDropdown(OPERATORS), 'MODE');
+        fieldRegistry.fromJson({
+          type: 'field_dropdown',
+          options: OPERATORS,
+        }),
+        'MODE');
    this.setOutput(true, 'String');
    this.setTooltip(Msg['TEXT_TRIM_TOOLTIP']);
  },
@@ -486,7 +495,11 @@ blocks['text_prompt_ext'] = {
    this.setStyle('text_blocks');
    // Assign 'this' to a variable for use in the closures below.
    const thisBlock = this;
-    const dropdown = new FieldDropdown(TYPES, function(newOp) {
+    const dropdown = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: TYPES,
+    });
+    dropdown.setValidator(function(newOp) {
      thisBlock.updateType_(newOp);
    });
    this.appendValueInput('TEXT').appendField(dropdown, 'TYPE');
@@ -522,13 +535,22 @@ blocks['text_prompt'] = {
    const thisBlock = this;
    this.setHelpUrl(Msg['TEXT_PROMPT_HELPURL']);
    this.setStyle('text_blocks');
-    const dropdown = new FieldDropdown(TYPES, function(newOp) {
+    const dropdown = fieldRegistry.fromJson({
+      type: 'field_dropdown',
+      options: TYPES,
+    });
+    dropdown.setValidator(function(newOp) {
      thisBlock.updateType_(newOp);
    });
    this.appendDummyInput()
        .appendField(dropdown, 'TYPE')
        .appendField(this.newQuote_(true))
-        .appendField(new FieldTextInput(''), 'TEXT')
+        .appendField(
+            fieldRegistry.fromJson({
+              type: 'field_input',
+              text: '',
+            }),
+            'TEXT')
        .appendField(this.newQuote_(false));
    this.setOutput(true, 'String');
    this.setTooltip(function() {
@@ -696,9 +718,13 @@ const QUOTE_IMAGE_MIXIN = {
    const isLeft = this.RTL ? !open : open;
    const dataUri =
        isLeft ? this.QUOTE_IMAGE_LEFT_DATAURI : this.QUOTE_IMAGE_RIGHT_DATAURI;
-    return new FieldImage(
-        dataUri, this.QUOTE_IMAGE_WIDTH, this.QUOTE_IMAGE_HEIGHT,
-        isLeft ? '\u201C' : '\u201D');
+    return fieldRegistry.fromJson({
+      type: 'field_image',
+      src: dataUri,
+      width: this.QUOTE_IMAGE_WIDTH,
+      height: this.QUOTE_IMAGE_HEIGHT,
+      alt: isLeft ? '\u201C' : '\u201D',
+    });
  },
 };