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.

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(
+    const operatorsDropdown = fieldRegistry.fromJson({
-        new FieldDropdown(OPERATORS), 'END');
+      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(
+    const modeMenu = fieldRegistry.fromJson({
-        MODE,
+      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(
+    const menu = fieldRegistry.fromJson({
-        this.WHERE_OPTIONS,
+      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(
+    const menu = fieldRegistry.fromJson({
-        this.WHERE_OPTIONS,
+      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(
+    const menu = fieldRegistry.fromJson({
-        this['WHERE_OPTIONS_' + n],
+      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(
+    const dropdown = fieldRegistry.fromJson({
-        [
+      type: 'field_dropdown',
-          [Msg['LISTS_SPLIT_LIST_FROM_TEXT'], 'SPLIT'],
+      options: [
-          [Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'],
+        [Msg['LISTS_SPLIT_LIST_FROM_TEXT'], 'SPLIT'],
-        ],
+        [Msg['LISTS_SPLIT_TEXT_FROM_LIST'], 'JOIN'],
-        function(newMode) {
+      ],
-          thisBlock.updateType_(newMode);
+    });
-        });
+    dropdown.setValidator(function(newMode) {
+      thisBlock.updateType_(newMode);
+    });
     this.setHelpUrl(Msg['LISTS_SPLIT_HELPURL']);
     this.setStyle('list_blocks');
     this.appendValueInput('INPUT').setCheck('String').appendField(

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);

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(
+    const menu = fieldRegistry.fromJson({
-        this['WHERE_OPTIONS_' + n],
+      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(
+    return fieldRegistry.fromJson({
-        dataUri, this.QUOTE_IMAGE_WIDTH, this.QUOTE_IMAGE_HEIGHT,
+      type: 'field_image',
-        isLeft ? '\u201C' : '\u201D');
+      src: dataUri,
+      width: this.QUOTE_IMAGE_WIDTH,
+      height: this.QUOTE_IMAGE_HEIGHT,
+      alt: isLeft ? '\u201C' : '\u201D',
+    });
   },
 };