diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 94cf25a59342a066a2e88b561cb41604e5ba461f..312ba4cc0ffebba144002db5ae7e4c459f4339ec 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -301,12 +301,17 @@ class Blocks extends React.Component {
     onWorkspaceMetricsChange () {
         const target = this.props.vm.editingTarget;
         if (target && target.id) {
-            this.props.updateMetrics({
-                targetID: target.id,
-                scrollX: this.workspace.scrollX,
-                scrollY: this.workspace.scrollY,
-                scale: this.workspace.scale
-            });
+            // Dispatch updateMetrics later, since onWorkspaceMetricsChange may be (very indirectly)
+            // called from a reducer, i.e. when you create a custom procedure.
+            // TODO: Is this a vehement hack?
+            setTimeout(() => {
+                this.props.updateMetrics({
+                    targetID: target.id,
+                    scrollX: this.workspace.scrollX,
+                    scrollY: this.workspace.scrollY,
+                    scale: this.workspace.scale
+                });
+            }, 0);
         }
     }
     onScriptGlowOn (data) {
@@ -353,7 +358,7 @@ class Blocks extends React.Component {
             this.props.updateToolboxState(toolboxXML);
         }
 
-        if (this.props.vm.editingTarget && !this.props.workspaceMetrics[this.props.vm.editingTarget.id]) {
+        if (this.props.vm.editingTarget && !this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id]) {
             this.onWorkspaceMetricsChange();
         }
 
@@ -379,8 +384,8 @@ class Blocks extends React.Component {
         }
         this.workspace.addChangeListener(this.props.vm.blockListener);
 
-        if (this.props.vm.editingTarget && this.props.workspaceMetrics[this.props.vm.editingTarget.id]) {
-            const {scrollX, scrollY, scale} = this.props.workspaceMetrics[this.props.vm.editingTarget.id];
+        if (this.props.vm.editingTarget && this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id]) {
+            const {scrollX, scrollY, scale} = this.props.workspaceMetrics.targets[this.props.vm.editingTarget.id];
             this.workspace.scrollX = scrollX;
             this.workspace.scrollY = scrollY;
             this.workspace.scale = scale;
diff --git a/src/reducers/workspace-metrics.js b/src/reducers/workspace-metrics.js
index ca4dd1ec17ca7f192cb48f731ede5d6778c93293..de44cbe2675f9f738e614946eca3635eaebf67d3 100644
--- a/src/reducers/workspace-metrics.js
+++ b/src/reducers/workspace-metrics.js
@@ -1,24 +1,47 @@
+const UPDATE_DIMENSIONS = 'scratch-gui/workspace-metrics/UPDATE_DIMENSIONS';
 const UPDATE_METRICS = 'scratch-gui/workspace-metrics/UPDATE_METRICS';
 
-const initialState = {};
+const initialState = {
+    dimensions: {
+        width: 0,
+        height: 0
+    },
+    targets: {}
+};
 
 const reducer = function (state, action) {
     if (typeof state === 'undefined') state = initialState;
 
     switch (action.type) {
-    case UPDATE_METRICS:
+    case UPDATE_DIMENSIONS:
         return Object.assign({}, state, {
-            [action.targetID]: {
-                scrollX: action.scrollX,
-                scrollY: action.scrollY,
-                scale: action.scale
+            dimensions: {
+                width: action.width,
+                height: action.height
             }
         });
+    case UPDATE_METRICS:
+        return Object.assign({}, state, {
+            targets: Object.assign({}, state.targets, {
+                [action.targetID]: {
+                    scrollX: action.scrollX,
+                    scrollY: action.scrollY,
+                    scale: action.scale
+                }
+            })
+        });
     default:
         return state;
     }
 };
 
+const updateDimensions = function (dimensions) {
+    return {
+        type: UPDATE_DIMENSIONS,
+        ...dimensions
+    };
+};
+
 const updateMetrics = function (metrics) {
     return {
         type: UPDATE_METRICS,