diff -u b/core/modules/outside_in/js/offcanvas.js b/core/modules/outside_in/js/offcanvas.js
--- b/core/modules/outside_in/js/offcanvas.js
+++ b/core/modules/outside_in/js/offcanvas.js
@@ -7,21 +7,20 @@
 
   'use strict';
 
+  // Set the initial state of the off-canvas element.
+  // If the state has been set previously, use it.
+  Drupal.offCanvas = {
+    visible: (Drupal.offCanvas ? Drupal.offCanvas.visible : false)
+  };
+
   /**
    * Create a wrapper container for the off-canvas element.
    *
-   * @param {number} pageWidth
-   *   The width of #page-wrapper.
-   *
    * @return {object}
    *   jQuery object that is the off-canvas wrapper element.
    */
-  var createOffCanvasWrapper = function (pageWidth) {
-    return $('<div />', {
-      'id': 'offcanvas',
-      'role': 'region',
-      'aria-labelledby': 'offcanvas-header'
-    });
+  Drupal.theme.createOffCanvasWrapper = function createOffCanvasWrapper() {
+    return $('<div id="offcanvas" ' + (document.dir === 'ltr' ? 'data-offset-right' : 'data-offset-left') + ' role="region" aria-labelledby="offcanvas-header"></div>');
   };
 
   /**
@@ -33,8 +32,8 @@
    * @return {object}
    *   jQuery object that is the off-canvas title element.
    */
-  var createTitle = function (title) {
-    return $('<h1 />', {text: title, id: 'offcanvas-header'});
+  Drupal.theme.createTitle = function createTitle(title) {
+    return $('<h1 id="offcanvas-header">' + title + '</h1>');
   };
 
   /**
@@ -46,8 +45,8 @@
    * @return {object}
    *   jQuery object that is the off-canvas content element.
    */
-  var createOffCanvasContent = function (data) {
-    return $('<div />', {class: 'offcanvas-content', html: data});
+  Drupal.theme.createOffCanvasContent = function createOffCanvasContent(data) {
+    return $('<div class="offcanvas-content">' + data + '</div>');
   };
 
   /**
@@ -61,12 +60,15 @@
    * @return {jQuery}
    *   jQuery object that is the off-canvas close element.
    */
-  var createOffCanvasClose = function (offCanvasWrapper, pageWrapper) {
-    return $('<button />', {
-      'class': 'offcanvasClose',
-      'aria-label': Drupal.t('Close configuration tray.'),
-      'html': '<span class="visually-hidden">' + Drupal.t('Close') + '</span>'
-    }).on('click', function () {
+  Drupal.theme.createOffCanvasClose = function createOffCanvasClose(offCanvasWrapper, pageWrapper) {
+    return $([
+      '<button class="offcanvasClose" aria-label="',
+      Drupal.t('Close configuration tray.'),
+      '"><span class="visually-hidden">',
+      Drupal.t('Close'),
+      '</span></button>'
+    ].join(''))
+    .on('click', function () {
       pageWrapper
         .removeClass('js-tray-open')
         .one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function () {
@@ -94,21 +96,15 @@
     // Discover display/viewport size.
     // @todo Work in breakpoints for tray size.
     var $pageWrapper = $('#main-canvas-wrapper');
-    var pageWidth = $pageWrapper.width();
-
-    // Set the initial state of the off-canvas element.
-    // If the state has been set previously, use it.
-    Drupal.offCanvas = {
-      visible: (Drupal.offCanvas ? Drupal.offCanvas.visible : false)
-    };
+    // var pageWidth = $pageWrapper.width();
 
     // Construct off-canvas wrapper
-    var $offcanvasWrapper = createOffCanvasWrapper(pageWidth);
+    var $offcanvasWrapper = Drupal.theme('createOffCanvasWrapper');
 
     // Construct off-canvas internal elements.
-    var $offcanvasClose = createOffCanvasClose($offcanvasWrapper, $pageWrapper);
-    var $title = createTitle(response.dialogOptions.title);
-    var $offcanvasContent = createOffCanvasContent(response.data);
+    var $offcanvasClose = Drupal.theme('createOffCanvasClose', $offcanvasWrapper, $pageWrapper);
+    var $title = Drupal.theme('createTitle', response.dialogOptions.title);
+    var $offcanvasContent = Drupal.theme('createOffCanvasContent', response.data);
 
     // Put everything together.
     $offcanvasWrapper.append([$offcanvasClose, $title, $offcanvasContent]);
diff -u b/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
--- b/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -7,13 +7,6 @@
 
   'use strict';
 
-  // Bind a listener to the 'edit' button
-  // Toggle the js-outside-edit-mode class on items that we want
-  // to disable while in edit mode.
-  $('.contextual-toolbar-tab.toolbar-tab button').on('click', function () {
-    setToggleActiveMode();
-  });
-
   $('.outside-in-editable')
     // Bind an event listener to the .outside-in-editable div
     // This listen for click events and stops default actions of those elements.
@@ -35,8 +28,8 @@
       }
       var editLink = $(e.target).find('li.outside-inblock-configure a')[0];
       if (!editLink) {
-        var parents = $(e.target).parents('.outside-in-editable');
-        editLink = parents.find('li.outside-inblock-configure a')[0];
+        var closest = $(e.target).closest('.outside-in-editable');
+        editLink = closest.find('li.outside-inblock-configure a')[0];
       }
       editLink.click();
     });
@@ -101,7 +94,7 @@
     return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
   };
 
-  var setToggleActiveMode = function (forceActive) {
+  var setToggleActiveMode = function setToggleActiveMode(forceActive) {
     forceActive = forceActive || false;
     if (forceActive || !isActiveMode()) {
       $('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Editing'));
@@ -138,2 +131,18 @@
 
+  /**
+   * Toggle the js-outside-edit-mode class on items that we want to disable while in edit mode.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Toggle the js-outside-edit-mode class.
+   */
+  Drupal.behaviors.toggleActiveMode = {
+    attach: function () {
+      $('.contextual-toolbar-tab.toolbar-tab button').on('click', function () {
+        setToggleActiveMode();
+      });
+    }
+  };
+
 })(jQuery, Drupal);