Fix themes for dynamic blocks

TurboWarp · Jan 12, 2024 · 172c6d7 · 172c6d7
1 parent 6869d1f
commit 172c6d7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 6 deletions.
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
@@ -538,8 +538,13 @@ class Blocks extends React.Component {
                     // The factory should only know static info about the block: the category info and the opcode.
                     // Anything else will be picked up from the XML attached to the block instance.
                     const extendedOpcode = `${categoryInfo.id}_${blockInfo.info.opcode}`;
-                    const blockDefinition =
-                        defineDynamicBlock(this.ScratchBlocks, categoryInfo, blockInfo, extendedOpcode);
+                    const blockDefinition = defineDynamicBlock(
+                        this.ScratchBlocks,
+                        categoryInfo,
+                        blockInfo,
+                        extendedOpcode,
+                        this.props.theme
+                    );
                     this.ScratchBlocks.Blocks[extendedOpcode] = blockDefinition;
                 });
             }

diff --git a/src/lib/define-dynamic-block.js b/src/lib/define-dynamic-block.js
@@ -2,6 +2,7 @@
 // Should we move these into a new extension support module or something?
 import ArgumentType from 'scratch-vm/src/extension-support/argument-type';
 import BlockType from 'scratch-vm/src/extension-support/block-type';
+import {injectExtensionBlockTheme} from './themes/blockHelpers';
 
 /**
  * Define a block using extension info which has the ability to dynamically determine (and update) its layout.
@@ -12,17 +13,20 @@ import BlockType from 'scratch-vm/src/extension-support/block-type';
  * @param {object} categoryInfo - Information about this block's extension category, including any menus and icons.
  * @param {object} staticBlockInfo - The base block information before any dynamic changes.
  * @param {string} extendedOpcode - The opcode for the block (including the extension ID).
+ * @param {Theme} theme - the current theme
  */
 // TODO: grow this until it can fully replace `_convertForScratchBlocks` in the VM runtime
-const defineDynamicBlock = (ScratchBlocks, categoryInfo, staticBlockInfo, extendedOpcode) => ({
+const defineDynamicBlock = (ScratchBlocks, categoryInfo, staticBlockInfo, extendedOpcode, theme) => ({
     init: function () {
+        const colors = injectExtensionBlockTheme(staticBlockInfo.json, theme);
         const blockJson = {
             type: extendedOpcode,
             inputsInline: true,
             category: categoryInfo.name,
-            colour: categoryInfo.color1,
-            colourSecondary: categoryInfo.color2,
-            colourTertiary: categoryInfo.color3
+            colour: colors.colour,
+            colourSecondary: colors.colourSecondary,
+            colourTertiary: colors.colourTertiary,
+            colourQuaternary: colors.colourQuaternary
         };
         // There is a scratch-blocks / Blockly extension called "scratch_extension" which adjusts the styling of
         // blocks to allow for an icon, a feature of Scratch extension blocks. However, Scratch "core" extension