Add default toolbox categories

Also make the toolbox actually get used by scratch-blocks, and update the import of scratch-blocks to use the new shimming method.

src/components/blocks.js

 const defaultsDeep = require('lodash.defaultsdeep');
 const React = require('react');
-const ScratchBlocks = require('scratch-blocks/blocks_compressed_vertical');
+const ScratchBlocks = require('scratch-blocks');
 
 class Blocks extends React.Component {
-    constructor (props) {
-        super(props);
-        this.mountBlocks = this.mountBlocks.bind(this);
-    }
-    mountBlocks (component) {
-        this.workspace = ScratchBlocks.inject(
-            component,
-            defaultsDeep({}, this.props.options, Blocks.defaultOptions)
-        );
-        if (this.props.vm) {
-            this.workspace.addChangeListener(this.props.vm.blockListener);
+    componentDidUpdate (prevProps) {
+        if (!prevProps.options.toolbox && this.props.options.toolbox) {
+            let workspaceConfig = defaultsDeep({}, Blocks.defaultOptions, this.props.options);
+            this.workspace = ScratchBlocks.inject(this.refs.scratchBlocks, workspaceConfig);
+            if (this.props.vm) {
+                this.workspace.addChangeListener(this.props.vm.blockListener);
+            }
         }
     }
     render () {
         return (
             <div
                 className="scratch-blocks"
-                ref={this.mountBlocks} />
+                ref="scratchBlocks"
+            />
         );
     }
 }
 
 Blocks.propTypes = {
     options: React.PropTypes.shape({
-        toolbox: React.PropTypes.element,
+        // The toolbox is actually an element, but React doesn't agree :/
+        toolbox: React.PropTypes.object,
         media: React.PropTypes.string,
         zoom: React.PropTypes.shape({
             controls: React.PropTypes.boolean,

src/components/gui.js

@@ -4,13 +4,19 @@ const Blocks = require('./blocks');
 const Toolbox = require('./toolbox');
 
 class GUI extends React.Component {
+    constructor (props) {
+        this.state = {};
+    }
+    componentDidMount () {
+        this.setState({toolbox: this._toolbox});
+    }
     render () {
         return (
             <div className="scratch-gui">
-                <Toolbox ref={toolbox => this.toolbox = toolbox} />
+                <Toolbox toolboxRef={(toolbox) => this._toolbox = toolbox} />
                 <Blocks
                     options={{
-                        toolbox: this.toolbox
+                        toolbox: this.state.toolbox
                     }}
                     vm={this.props.vm}
                 />