diff --git a/src/containers/custom-procedures.jsx b/src/containers/custom-procedures.jsx
index d594aba2b227163e2ec7802cce3dc284c2362bc4..002a5c4b79cb71b80807de9f6847a0f7adc43ce6 100644
--- a/src/containers/custom-procedures.jsx
+++ b/src/containers/custom-procedures.jsx
@@ -39,16 +39,18 @@ class CustomProcedures extends React.Component {
 
         // Create the procedure declaration block for editing the mutation.
         this.mutationRoot = this.workspace.newBlock('procedures_declaration');
-        this.workspace.addChangeListener(() => this.mutationRoot.onChangeFn());
+        this.workspace.addChangeListener(() => {
+            this.mutationRoot.onChangeFn();
+            // Keep the block centered on the workspace
+            const metrics = this.workspace.getMetrics();
+            const {x, y} = this.mutationRoot.getRelativeToSurfaceXY();
+            const dx = (metrics.viewWidth / 2) - (this.mutationRoot.width / 2) - x;
+            const dy = (metrics.viewHeight / 2) - (this.mutationRoot.height / 2) - y;
+            this.mutationRoot.moveBy(dx, dy);
+        });
         this.mutationRoot.domToMutation(this.props.mutator);
         this.mutationRoot.initSvg();
         this.mutationRoot.render();
-
-        // Center the procedure declaration block.
-        const metrics = this.workspace.getMetrics();
-        const dx = (metrics.viewWidth / 2) - (this.mutationRoot.width / 2);
-        const dy = (metrics.viewHeight / 2) - (this.mutationRoot.height / 2);
-        this.mutationRoot.moveBy(dx, dy);
     }
     handleCancel () {
         this.props.onRequestClose();