diff --git a/plugins/field-colour/src/index.ts b/plugins/field-colour/src/index.ts
index b0474b0b4..d2cb8afab 100644
--- a/plugins/field-colour/src/index.ts
+++ b/plugins/field-colour/src/index.ts
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import {registerFieldGridDropdown} from '@blockly/field-grid-dropdown';
+registerFieldGridDropdown();
 export * from './field_colour';
 
 import * as colourPicker from './blocks/colourPicker';
diff --git a/plugins/field-grid-dropdown/README.md b/plugins/field-grid-dropdown/README.md
index 395f8055b..bf4eb8e9f 100644
--- a/plugins/field-grid-dropdown/README.md
+++ b/plugins/field-grid-dropdown/README.md
@@ -36,7 +36,11 @@ in Blockly core. The config object bag passed into this field accepts additional
 
 ```js
 import * as Blockly from 'blockly';
-import {FieldGridDropdown} from '@blockly/field-grid-dropdown';
+import {
+  FieldGridDropdown,
+  registerFieldGridDropdown,
+} from '@blockly/field-grid-dropdown';
+registerFieldGridDropdown();
 Blockly.Blocks['test_field_grid_dropdown'] = {
   init: function () {
     this.appendDummyInput()
@@ -62,7 +66,8 @@ Blockly.Blocks['test_field_grid_dropdown'] = {
 
 ```js
 import * as Blockly from 'blockly';
-import '@blockly/field-grid-dropdown';
+import {registerFieldGridDropdown} from '@blockly/field-grid-dropdown';
+registerFieldGridDropdown();
 Blockly.defineBlocksWithJsonArray([
   {
     type: 'test_field_grid_dropdown',
diff --git a/plugins/field-grid-dropdown/src/index.ts b/plugins/field-grid-dropdown/src/index.ts
index 1e62920fc..baa956b21 100644
--- a/plugins/field-grid-dropdown/src/index.ts
+++ b/plugins/field-grid-dropdown/src/index.ts
@@ -208,7 +208,10 @@ export class FieldGridDropdown extends Blockly.FieldDropdown {
   }
 }
 
-Blockly.fieldRegistry.register('field_grid_dropdown', FieldGridDropdown);
+/** Register the field and any dependencies. */
+export function registerFieldGridDropdown() {
+  Blockly.fieldRegistry.register('field_grid_dropdown', FieldGridDropdown);
+}
 
 /**
  * CSS for grid field.