diff --git a/core/modules/outside_in/js/outside_in.js b/core/modules/outside_in/js/outside_in.js
index 8384500..1939a6b 100644
--- a/core/modules/outside_in/js/outside_in.js
+++ b/core/modules/outside_in/js/outside_in.js
@@ -7,32 +7,8 @@
 
   'use strict';
 
-  $('.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.
-    .on('click', '.js-outside-in-edit-mode', function (e) {
-      if (localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false') {
-        e.preventDefault();
-      }
-    })
-    // Bind an event listener to the .outside-in-editable div
-    // When a click occurs try and find the outside-in edit link
-    // and click it.
-    .not('div.contextual a, div.contextual button')
-    .on('click', function (e) {
-      if ($(e.target.offsetParent).hasClass('contextual')) {
-        return;
-      }
-      if (!localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
-        return;
-      }
-      var editLink = $(e.target).find('a[data-dialog-renderer="offcanvas"]')[0];
-      if (!editLink) {
-        var closest = $(e.target).closest('.outside-in-editable');
-        editLink = closest.find('li a[data-dialog-renderer="offcanvas"]')[0];
-      }
-      editLink.click();
-    });
+  var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]';
+  var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
 
   /**
    * Reacts to contextual links being added.
@@ -53,45 +29,67 @@
     // Bind a listener to all 'Quick edit' links for blocks
     // Click "Edit" button in toolbar to force Contextual Edit which starts
     // Outside-In edit mode also.
-    data.$el.find('.outside-inblock-configure a').on('click', function () {
-      if (!isActiveMode()) {
-        $('div.contextual-toolbar-tab.toolbar-tab button').click();
-      }
-    });
+    data.$el.find(blockConfigureSelector)
+      .on('click.outsidein', function () {
+        if (!isActiveMode()) {
+          $(toggleEditSelector).trigger('click.outsidein');
+        }
+      });
   });
 
   /**
    * Gets all items that should be toggled with class during edit mode.
    *
-   * @return {*}
+   * @return {jQuery}
    *   Items that should be toggled.
    */
-  var getItemsToToggle = function () {
-    return $('#main-canvas, #toolbar-bar, .outside-in-editable a, .outside-in-editable button')
-      .not('div.contextual a, div.contextual button');
-  };
+  function getItemsToToggle() {
+    return $('#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button')
+      .not('[data-contextual-id] a, [data-contextual-id] button');
+  }
 
-  var isActiveMode = function () {
+  /**
+   * Helper to check the state of the outside-in mode.
+   *
+   * @todo don't use a class for this.
+   *
+   * @return {bool}
+   *  State of the outside-in edit mode.
+   */
+  function isActiveMode() {
     return $('#toolbar-bar').hasClass('js-outside-in-edit-mode');
-  };
+  }
+
+  function toggleActiveMode() {
+    setActiveMode(!isActiveMode());
+  }
 
-  var setToggleActiveMode = function setToggleActiveMode(forceActive) {
-    forceActive = forceActive || false;
-    if (forceActive || !isActiveMode()) {
-      $('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Editing'));
+  /**
+   *  Helper to switch edit mode state.
+   *
+   * @param {bool} activeMode
+   *  True enable edit mode, false disable edit mode.
+   */
+  function setActiveMode(activeMode) {
+    activeMode = !!activeMode;
+    var $editButton = $(toggleEditSelector);
+    // Active edit mode.
+    if (activeMode) {
+      $editButton.text(Drupal.t('Editing'));
       // Close the Manage tray if open when entering edit mode.
       if ($('#toolbar-item-administration-tray').hasClass('is-active')) {
-        $('#toolbar-item-administration').click();
+        $('#toolbar-item-administration').trigger('click');
       }
-      getItemsToToggle().addClass('js-outside-in-edit-mode');
-      $('.edit-mode-inactive').addClass('visually-hidden');
     }
+    // Disable edit mode.
     else {
-      $('#toolbar-bar .contextual-toolbar-tab button').text(Drupal.t('Edit'));
-      getItemsToToggle().removeClass('js-outside-in-edit-mode');
-      $('.edit-mode-inactive').removeClass('visually-hidden');
+      $editButton.text(Drupal.t('Edit'));
+      // Close/remove offcanvas.
+      $('[data-drupal-canvas="close"]').trigger('click.offcanvas');
     }
-  };
+    getItemsToToggle().toggleClass('js-outside-in-edit-mode', activeMode);
+    $('.edit-mode-inactive').toggleClass('visually-hidden', activeMode);
+  }
 
   /**
    * Attaches contextual's edit toolbar tab behavior.
@@ -105,7 +103,7 @@
     attach: function () {
       var editMode = localStorage.getItem('Drupal.contextualToolbar.isViewing') === 'false';
       if (editMode) {
-        setToggleActiveMode(true);
+        setActiveMode(true);
       }
     }
   };
@@ -120,9 +118,33 @@
    */
   Drupal.behaviors.toggleActiveMode = {
     attach: function () {
-      $('.contextual-toolbar-tab.toolbar-tab button').once('toggle-edit-mode').on('click', function () {
-        setToggleActiveMode();
-      });
+
+      $(toggleEditSelector).once('outsidein').on('click.outsidein', toggleActiveMode);
+
+      var $editables = $('[data-drupal-outsidein="editable"]').once('outsidein');
+      if ($editables.length) {
+
+        // Bind an event listener to the editable div and stops default actions
+        // of those elements.
+        $editables.on('click.outsidein', '.js-outside-in-edit-mode', function (e) {
+          if (isActiveMode()) {
+            e.preventDefault();
+          }
+        });
+
+        // When a click occurs try and find the outside-in edit link
+        // and click it.
+        $editables
+          .not('[data-contextual-id] a, [data-contextual-id] button')
+          .on('click.outsidein', function (e) {
+            // @todo check if we can't use currentTarget too.
+            if ($(e.target).parent().hasClass('contextual') || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
+              return;
+            }
+
+            $(e.currentTarget).find(blockConfigureSelector).trigger('click');
+          });
+      }
 
       var search = Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog';
       var replace =  Drupal.ajax.WRAPPER_FORMAT + '=drupal_dialog_offcanvas';
diff --git a/core/modules/outside_in/outside_in.module b/core/modules/outside_in/outside_in.module
index b3e6f07..d608ecd 100644
--- a/core/modules/outside_in/outside_in.module
+++ b/core/modules/outside_in/outside_in.module
@@ -89,8 +89,9 @@ function outside_in_preprocess_block(&$variables) {
   // The main system block does not contain the block contextual links.
   $variables['#cache']['contexts'][] = 'outside_in_is_applied';
   if ($variables['plugin_id'] !== 'system_main_block' && \Drupal::service('outside_in.manager')->isApplicable()) {
-    // Add class to all blocks to allow Javascript to target.
+    // Add class and attributes to all blocks to allow Javascript to target.
     $variables['attributes']['class'][] = 'outside-in-editable';
+    $variables['attributes']['data-drupal-outsidein'] = 'editable';
   }
 }
 
@@ -104,6 +105,7 @@ function outside_in_toolbar_alter(&$items) {
   if (isset($items['contextual']['tab']) && \Drupal::service('outside_in.manager')->isApplicable()) {
     $items['contextual']['#weight'] = -1000;
     $items['contextual']['#attached']['library'][] = 'outside_in/drupal.outside_in';
+    $items['contextual']['tab']['#attributes']['data-drupal-outsidein'] = 'toggle';
 
     // Set a class on items to mark whether they should be active in edit mode.
     // @todo Create a dynamic method for modules to set their own items.