Upgrade variable field to use new serialization

core/field_variable.js

@@ -194,6 +194,28 @@ Blockly.FieldVariable.prototype.toXml = function(fieldElement) {
   return fieldElement;
 };
 
+/**
+ * Saves this field's value.
+ * @return {string} The id of the variable referenced by this field.
+ * @override
+ * @package
+ */
+Blockly.FieldVariable.prototype.saveState = function() {
+  // Make sure the variable is initialized.
+  this.initModel();
+  return this.variable_.getId();
+};
+
+/**
+ * Sets the field's value based on the given state.
+ * @param {*} id The id of the variable to assign to this variable field.
+ * @override
+ * @package
+ */
+Blockly.FieldVariable.prototype.loadState = function(id) {
+  this.setValue(id);
+};
+
 /**
  * Attach this field to a block.
  * @param {!Blockly.Block} block The block containing this field.

tests/mocha/field_variable_test.js

@@ -377,4 +377,33 @@ suite('Variable Fields', function() {
       chai.assert.equal(this.variableField.getValue(), 'id2');
     });
   });
+
+  suite('Serialization', function() {
+    setup(function() {
+      this.workspace = new Blockly.Workspace();
+      defineRowBlock();
+      createGenUidStubWithReturns(new Array(10).fill().map((_, i) => 'id' + i));
+    });
+
+    teardown(function() {
+      workspaceTeardown.call(this, this.workspace);
+    });
+
+    test('Untyped', function() {
+      const block = this.workspace.newBlock('row_block');
+      const field = new Blockly.FieldVariable('x');
+      block.getInput('INPUT').appendField(field, 'VAR');
+      const jso = Blockly.serialization.blocks.save(block);
+      chai.assert.deepEqual(jso['fields'], {'VAR': 'id2'});
+    });
+
+    test('Typed', function() {
+      const block = this.workspace.newBlock('row_block');
+      const field =
+          new Blockly.FieldVariable('x', undefined, undefined, ['String']);
+      block.getInput('INPUT').appendField(field, 'VAR');
+      const jso = Blockly.serialization.blocks.save(block);
+      chai.assert.deepEqual(jso['fields'], {'VAR': 'id2'});
+    });
+  });
 });