Make it possible to choose the renderer at runtime, with a constant.

core/block_render_svg.js

@@ -27,6 +27,7 @@
 
 goog.provide('Blockly.BlockSvg.render');
 
+goog.require('Blockly.blockRendering');
 goog.require('Blockly.BlockSvg');
 goog.require('Blockly.utils.dom');
 
@@ -311,15 +312,11 @@ Blockly.BlockSvg.prototype.getHeightWidth = function() {
 };
 
 /**
- * Render the block.
- * Lays out and reflows a block based on its contents and settings.
- * @param {boolean=} opt_bubble If false, just render this block.
- *   If true, also render block's parent, grandparent, etc.  Defaults to true.
+ * Render just this block.
+ * Developers should not call this directly.  Instead, call block.render().
+ * @package
  */
-Blockly.BlockSvg.prototype.render = function(opt_bubble) {
-  Blockly.Field.startCache();
-  this.rendered = true;
-
+Blockly.BlockSvg.prototype.renderInternal = function() {
   var cursorX = Blockly.BlockSvg.SEP_SPACE_X;
   if (this.RTL) {
     cursorX = -cursorX;
@@ -337,18 +334,6 @@ Blockly.BlockSvg.prototype.render = function(opt_bubble) {
   var inputRows = this.renderCompute_(cursorX);
   this.renderDraw_(cursorX, inputRows);
   this.renderMoveConnections_();
-
-  if (opt_bubble !== false) {
-    // Render all blocks above this one (propagate a reflow).
-    var parentBlock = this.getParent();
-    if (parentBlock) {
-      parentBlock.render(true);
-    } else {
-      // Top-most block.  Fire an event to allow scrollbars to resize.
-      this.workspace.resizeContents();
-    }
-  }
-  Blockly.Field.stopCache();
 };
 
 /**

core/block_svg.js

@@ -1499,3 +1499,31 @@ Blockly.BlockSvg.prototype.scheduleSnapAndBump = function() {
     Blockly.Events.setGroup(false);
   }, Blockly.BUMP_DELAY);
 };
+
+/**
+ * Render the block.
+ * Lays out and reflows a block based on its contents and settings.
+ * @param {boolean=} opt_bubble If false, just render this block.
+ *   If true, also render block's parent, grandparent, etc.  Defaults to true.
+ */
+Blockly.BlockSvg.prototype.render = function(opt_bubble) {
+  Blockly.Field.startCache();
+  this.rendered = true;
+  // TODO (#2702): Choose an API for picking the renderer.
+  if (Blockly.renderMode == 'compatibility') {
+    Blockly.blockRendering.render(this);
+  } else {
+    this.renderInternal();
+  }
+  if (opt_bubble !== false) {
+    // Render all blocks above this one (propagate a reflow).
+    var parentBlock = this.getParent();
+    if (parentBlock) {
+      parentBlock.render(true);
+    } else {
+      // Top-most block.  Fire an event to allow scrollbars to resize.
+      this.workspace.resizeContents();
+    }
+  }
+  Blockly.Field.stopCache();
+};

core/renderers/block_rendering_rewrite/block_rendering.js

@@ -24,6 +24,7 @@
  */
 
 'use strict';
+
 /**
  * The top level namespace for block rendering.
  * @namespace Blockly.blockRendering
@@ -35,7 +36,8 @@ goog.require('Blockly.blockRendering.Drawer');
 goog.require('Blockly.blockRendering.RenderInfo');
 
 /**
- * Render the given block.
+ * Render the given block, using the new rendering.
+ * Developers should not call this directly.  Instead, call block.render().
  * @param {!Blockly.BlockSvg} block The block to render
  * @public
  */
@@ -45,4 +47,7 @@ Blockly.blockRendering.render = function(block) {
   }
   var info = new Blockly.blockRendering.RenderInfo(block);
   new Blockly.blockRendering.Drawer(block, info).draw_();
+
+  // TODO: Fix moving connections in the new rendering code.
+  block.renderMoveConnections_();
 };

tests/playground.html

@@ -71,6 +71,7 @@
 var workspace = null;
 
 function start() {
+  Blockly.renderMode = 'compatibility';
   setBackgroundColour();
 
   // Parse the URL arguments.