Update to Drupal 8.2.2. For more information, see https://www.drupal.org/project/drupal/releases/8.2.2

core/modules/outside_in/js/outside_in.js

@@ -7,7 +7,7 @@
 
   'use strict';
 
-  var blockConfigureSelector = '[data-dialog-renderer="offcanvas"]';
+  var blockConfigureSelector = '[data-outside-in-edit]';
   var toggleEditSelector = '[data-drupal-outsidein="toggle"]';
   var itemsToToggleSelector = '#main-canvas, #toolbar-bar, [data-drupal-outsidein="editable"] a, [data-drupal-outsidein="editable"] button';
   var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
@@ -186,7 +186,11 @@
           // @todo Move logic for data-dialog-renderer attribute into ajax.js
           //   https://www.drupal.org/node/2784443
           instance.options.url = instance.options.url.replace(search, replace);
-          instance.options.data.dialogOptions = {outsideInActiveEditableId: $(instance.element).parents('.outside-in-editable').attr('id')};
+          // Check to make sure existing dialogOptions aren't overridden.
+          if (!('dialogOptions' in instance.options.data)) {
+            instance.options.data.dialogOptions = {};
+          }
+          instance.options.data.dialogOptions.outsideInActiveEditableId = $(instance.element).parents('.outside-in-editable').attr('id');
           instance.progress = {type: 'fullscreen'};
         });
     }

core/modules/outside_in/outside_in.module

@@ -38,6 +38,7 @@ function outside_in_contextual_links_view_alter(&$element, $items) {
       'class' => ['use-ajax'],
       'data-dialog-type' => 'dialog',
       'data-dialog-renderer' => 'offcanvas',
+      'data-outside-in-edit' => TRUE,
     ];
 
     $element['#attached']['library'][] = 'outside_in/drupal.off_canvas';

core/modules/outside_in/src/Ajax/OpenOffCanvasDialogCommand.php

@@ -14,8 +14,10 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
   /**
    * Constructs an OpenOffCanvasDialogCommand object.
    *
-   * Drupal provides a built-in offcanvas tray for this purpose, so no selector
-   * needs to be provided.
+   * The off-canvas dialog differs from the normal modal provided by
+   * OpenDialogCommand in that a off-canvas has built in positioning and
+   * behaviours. Drupal provides a built-in off-canvas tray for this purpose,
+   * so the selector is hard-coded in the call to the parent constructor.
    *
    * @param string $title
    *   The title of the dialog.
@@ -46,15 +48,10 @@ class OpenOffCanvasDialogCommand extends OpenDialogCommand {
    * {@inheritdoc}
    */
   public function render() {
-    return [
-      'command' => 'openDialog',
-      'selector' => '#drupal-offcanvas',
-      'settings' => $this->settings,
-      'data' => $this->getRenderedContent(),
-      'dialogOptions' => $this->dialogOptions,
-      'effect' => 'fade',
-      'speed' => 1000,
-    ];
+    $build = parent::render();
+    $build['effect'] = 'fade';
+    $build['speed'] = 1000;
+    return $build;
   }
 
 }

core/modules/outside_in/src/Tests/Ajax/OffCanvasDialogTest.php

@@ -39,7 +39,7 @@ class OffCanvasDialogTest extends AjaxTestBase {
       'data' => $dialog_contents,
       'dialogOptions' =>
         [
-          'title' => 'AJAX Dialog contents',
+          'title' => 'AJAX Dialog & contents',
           'modal' => FALSE,
           'autoResize' => FALSE,
           'resizable' => 'w',

core/modules/outside_in/templates/outside-in-page-wrapper.html.twig

@@ -12,12 +12,10 @@
  */
 #}
 {% if children %}
-  {% spaceless %}
-    <div id="main-canvas-wrapper">
-      <div id="main-canvas">
-        {{ children }}
-      </div>
+  <div id="main-canvas-wrapper">
+    <div id="main-canvas">
+      {{ children }}
     </div>
-    <div class="offcanvas-lining"></div>
-  {% endspaceless %}
+  </div>
+  <div class="offcanvas-lining"></div>
 {% endif %}

core/modules/outside_in/tests/modules/offcanvas_test/src/Controller/TestController.php

@@ -2,6 +2,7 @@
 
 namespace Drupal\offcanvas_test\Controller;
 
+use Drupal\Component\Serialization\Json;
 use Drupal\Core\Url;
 
 /**
@@ -66,6 +67,9 @@ class TestController {
           'class' => ['use-ajax'],
           'data-dialog-type' => 'dialog',
           'data-dialog-renderer' => 'offcanvas',
+          'data-dialog-options' => Json::encode([
+            'width' => 555,
+          ]),
         ],
         '#attached' => [
           'library' => [

core/modules/outside_in/tests/src/FunctionalJavascript/OffCanvasTest.php

@@ -52,10 +52,13 @@ class OffCanvasTest extends OutsideInJavascriptTestBase {
         $tray_text = $offcanvas_tray->findById('drupal-offcanvas')->getText();
         $this->assertEquals("Thing $link_index says hello", $tray_text);
 
-        // Check no title behavior.
         if ($link_index == '2') {
+          // Check no title behavior.
           $web_assert->elementExists('css', '.ui-dialog-empty-title');
           $this->assertEquals('', $header_text);
+
+          $style = $page->find('css', '.ui-dialog-offcanvas')->getAttribute('style');
+          self::assertTrue(strstr($style, 'width: 555px;') !== FALSE, 'Dialog width respected.');
         }
         else {
           // Check that header is correct.