Move TW blocks to a disabled-by-default extension

src/containers/blocks.jsx

@@ -130,6 +130,9 @@ class Blocks extends React.Component {
                 log.warn('cannot open docs URI', e);
             }
         });
+        toolboxWorkspace.registerButtonCallback('TW_MIGRATION', () => {
+            window.open('https://github.com/TurboWarp/scratch-gui/discussions/100');
+        });
 
         // Store the xml of the toolbox that is actually rendered.
         // This is used in componentDidUpdate instead of prevProps, because

src/lib/libraries/extensions/index.jsx

@@ -46,6 +46,8 @@ import gdxforInsetIconURL from './gdxfor/gdxfor-small.svg';
 import gdxforConnectionIconURL from './gdxfor/gdxfor-illustration.svg';
 import gdxforConnectionSmallIconURL from './gdxfor/gdxfor-small.svg';
 
+import twIcon from './tw/tw.svg';
+
 import customExtensionIcon from './custom/custom.svg';
 
 export default [
@@ -320,6 +322,25 @@ export default [
         ),
         helpLink: 'https://scratch.mit.edu/vernier'
     },
+    {
+        name: (
+            <FormattedMessage
+                defaultMessage="TurboWarp Blocks"
+                description="Name of TW extension"
+                id="tw.twExtension.name"
+            />
+        ),
+        extensionId: 'tw',
+        iconURL: twIcon,
+        description: (
+            <FormattedMessage
+                defaultMessage="Weird new blocks. Not compatible with Scratch."
+                description="Description of TW extension"
+                id="tw.twExtension.description"
+            />
+        ),
+        featured: true
+    },
     {
         name: (
             <FormattedMessage

src/lib/libraries/extensions/tw/tw.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   width="600"
+   height="372"
+   version="1.1"
+   viewBox="0 0 600 372"
+   id="svg6">
+  <rect
+     width="600"
+     height="372"
+     fill="#0fbd8c"
+     id="rect2"
+     style="fill:#ff4c4c;fill-opacity:1" />
+</svg>

src/lib/make-toolbox-xml.js

@@ -724,23 +724,15 @@ const myBlocks = function () {
 };
 
 // tw: add custom category
-const turbowarp = function () {
-    return `
-    <category
-        name="TurboWarp"
-        id="turbowarp"
-        colour="#FF4C4C"
-        secondaryColour="#FF3D3D">
-    </category>
-    `;
-};
-const turbowarpIsCompiledBlock = function () {
-    return `
-    <block type="argument_reporter_boolean">
-        <field name="VALUE">is compiled?</field>
-    </block>
-    `;
-};
+// eslint-disable-next-line max-len
+const turbowarpIsCompiledBlock = `<block type="argument_reporter_boolean"><field name="VALUE">is compiled?</field></block>`;
+const turbowarpCategory = `<category
+    name="TurboWarp"
+    id="tw"
+    colour="#FF4C4C"
+    secondaryColour="#FF3D3D">
+    <button text="The other blocks have moved" callbackKey="TW_MIGRATION"></button>
+    ${turbowarpIsCompiledBlock}</category>`;
 /* eslint-enable no-unused-vars */
 
 const xmlOpen = '<xml style="display: none">';
@@ -790,9 +782,11 @@ const makeToolboxXML = function (isInitialSetup, isStage = true, targetId, categ
     const variablesXML = moveCategory('data') || variables(isInitialSetup, isStage, targetId);
     const myBlocksXML = moveCategory('procedures') || myBlocks(isInitialSetup, isStage, targetId);
     // tw: add custom category
-    let turbowarpXML = moveCategory('tw') || turbowarp(isInitialSetup, isStage, targetId);
+    let turbowarpXML = moveCategory('tw') || turbowarpCategory;
     // terrible hack to add "is compiled" to the top of the category...
-    turbowarpXML = turbowarpXML.replace('<block', `${turbowarpIsCompiledBlock()}<block`);
+    if (!turbowarpXML.includes(turbowarpIsCompiledBlock)) {
+        turbowarpXML = turbowarpXML.replace('<block', `${turbowarpIsCompiledBlock}<block`);
+    }
 
     const everything = [
         xmlOpen,

src/lib/vm-manager-hoc.jsx

@@ -35,8 +35,6 @@ const vmManagerHOC = function (WrappedComponent) {
                 this.props.vm.setCompatibilityMode(true);
                 this.props.vm.initialized = true;
                 this.props.vm.setLocale(this.props.locale, this.props.messages);
-                // tw: load our extension automatically
-                this.props.vm.extensionManager.loadExtensionIdSync('tw');
                 /* eslint-disable no-console */
                 console.log('The VM is exposed as `vm`');
                 console.log('To log compiled scripts to the console, run `vm.enableDebug()`');