feat!: add block definitions to colour field plugin

plugins/field-angle/src/field_angle.ts

@@ -658,12 +658,20 @@ export class FieldAngle extends Blockly.FieldNumber {
   }
 }
 
-// Unregister legacy field_angle that was in core.  Delete this once
-// core Blockly no longer defines field_angle.
-// If field_angle is not defined in core, this generates a console warning.
-Blockly.fieldRegistry.unregister('field_angle');
+/**
+ * Register the field and any dependencies.
+ */
+export function registerAngleField() {
+  // Unregister legacy field_angle that was in core.  Delete this once
+  // core Blockly no longer defines field_angle.
+  // If field_angle is not defined in core, this generates a console warning.
+  Blockly.fieldRegistry.unregister('field_angle');
+
+  Blockly.fieldRegistry.register('field_angle', FieldAngle);
+}
 
-Blockly.fieldRegistry.register('field_angle', FieldAngle);
+// Immediately register the field.
+registerAngleField();
 
 FieldAngle.prototype.DEFAULT_VALUE = 0;
 

plugins/field-colour/src/blocks.ts

@@ -0,0 +1,138 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly';
+import { registerColourField } from './field_colour';
+import { installColourPickerBlock } from './blocks/colourPicker';
+
+// Re-export all parts of the definition.
+export * from './blocks/colourPicker';
+
+// TODO: Write correct types for the `generators` parameter for each block's 
+// `install` function.
+const generators: Record<string, Blockly.Generator> {
+    'javascript': typeof JavaScript.javascriptGenerator
+}
+
+// Helper function to define a single block from a JSON definition.
+function defineBlockFromJson(blockJsonDef : any) {
+    Blockly.common.defineBlocks(
+        Blockly.common.createBlockDefinitionsFromJsonArray([blockJsonDef]));
+}
+
+// Block for random colour.
+const randomColourDef =
+{
+    'type': 'colour_random',
+    'message0': '%{BKY_COLOUR_RANDOM_TITLE}',
+    'output': 'Colour',
+    'helpUrl': '%{BKY_COLOUR_RANDOM_HELPURL}',
+    'style': 'colour_blocks',
+    'tooltip': '%{BKY_COLOUR_RANDOM_TOOLTIP}',
+};
+
+// Block for composing a colour from RGB components.
+const colourRgbDef =
+{
+    'type': 'colour_rgb',
+    'message0':
+        '%{BKY_COLOUR_RGB_TITLE} %{BKY_COLOUR_RGB_RED} %1 %{BKY_COLOUR_RGB_GREEN} %2 %{BKY_COLOUR_RGB_BLUE} %3',
+    'args0': [
+        {
+            'type': 'input_value',
+            'name': 'RED',
+            'check': 'Number',
+            'align': 'RIGHT',
+        },
+        {
+            'type': 'input_value',
+            'name': 'GREEN',
+            'check': 'Number',
+            'align': 'RIGHT',
+        },
+        {
+            'type': 'input_value',
+            'name': 'BLUE',
+            'check': 'Number',
+            'align': 'RIGHT',
+        },
+    ],
+    'output': 'Colour',
+    'helpUrl': '%{BKY_COLOUR_RGB_HELPURL}',
+    'style': 'colour_blocks',
+    'tooltip': '%{BKY_COLOUR_RGB_TOOLTIP}',
+};
+
+// Block for blending two colours together.
+const colourBlendDef =
+{
+    'type': 'colour_blend',
+    'message0':
+        '%{BKY_COLOUR_BLEND_TITLE} %{BKY_COLOUR_BLEND_COLOUR1} ' +
+        '%1 %{BKY_COLOUR_BLEND_COLOUR2} %2 %{BKY_COLOUR_BLEND_RATIO} %3',
+    'args0': [
+        {
+            'type': 'input_value',
+            'name': 'COLOUR1',
+            'check': 'Colour',
+            'align': 'RIGHT',
+        },
+        {
+            'type': 'input_value',
+            'name': 'COLOUR2',
+            'check': 'Colour',
+            'align': 'RIGHT',
+        },
+        {
+            'type': 'input_value',
+            'name': 'RATIO',
+            'check': 'Number',
+            'align': 'RIGHT',
+        },
+    ],
+    'output': 'Colour',
+    'helpUrl': '%{BKY_COLOUR_BLEND_HELPURL}',
+    'style': 'colour_blocks',
+    'tooltip': '%{BKY_COLOUR_BLEND_TOOLTIP}',
+};
+
+/**
+ * Install the `colour_rgb` block and all of its dependencies.
+ */
+export function installColourRgbBlock(generators = {}) {
+    defineBlockFromJson(colourRgbDef);
+    registerColourField();
+}
+
+/**
+ * Install the `colour_random` block and all of its dependencies.
+ */
+export function installColourRandomBlock(generators = {}) {
+    defineBlockFromJson(randomColourDef);
+    registerColourField();
+}
+
+/**
+ * Install the `colour_blend` block and all of its dependencies.
+ */
+export function installColourBlendBlock(generators = {}) {
+    defineBlockFromJson(colourBlendDef);
+    registerColourField();
+}
+
+/**
+ * Install all of the blocks defined in this file and all of their
+ * dependencies.
+ */
+export function installAllBlocks(generators = {}) {
+    installColourPickerBlock(generators);
+    installColourRgbBlock(generators);
+    installColourRandomBlock(generators);
+    installColourBlendBlock(generators);
+}
+
+// Calling this installs blocks, which means it has side effects.
+installAllBlocks();

plugins/field-colour/src/blocks/colourPicker.ts

@@ -0,0 +1,139 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly';
+import * as JavaScript from 'blockly/javascript';
+import * as Dart from 'blockly/dart';
+import * as Lua from 'blockly/lua';
+import * as PHP from 'blockly/php';
+import * as Python from 'blockly/python';
+import { registerColourField } from '../field_colour';
+
+
+// Helper function to define a single block from a JSON definition.
+function defineBlockFromJson(blockJsonDef: any) {
+    Blockly.common.defineBlocks(
+        Blockly.common.createBlockDefinitionsFromJsonArray([blockJsonDef]));
+}
+
+const blockName = 'colour_picker';
+
+// Block for colour picker.
+const colourPickerDef =
+{
+    'type': blockName,
+    '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'],
+};
+
+/**
+ * Javascript generator definition.
+ * @param block
+ * @param generator 
+ * @returns 
+ */
+export function colourPickerGenJs(
+    block: Blockly.Block,
+    generator: typeof JavaScript.javascriptGenerator,
+): [string, JavaScript.Order] {
+    // Colour picker.
+    const code = generator.quote_(block.getFieldValue('COLOUR'));
+    return [code, JavaScript.Order.ATOMIC];
+}
+
+/**
+ * Dart generator definition.
+ * @param block 
+ * @param generator 
+ * @returns 
+ */
+export function colourPickerGenDart(
+    block: Blockly.Block,
+    generator: typeof Dart.dartGenerator,
+): [string, Dart.Order] {
+    // Colour picker.
+    const code = generator.quote_(block.getFieldValue('COLOUR'));
+    return [code, Dart.Order.ATOMIC];
+}
+
+/**
+ * Lua generator definition.
+ * @param block 
+ * @param generator 
+ * @returns 
+ */
+export function colourPickerGenLua(
+    block: Blockly.Block,
+    generator: typeof Lua.luaGenerator,
+): [string, Lua.Order] {
+    // Colour picker.
+    const code = generator.quote_(block.getFieldValue('COLOUR'));
+    return [code, Lua.Order.ATOMIC];
+}
+
+/**
+ * PHP generator definition.
+ * @param block 
+ * @param generator 
+ * @returns 
+ */
+export function colourPickerGenPhp(
+    block: Blockly.Block,
+    generator: typeof PHP.phpGenerator,
+): [string, PHP.Order] {
+    // Colour picker.
+    const code = generator.quote_(block.getFieldValue('COLOUR'));
+    return [code, PHP.Order.ATOMIC];
+}
+
+/**
+ * Python generator definition.
+ * @param block 
+ * @param generator 
+ * @returns 
+ */
+export function colourPickerGenPython(
+    block: Blockly.Block,
+    generator: typeof Python.pythonGenerator,
+): [string, Python.Order] {
+    // Colour picker.
+    const code = generator.quote_(block.getFieldValue('COLOUR'));
+    return [code, Python.Order.ATOMIC];
+}
+
+/**
+ * Install the `colour_picker` block and all of its dependencies.
+ */
+export function installColourPickerBlock(generators: any = {}) {
+    defineBlockFromJson(colourPickerDef);
+    registerColourField();
+    if (generators.javascript) {
+        generators.javascript.forBlock[blockName] = colourPickerGenJs;
+    }
+    if (generators.dart) {
+        generators.dart.forBlock[blockName] = colourPickerGenDart;
+    }
+    if (generators.lua) {
+        generators.lua.forBlock[blockName] = colourPickerGenLua;
+    }
+    if (generators.php) {
+        generators.php.forBlock[blockName] = colourPickerGenPhp;
+    }
+    if (generators.python) {
+        generators.python.forBlock[blockName] = colourPickerGenPython;
+    }
+}

plugins/field-colour/src/field_colour.ts

@@ -729,12 +729,20 @@ export class FieldColour extends Blockly.Field<string> {
 /** The default value for this field. */
 FieldColour.prototype.DEFAULT_VALUE = '#ffffff';
 
-// Unregister legacy field_colour that was in core.  Delete this once
-// core Blockly no longer defines field_colour.
-// If field_colour is not defined in core, this generates a console warning.
-Blockly.fieldRegistry.unregister('field_colour');
+/**
+ * Register the field and any dependencies.
+ */
+export function registerColourField() {
+  // Unregister legacy field_colour that was in core.  Delete this once
+  // core Blockly no longer defines field_colour.
+  // If field_colour is not defined in core, this generates a console warning.
+  Blockly.fieldRegistry.unregister('field_colour');
+
+  Blockly.fieldRegistry.register('field_colour', FieldColour);
+};
 
-Blockly.fieldRegistry.register('field_colour', FieldColour);
+// Immediately register the field.
+registerColourField();
 
 /**
  * CSS for colour picker.

plugins/field-colour/src/index.ts

@@ -5,3 +5,5 @@
  */
 
 export * from './field_colour';
+
+export * from './blocks';

plugins/field-multilineinput/src/blocks.ts

@@ -0,0 +1,59 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as Blockly from 'blockly';
+import { registerMultilineInputField } from './field_multilineinput';
+
+const multilineTextDef = {
+    'type': 'text_multiline',
+    'message0': '%1 %2',
+    'args0': [
+        {
+            'type': 'field_image',
+            'src':
+                'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAARCAYAAADpP' +
+                'U2iAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAdhgAAHYYBXaITgQAAABh0RVh0' +
+                'U29mdHdhcmUAcGFpbnQubmV0IDQuMS42/U4J6AAAAP1JREFUOE+Vks0KQUEYhjm' +
+                'RIja4ABtZ2dm5A3t3Ia6AUm7CylYuQRaUhZSlLZJiQbFAyRnPN33y01HOW08z88' +
+                '73zpwzM4F3GWOCruvGIE4/rLaV+Nq1hVGMBqzhqlxgCys4wJA65xnogMHsQ5luj' +
+                'nYHTejBBCK2mE4abjCgMGhNxHgDFWjDSG07kdfVa2pZMf4ZyMAdWmpZMfYOsLiD' +
+                'MYMjlMB+K613QISRhTnITnsYg5yUd0DETmEoMlkFOeIT/A58iyK5E18BuTBfgYX' +
+                'fwNJv4P9/oEBerLylOnRhygmGdPpTTBZAPkde61lbQe4moWUvYUZYLfUNftIY4z' +
+                'wA5X2Z9AYnQrEAAAAASUVORK5CYII=',
+            'width': 12,
+            'height': 17,
+            'alt': '\u00B6',
+        },
+        {
+            'type': 'field_multilinetext',
+            'name': 'TEXT',
+            'text': '',
+        },
+    ],
+    'output': 'String',
+    'style': 'text_blocks',
+    'helpUrl': '%{BKY_TEXT_TEXT_HELPURL}',
+    'tooltip': '%{BKY_TEXT_TEXT_TOOLTIP}',
+    'extensions': ['parent_tooltip_when_inline'],
+};
+
+// Helper function to define a single block from a JSON definition.
+function defineBlockFromJson(blockJsonDef: any) {
+    Blockly.common.defineBlocks(
+        Blockly.common.createBlockDefinitionsFromJsonArray([blockJsonDef]));
+}
+
+/**
+ * Install all of the blocks defined in this file and all of their
+ * dependencies.
+ */
+export function installAllBlocks() {
+    defineBlockFromJson(multilineTextDef);
+    registerMultilineInputField();
+}
+
+// Calling this installs blocks, which means it has side effects.
+installAllBlocks();