diff --git a/blockly_uncompressed.js b/blockly_uncompressed.js
index efbef4026..b89c8d7c9 100644
--- a/blockly_uncompressed.js
+++ b/blockly_uncompressed.js
@@ -92,14 +92,15 @@ goog.addDependency("../../../" + dir + "/core/names.js", ['Blockly.Names'], []);
 goog.addDependency("../../../" + dir + "/core/options.js", ['Blockly.Options'], ['Blockly.Themes.Classic', 'Blockly.utils.userAgent', 'Blockly.Xml']);
 goog.addDependency("../../../" + dir + "/core/procedures.js", ['Blockly.Procedures'], ['Blockly.Blocks', 'Blockly.constants', 'Blockly.Events', 'Blockly.Events.BlockChange', 'Blockly.Field', 'Blockly.Msg', 'Blockly.Names', 'Blockly.utils.xml', 'Blockly.Workspace', 'Blockly.Xml']);
 goog.addDependency("../../../" + dir + "/core/rendered_connection.js", ['Blockly.RenderedConnection'], ['Blockly.Connection', 'Blockly.Events', 'Blockly.utils', 'Blockly.utils.Coordinate', 'Blockly.utils.dom']);
-goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw.js", ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Highlighter', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
-goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_debug.js", ['Blockly.blockRendering.Debug'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Highlighter', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
-goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js", ['Blockly.blockRendering.Highlighter'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
+goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw.js", ['Blockly.blockRendering.Drawer'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
+goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_draw_debug.js", ['Blockly.blockRendering.Debug'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_render_info.js", ['Blockly.blockRendering.RenderInfo'], ['Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection']);
-goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.HighlightConstantProvider', 'Blockly.geras.RenderInfo', 'Blockly.thrasos.RenderInfo', 'Blockly.zelos.RenderInfo']);
+goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering.js", ['Blockly.blockRendering'], ['Blockly.blockRendering.Debug', 'Blockly.blockRendering.Drawer', 'Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.ConstantProvider', 'Blockly.geras.HighlightConstantProvider', 'Blockly.geras.RenderInfo', 'Blockly.geras.Drawer', 'Blockly.thrasos.RenderInfo', 'Blockly.zelos.RenderInfo']);
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/block_rendering_constants.js", ['Blockly.blockRendering.ConstantProvider'], ['Blockly.utils.svgPaths']);
-goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/highlight_constants.js", ['Blockly.blockRendering.HighlightConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.svgPaths']);
 goog.addDependency("../../../" + dir + "/core/renderers/block_rendering_rewrite/measurables.js", ['Blockly.blockRendering.InRowSpacer'], ['Blockly.blockRendering.Measurable']);
+goog.addDependency("../../../" + dir + "/core/renderers/geras/drawer.js", ['Blockly.geras.Drawer'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.blockRendering.Drawer', 'Blockly.geras.Highlighter', 'Blockly.geras.RenderInfo']);
+goog.addDependency("../../../" + dir + "/core/renderers/geras/highlight_constants.js", ['Blockly.geras.HighlightConstantProvider'], ['Blockly.blockRendering.ConstantProvider', 'Blockly.utils.svgPaths']);
+goog.addDependency("../../../" + dir + "/core/renderers/geras/highlighter.js", ['Blockly.geras.Highlighter'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow']);
 goog.addDependency("../../../" + dir + "/core/renderers/geras/info.js", ['Blockly.geras', 'Blockly.geras.RenderInfo'], ['Blockly.blockRendering.RenderInfo', 'Blockly.blockRendering.Measurable', 'Blockly.blockRendering.BottomRow', 'Blockly.blockRendering.InputRow', 'Blockly.blockRendering.Row', 'Blockly.blockRendering.SpacerRow', 'Blockly.blockRendering.TopRow', 'Blockly.blockRendering.InlineInput', 'Blockly.blockRendering.ExternalValueInput', 'Blockly.blockRendering.StatementInput', 'Blockly.blockRendering.PreviousConnection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.RenderedConnection']);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/base.js", ['Blockly.blockRendering.Measurable'], []);
 goog.addDependency("../../../" + dir + "/core/renderers/measurables/connections.js", ['Blockly.blockRendering.Connection', 'Blockly.blockRendering.NextConnection', 'Blockly.blockRendering.OutputConnection', 'Blockly.blockRendering.PreviousConnection'], ['Blockly.blockRendering.Measurable', 'Blockly.RenderedConnection']);
@@ -267,8 +268,6 @@ goog.require('Blockly.blockRendering.ConstantProvider');
 goog.require('Blockly.blockRendering.Debug');
 goog.require('Blockly.blockRendering.Drawer');
 goog.require('Blockly.blockRendering.ExternalValueInput');
-goog.require('Blockly.blockRendering.HighlightConstantProvider');
-goog.require('Blockly.blockRendering.Highlighter');
 goog.require('Blockly.blockRendering.InRowSpacer');
 goog.require('Blockly.blockRendering.InlineInput');
 goog.require('Blockly.blockRendering.InputConnection');
@@ -285,6 +284,9 @@ goog.require('Blockly.blockRendering.TopRow');
 goog.require('Blockly.constants');
 goog.require('Blockly.fieldRegistry');
 goog.require('Blockly.geras');
+goog.require('Blockly.geras.Drawer');
+goog.require('Blockly.geras.HighlightConstantProvider');
+goog.require('Blockly.geras.Highlighter');
 goog.require('Blockly.geras.RenderInfo');
 goog.require('Blockly.inject');
 goog.require('Blockly.navigation');
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw.js b/core/renderers/block_rendering_rewrite/block_render_draw.js
index ce286c7ec..15bd03f72 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw.js
@@ -28,7 +28,6 @@ goog.provide('Blockly.blockRendering.Drawer');
 
 goog.require('Blockly.blockRendering.Debug');
 goog.require('Blockly.blockRendering.RenderInfo');
-goog.require('Blockly.blockRendering.Highlighter');
 goog.require('Blockly.blockRendering.Measurable');
 goog.require('Blockly.blockRendering.BottomRow');
 goog.require('Blockly.blockRendering.InputRow');
@@ -52,9 +51,6 @@ Blockly.blockRendering.Drawer = function(block, info) {
   this.outlinePath_ = '';
   this.inlinePath_ = '';
   this.pathObject_ = new Blockly.BlockSvg.PathObject();
-  this.highlighter_ =
-      new Blockly.blockRendering.Highlighter(this.info_, this.pathObject_);
-
   this.constants_ = Blockly.blockRendering.getConstants();
 };
 
@@ -66,9 +62,9 @@ Blockly.blockRendering.Drawer = function(block, info) {
  * joined with spaces and set directly on the block.  This guarantees that
  * the steps are separated by spaces for improved readability, but isn't
  * required.
- * @private
+ * @package
  */
-Blockly.blockRendering.Drawer.prototype.draw_ = function() {
+Blockly.blockRendering.Drawer.prototype.draw = function() {
   this.hideHiddenIcons_();
   this.drawOutline_();
   this.drawInternals_();
@@ -86,7 +82,7 @@ Blockly.blockRendering.Drawer.prototype.draw_ = function() {
  * Save sizing information back to the block
  * Most of the rendering information can be thrown away at the end of the render.
  * Anything that needs to be kept around should be set in this function.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.recordSizeOnBlock_ = function() {
   // This is used when the block is reporting its size to anyone else.
@@ -99,7 +95,7 @@ Blockly.blockRendering.Drawer.prototype.recordSizeOnBlock_ = function() {
 
 /**
  * Hide icons that were marked as hidden.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.hideHiddenIcons_ = function() {
   for (var i = 0, iconInfo; (iconInfo = this.info_.hiddenIcons[i]); i++) {
@@ -109,7 +105,7 @@ Blockly.blockRendering.Drawer.prototype.hideHiddenIcons_ = function() {
 
 /**
  * Create the outline of the block.  This is a single continuous path.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawOutline_ = function() {
   this.drawTop_();
@@ -133,16 +129,12 @@ Blockly.blockRendering.Drawer.prototype.drawOutline_ = function() {
 /**
  * Add steps for the top corner of the block, taking into account
  * details such as hats and rounded corners.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
   var topRow = this.info_.topRow;
   var elements = topRow.elements;
 
-  if (this.highlighter_) {
-    this.highlighter_.drawTopCorner(topRow);
-    this.highlighter_.drawRightSideRow(topRow);
-  }
   this.positionPreviousConnection_();
   this.outlinePath_ +=
       Blockly.utils.svgPaths.moveBy(topRow.xPos, this.info_.startY);
@@ -165,12 +157,9 @@ Blockly.blockRendering.Drawer.prototype.drawTop_ = function() {
 /**
  * Add steps for the jagged edge of a row on a collapsed block.
  * @param {!Blockly.blockRendering.Row} row The row to draw the side of.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawJaggedEdge_ = function(row) {
-  if (this.highlighter_) {
-    this.highlighter_.drawJaggedEdge_(row);
-  }
   var remainder =
       row.height - this.constants_.JAGGED_TEETH.height;
   this.outlinePath_ += this.constants_.JAGGED_TEETH.path +
@@ -182,13 +171,10 @@ Blockly.blockRendering.Drawer.prototype.drawJaggedEdge_ = function(row) {
  * of the block.
  * @param {!Blockly.blockRendering.Row} row The row that this input
  *     belongs to.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
   var input = row.getLastInput();
-  if (this.highlighter_) {
-    this.highlighter_.drawValueInput(row);
-  }
   this.positionExternalValueConnection_(row);
 
   this.outlinePath_ +=
@@ -202,12 +188,9 @@ Blockly.blockRendering.Drawer.prototype.drawValueInput_ = function(row) {
  * Add steps for a statement input.
  * @param {!Blockly.blockRendering.Row} row The row that this input
  *     belongs to.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
-  if (this.highlighter_) {
-    this.highlighter_.drawStatementInput(row);
-  }
   var input = row.getLastInput();
   // Where to start drawing the notch, which is on the right side in LTR.
   var x = input.xPos + input.width;
@@ -234,12 +217,9 @@ Blockly.blockRendering.Drawer.prototype.drawStatementInput_ = function(row) {
  * statement input connections.
  * @param {!Blockly.blockRendering.Row} row The row to draw the
  *     side of.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
-  if (this.highlighter_) {
-    this.highlighter_.drawRightSideRow(row);
-  }
   this.outlinePath_ +=
       Blockly.utils.svgPaths.lineOnAxis('H', row.xPos + row.width) +
       Blockly.utils.svgPaths.lineOnAxis('V', row.yPos + row.height);
@@ -249,14 +229,11 @@ Blockly.blockRendering.Drawer.prototype.drawRightSideRow_ = function(row) {
 /**
  * Add steps for the bottom edge of a block, possibly including a notch
  * for the next connection
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
   var bottomRow = this.info_.bottomRow;
   var elems = bottomRow.elements;
-  if (this.highlighter_) {
-    this.highlighter_.drawBottomRow(bottomRow);
-  }
   this.positionNextConnection_();
 
   this.outlinePath_ +=
@@ -278,13 +255,9 @@ Blockly.blockRendering.Drawer.prototype.drawBottom_ = function() {
 /**
  * Add steps for the left side of the block, which may include an output
  * connection
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
-  if (this.highlighter_) {
-    this.highlighter_.drawLeft();
-  }
-
   var outputConnection = this.info_.outputConnection;
   this.positionOutputConnection_();
 
@@ -304,7 +277,7 @@ Blockly.blockRendering.Drawer.prototype.drawLeft_ = function() {
 /**
  * Draw the internals of the block: inline inputs, fields, and icons.  These do
  * not depend on the outer path for placement.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawInternals_ = function() {
   for (var i = 0, row; (row = this.info_.rows[i]); i++) {
@@ -322,7 +295,7 @@ Blockly.blockRendering.Drawer.prototype.drawInternals_ = function() {
  * Push a field or icon's new position to its SVG root.
  * @param {!Blockly.blockRendering.Icon|!Blockly.blockRendering.Field} fieldInfo
  *     The rendering information for the field or icon.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.layoutField_ = function(fieldInfo) {
   if (fieldInfo.isField()) {
@@ -361,12 +334,9 @@ Blockly.blockRendering.Drawer.prototype.layoutField_ = function(fieldInfo) {
  * Add steps for an inline input.
  * @param {Blockly.blockRendering.InlineInput} input The information about the
  * input to render.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
-  if (this.highlighter_) {
-    this.highlighter_.drawInlineInput(input);
-  }
   var width = input.width;
   var height = input.height;
   var yPos = input.centerline - height / 2;
@@ -392,7 +362,7 @@ Blockly.blockRendering.Drawer.prototype.drawInlineInput_ = function(input) {
  * parent block's dark path show through.
  * @param {Blockly.blockRendering.InlineInput} input The information about
  * the input that the connection is on.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = function(input) {
   var yPos = input.centerline - input.height / 2;
@@ -415,7 +385,7 @@ Blockly.blockRendering.Drawer.prototype.positionInlineInputConnection_ = functio
  * RTL and the small gap between the parent block and child block which lets the
  * parent block's dark path show through.
  * @param {!Blockly.blockRendering.Row} row The row that the connection is on.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = function(row) {
   var input = row.getLastInput();
@@ -435,7 +405,7 @@ Blockly.blockRendering.Drawer.prototype.positionStatementInputConnection_ = func
  * RTL and the small gap between the parent block and child block which lets the
  * parent block's dark path show through.
  * @param {!Blockly.blockRendering.Row} row The row that the connection is on.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = function(row) {
   var input = row.getLastInput();
@@ -451,7 +421,7 @@ Blockly.blockRendering.Drawer.prototype.positionExternalValueConnection_ = funct
 
 /**
  * Position the previous connection on a block.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function() {
   var topRow = this.info_.topRow;
@@ -464,7 +434,7 @@ Blockly.blockRendering.Drawer.prototype.positionPreviousConnection_ = function()
 
 /**
  * Position the next connection on a block.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
   var bottomRow = this.info_.bottomRow;
@@ -481,7 +451,7 @@ Blockly.blockRendering.Drawer.prototype.positionNextConnection_ = function() {
 
 /**
  * Position the output connection on a block.
- * @private
+ * @protected
  */
 Blockly.blockRendering.Drawer.prototype.positionOutputConnection_ = function() {
   if (this.info_.outputConnection) {
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
index 1fb7e36b7..5c829ff2b 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
+++ b/core/renderers/block_rendering_rewrite/block_render_draw_debug.js
@@ -27,7 +27,6 @@
 goog.provide('Blockly.blockRendering.Debug');
 
 goog.require('Blockly.blockRendering.RenderInfo');
-goog.require('Blockly.blockRendering.Highlighter');
 goog.require('Blockly.blockRendering.Measurable');
 goog.require('Blockly.blockRendering.BottomRow');
 goog.require('Blockly.blockRendering.InputRow');
diff --git a/core/renderers/block_rendering_rewrite/block_rendering.js b/core/renderers/block_rendering_rewrite/block_rendering.js
index 161566836..4880cc942 100644
--- a/core/renderers/block_rendering_rewrite/block_rendering.js
+++ b/core/renderers/block_rendering_rewrite/block_rendering.js
@@ -34,12 +34,16 @@ goog.require('Blockly.blockRendering.Debug');
 goog.require('Blockly.blockRendering.Drawer');
 goog.require('Blockly.blockRendering.RenderInfo');
 goog.require('Blockly.blockRendering.ConstantProvider');
-goog.require('Blockly.blockRendering.HighlightConstantProvider');
+goog.require('Blockly.geras.HighlightConstantProvider');
 
 goog.require('Blockly.geras.RenderInfo');
+goog.require('Blockly.geras.Drawer');
 goog.require('Blockly.thrasos.RenderInfo');
 goog.require('Blockly.zelos.RenderInfo');
 
+// TODO (#2702): Pick an API for choosing a renderer.
+Blockly.blockRendering.rendererName = 'geras';
+
 /**
  * Initialize anything needed for rendering (constants, etc).
  * @package
@@ -47,8 +51,10 @@ goog.require('Blockly.zelos.RenderInfo');
 Blockly.blockRendering.init = function() {
   Blockly.blockRendering.constants =
       new Blockly.blockRendering.ConstantProvider();
+  // No one else has a highlight provider.  It's possible this should only be
+  // created if we're rendering with geras.
   Blockly.blockRendering.highlightConstants =
-      new Blockly.blockRendering.HighlightConstantProvider();
+      new Blockly.geras.HighlightConstantProvider();
 };
 
 /**
@@ -61,8 +67,16 @@ Blockly.blockRendering.render = function(block) {
   if (!block.renderingDebugger) {
     block.renderingDebugger = new Blockly.blockRendering.Debug();
   }
-  var info = new Blockly.geras.RenderInfo(block);
-  new Blockly.blockRendering.Drawer(block, info).draw_();
+  if (Blockly.blockRendering.rendererName == 'geras') {
+    var info = new Blockly.geras.RenderInfo(block);
+    new Blockly.geras.Drawer(block, info).draw();
+  } else if (Blockly.blockRendering.rendererName == 'thrasos') {
+    var info = new Blockly.thrasos.RenderInfo(block);
+    new Blockly.blockRendering.Drawer(block, info).draw();
+  } else if (Blockly.blockRendering.rendererName == 'zelos') {
+    var info = new Blockly.zelos.RenderInfo(block);
+    new Blockly.blockRendering.Drawer(block, info).draw();
+  }
 };
 
 Blockly.blockRendering.getConstants = function() {
diff --git a/core/renderers/geras/drawer.js b/core/renderers/geras/drawer.js
new file mode 100644
index 000000000..82461e7e5
--- /dev/null
+++ b/core/renderers/geras/drawer.js
@@ -0,0 +1,135 @@
+/**
+ * @license
+ * Visual Blocks Editor
+ *
+ * Copyright 2019 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Renderer that preserves the look and feel of Blockly pre-2019.
+ * @author fenichel@google.com (Rachel Fenichel)
+ */
+'use strict';
+
+goog.provide('Blockly.geras.Drawer');
+
+goog.require('Blockly.blockRendering.ConstantProvider');
+goog.require('Blockly.blockRendering.Drawer');
+goog.require('Blockly.geras.Highlighter');
+goog.require('Blockly.geras.RenderInfo');
+
+
+/**
+ * An object that draws a block based on the given rendering information.
+ * @param {!Blockly.BlockSvg} block The block to render.
+ * @param {!Blockly.geras.RenderInfo} info An object containing all
+ *   information needed to render this block.
+ * @package
+ * @constructor
+ * @extends {Blockly.blockRendering.Drawer}
+ */
+Blockly.geras.Drawer = function(block, info) {
+  Blockly.geras.Drawer.superClass_.constructor.call(this, block, info);
+  // Unlike Thrasos, Geras has highlights and drop shadows.
+  this.highlighter_ = new Blockly.geras.Highlighter(info, this.pathObject_);
+};
+goog.inherits(Blockly.geras.Drawer, Blockly.blockRendering.Drawer);
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.recordSizeOnBlock_ = function() {
+  // This is used when the block is reporting its size to anyone else.
+  // The dark path adds to the size of the block in both X and Y.
+  this.block_.height = this.info_.height +
+      this.constants_.DARK_PATH_OFFSET;
+  this.block_.width = this.info_.widthWithChildren +
+      this.constants_.DARK_PATH_OFFSET;
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawTop_ = function() {
+  this.highlighter_.drawTopCorner(this.info_.topRow);
+  this.highlighter_.drawRightSideRow(this.info_.topRow);
+
+  Blockly.geras.Drawer.superClass_.drawTop_.call(this);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawJaggedEdge_ = function(row) {
+  this.highlighter_.drawJaggedEdge_(row);
+
+  Blockly.geras.Drawer.superClass_.drawJaggedEdge_.call(this, row);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawValueInput_ = function(row) {
+  this.highlighter_.drawValueInput(row);
+
+  Blockly.geras.Drawer.superClass_.drawValueInput_.call(this, row);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawStatementInput_ = function(row) {
+  this.highlighter_.drawStatementInput(row);
+
+  Blockly.geras.Drawer.superClass_.drawStatementInput_.call(this, row);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawRightSideRow_ = function(row) {
+  this.highlighter_.drawRightSideRow(row);
+  Blockly.geras.Drawer.superClass_.drawRightSideRow_.call(this, row);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawBottom_ = function() {
+  this.highlighter_.drawBottomRow(this.info_.bottomRow);
+
+  Blockly.geras.Drawer.superClass_.drawBottom_.call(this);
+};
+
+/**
+ * Add steps for the left side of the block, which may include an output
+ * connection
+ * @private
+ */
+Blockly.geras.Drawer.prototype.drawLeft_ = function() {
+  this.highlighter_.drawLeft();
+
+  Blockly.geras.Drawer.superClass_.drawLeft_.call(this);
+};
+
+/**
+ * @override
+ */
+Blockly.geras.Drawer.prototype.drawInlineInput_ = function(input) {
+  this.highlighter_.drawInlineInput(input);
+
+  Blockly.geras.Drawer.superClass_.drawInlineInput_.call(this, input);
+};
diff --git a/core/renderers/block_rendering_rewrite/highlight_constants.js b/core/renderers/geras/highlight_constants.js
similarity index 93%
rename from core/renderers/block_rendering_rewrite/highlight_constants.js
rename to core/renderers/geras/highlight_constants.js
index 35c129651..6f1ff5c07 100644
--- a/core/renderers/block_rendering_rewrite/highlight_constants.js
+++ b/core/renderers/geras/highlight_constants.js
@@ -24,7 +24,7 @@
  */
 'use strict';
 
-goog.provide('Blockly.blockRendering.HighlightConstantProvider');
+goog.provide('Blockly.geras.HighlightConstantProvider');
 
 goog.require('Blockly.blockRendering.ConstantProvider');
 goog.require('Blockly.utils.svgPaths');
@@ -37,7 +37,7 @@ goog.require('Blockly.utils.svgPaths');
  * @constructor
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider = function() {
+Blockly.geras.HighlightConstantProvider = function() {
   /**
    * An object that provides the constants used for base block rendering.
    * @type {!Blockly.blockRendering.ConstantProvider}
@@ -104,7 +104,7 @@ Blockly.blockRendering.HighlightConstantProvider = function() {
  *     inside corner highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makeInsideCorner = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makeInsideCorner = function() {
   var radius = this.constantProvider.CORNER_RADIUS;
   var offset = this.OFFSET;
 
@@ -149,7 +149,7 @@ Blockly.blockRendering.HighlightConstantProvider.prototype.makeInsideCorner = fu
  *     outside corner highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makeOutsideCorner = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makeOutsideCorner = function() {
   var radius = this.constantProvider.CORNER_RADIUS;
   var offset = this.OFFSET;
 
@@ -199,7 +199,7 @@ Blockly.blockRendering.HighlightConstantProvider.prototype.makeOutsideCorner = f
  *     puzzle tab highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makePuzzleTab = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makePuzzleTab = function() {
   var width = this.constantProvider.TAB_WIDTH;
   var height = this.constantProvider.TAB_HEIGHT;
 
@@ -253,7 +253,7 @@ Blockly.blockRendering.HighlightConstantProvider.prototype.makePuzzleTab = funct
  *     notch highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makeNotch = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makeNotch = function() {
   // This is only for the previous connection.
   var pathLeft =
       Blockly.utils.svgPaths.lineOnAxis(
@@ -269,7 +269,7 @@ Blockly.blockRendering.HighlightConstantProvider.prototype.makeNotch = function(
  *     collapsed block edge highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makeJaggedTeeth = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makeJaggedTeeth = function() {
   var pathLeft =
       Blockly.utils.svgPaths.lineTo(5.1, 2.6) +
       Blockly.utils.svgPaths.moveBy(-10.2, 6.8) +
@@ -284,7 +284,7 @@ Blockly.blockRendering.HighlightConstantProvider.prototype.makeJaggedTeeth = fun
  *     start highlights.
  * @package
  */
-Blockly.blockRendering.HighlightConstantProvider.prototype.makeStartHat = function() {
+Blockly.geras.HighlightConstantProvider.prototype.makeStartHat = function() {
   var hatHeight = this.constantProvider.START_HAT.height;
   var pathRtl =
       Blockly.utils.svgPaths.moveBy(25, -8.7) +
diff --git a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js b/core/renderers/geras/highlighter.js
similarity index 90%
rename from core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
rename to core/renderers/geras/highlighter.js
index 1a73dbe3e..91aa2dd26 100644
--- a/core/renderers/block_rendering_rewrite/block_render_draw_highlight.js
+++ b/core/renderers/geras/highlighter.js
@@ -19,12 +19,13 @@
  */
 
 /**
- * @fileoverview Methods for graphically rendering a block as SVG.
+ * @fileoverview Methods for adding highlights on block, for rendering in
+ * compatibility mode.
  * @author fenichel@google.com (Rachel Fenichel)
  */
 'use strict';
 
-goog.provide('Blockly.blockRendering.Highlighter');
+goog.provide('Blockly.geras.Highlighter');
 
 goog.require('Blockly.blockRendering.RenderInfo');
 goog.require('Blockly.blockRendering.Measurable');
@@ -46,14 +47,14 @@ goog.require('Blockly.blockRendering.TopRow');
  * or closed paths.  The highlights for tabs and notches are loosely based on
  * tab and notch shapes, but are not exactly the same.
  *
- * @param {!Blockly.blockRendering.RenderInfo} info An object containing all
+ * @param {!Blockly.geras.RenderInfo} info An object containing all
  *     information needed to render this block.
  * @param {!Blockly.BlockSvg.PathObject} pathObject An object that stores all of
  *     the block's paths before they are propagated to the page.
  * @package
  * @constructor
  */
-Blockly.blockRendering.Highlighter = function(info, pathObject) {
+Blockly.geras.Highlighter = function(info, pathObject) {
   this.info_ = info;
   this.pathObject_ = pathObject;
   this.steps_ = this.pathObject_.highlightSteps;
@@ -79,7 +80,7 @@ Blockly.blockRendering.Highlighter = function(info, pathObject) {
       this.highlightConstants_.JAGGED_TEETH;
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
+Blockly.geras.Highlighter.prototype.drawTopCorner = function(row) {
   this.steps_.push(
       Blockly.utils.svgPaths.moveBy(row.xPos, this.info_.startY));
   for (var i = 0, elem; (elem = row.elements[i]); i++) {
@@ -104,7 +105,7 @@ Blockly.blockRendering.Highlighter.prototype.drawTopCorner = function(row) {
   this.steps_.push('H', right);
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
+Blockly.geras.Highlighter.prototype.drawJaggedEdge_ = function(row) {
   if (this.info_.RTL) {
     this.steps_.push('H', row.width - this.highlightOffset_);
     this.steps_.push(this.jaggedTeethPaths_.pathLeft);
@@ -114,7 +115,7 @@ Blockly.blockRendering.Highlighter.prototype.drawJaggedEdge_ = function(row) {
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
+Blockly.geras.Highlighter.prototype.drawValueInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
@@ -134,7 +135,7 @@ Blockly.blockRendering.Highlighter.prototype.drawValueInput = function(row) {
   this.steps_.push(steps);
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row) {
+Blockly.geras.Highlighter.prototype.drawStatementInput = function(row) {
   var input = row.getLastInput();
   var steps = '';
   if (this.RTL_) {
@@ -152,7 +153,7 @@ Blockly.blockRendering.Highlighter.prototype.drawStatementInput = function(row)
   this.steps_.push(steps);
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
+Blockly.geras.Highlighter.prototype.drawRightSideRow = function(row) {
   var rightEdge = row.xPos + row.width - this.highlightOffset_;
   if (row.followsStatement) {
     this.steps_.push('H', rightEdge);
@@ -165,7 +166,7 @@ Blockly.blockRendering.Highlighter.prototype.drawRightSideRow = function(row) {
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
+Blockly.geras.Highlighter.prototype.drawBottomRow = function(row) {
   var height = row.yPos + row.height - row.overhangY;
 
   // Highlight the vertical edge of the bottom row on the input side.
@@ -186,7 +187,7 @@ Blockly.blockRendering.Highlighter.prototype.drawBottomRow = function(row) {
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
+Blockly.geras.Highlighter.prototype.drawLeft = function() {
   var outputConnection = this.info_.outputConnection;
   if (outputConnection) {
     var tabBottom =
@@ -213,7 +214,7 @@ Blockly.blockRendering.Highlighter.prototype.drawLeft = function() {
   }
 };
 
-Blockly.blockRendering.Highlighter.prototype.drawInlineInput = function(input) {
+Blockly.geras.Highlighter.prototype.drawInlineInput = function(input) {
   var offset = this.highlightOffset_;
 
   // Relative to the block's left.