Allow custom blocks to return values - GUI part (#763)

* Add extension library item to enable procedure returns

* Don't warn about Scratch compatibility before showing custom extension modal

regression

* Implement return docs button

src/containers/blocks.jsx

@@ -85,7 +85,8 @@ class Blocks extends React.Component {
             'onWorkspaceUpdate',
             'onWorkspaceMetricsChange',
             'setBlocks',
-            'setLocale'
+            'setLocale',
+            'handleEnableProcedureReturns'
         ]);
         this.ScratchBlocks.prompt = this.handlePromptStart;
         this.ScratchBlocks.statusButtonCallback = this.handleConnectionModalStart;
@@ -138,6 +139,9 @@ class Blocks extends React.Component {
                 window.open(docsURI, '_blank');
             }
         });
+        toolboxWorkspace.registerButtonCallback('OPEN_RETURN_DOCS', () => {
+            window.open('https://docs.turbowarp.org/return', '_blank');
+        });
 
         // Store the xml of the toolbox that is actually rendered.
         // This is used in componentDidUpdate instead of prevProps, because
@@ -565,6 +569,10 @@ class Blocks extends React.Component {
                 this.updateToolbox(); // To show new variables/custom blocks
             });
     }
+    handleEnableProcedureReturns () {
+        this.workspace.enableProcedureReturns();
+        this.requestToolboxUpdate();
+    }
     render () {
         /* eslint-disable no-unused-vars */
         const {
@@ -617,6 +625,7 @@ class Blocks extends React.Component {
                     <ExtensionLibrary
                         vm={vm}
                         onCategorySelected={this.handleCategorySelected}
+                        onEnableProcedureReturns={this.handleEnableProcedureReturns}
                         onRequestClose={onRequestCloseExtensionLibrary}
                         onOpenCustomExtensionModal={this.props.onOpenCustomExtensionModal}
                     />

src/containers/extension-library.jsx

@@ -38,6 +38,8 @@ class ExtensionLibrary extends React.PureComponent {
         }
 
         const extensionId = item.extensionId;
+
+        // Don't warn about Scratch compatibility before showing modal
         const isCustomURL = !item.disabled && !extensionId;
         if (isCustomURL) {
             this.props.onOpenCustomExtensionModal();
@@ -49,6 +51,12 @@ class ExtensionLibrary extends React.PureComponent {
             return;
         }
 
+        if (extensionId === 'procedures_enable_return') {
+            this.props.onEnableProcedureReturns();
+            this.props.onCategorySelected('myBlocks');
+            return;
+        }
+
         const url = item.extensionURL ? item.extensionURL : extensionId;
         if (!item.disabled) {
             if (this.props.vm.extensionManager.isExtensionLoaded(extensionId)) {
@@ -89,6 +97,7 @@ class ExtensionLibrary extends React.PureComponent {
 ExtensionLibrary.propTypes = {
     intl: intlShape.isRequired,
     onCategorySelected: PropTypes.func,
+    onEnableProcedureReturns: PropTypes.func,
     onOpenCustomExtensionModal: PropTypes.func,
     onRequestClose: PropTypes.func,
     visible: PropTypes.bool,

src/lib/libraries/extensions/index.jsx

@@ -73,6 +73,7 @@ import box2dIcon from './gallery/box2d.svg';
 import localStorageIcon from './gallery/local-storage.svg';
 import bigIntIcon from './gallery/bigint.svg';
 import jsonIcon from './gallery/json.svg';
+import returnIcon from './custom/return.svg';
 
 const galleryItem = object => ({
     ...object,
@@ -364,6 +365,28 @@ export default [
         ),
         helpLink: 'https://scratch.mit.edu/vernier'
     },
+    {
+        // not really an extension, but it's easiest to present it as one
+        name: (
+            <FormattedMessage
+                defaultMessage="Custom Reporters"
+                description="Name of custom reporters extension"
+                id="tw.customReporters.name"
+            />
+        ),
+        extensionId: 'procedures_enable_return',
+        iconURL: returnIcon,
+        description: (
+            <FormattedMessage
+                defaultMessage="Allow custom blocks to output values and be used as inputs."
+                description="Description of custom reporters extension"
+                id="tw.customReporters.description"
+            />
+        ),
+        tags: ['tw'],
+        incompatibleWithScratch: true,
+        featured: true
+    },
     {
         name: (
             <FormattedMessage