diff --git a/core/misc/dialog/off-canvas.es6.js b/core/misc/dialog/off-canvas.es6.js
index 0068e44e1b..06d4bf3bdd 100644
--- a/core/misc/dialog/off-canvas.es6.js
+++ b/core/misc/dialog/off-canvas.es6.js
@@ -27,7 +27,7 @@
      *
      * @type {jQuery}
      */
-    $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
+    $mainCanvasWrapper: $('[data-off-canvas-page-wrapper]'),
 
     /**
      * Determines if an element is an off-canvas dialog.
diff --git a/core/misc/dialog/off-canvas.js b/core/misc/dialog/off-canvas.js
index 1de5f67565..5cc1a5f1c6 100644
--- a/core/misc/dialog/off-canvas.js
+++ b/core/misc/dialog/off-canvas.js
@@ -9,7 +9,7 @@
   Drupal.offCanvas = {
     minDisplaceWidth: 768,
 
-    $mainCanvasWrapper: $('[data-off-canvas-main-canvas]'),
+    $mainCanvasWrapper: $('[data-off-canvas-page-wrapper]'),
 
     isOffCanvas: function isOffCanvas($element) {
       return $element.is('#drupal-off-canvas');
@@ -145,4 +145,4 @@
       });
     }
   };
-})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
\ No newline at end of file
+})(jQuery, Drupal, Drupal.debounce, Drupal.displace);
diff --git a/core/misc/dialog/off-canvas.motion.css b/core/misc/dialog/off-canvas.motion.css
index 87fbf3016a..f8bd00af42 100644
--- a/core/misc/dialog/off-canvas.motion.css
+++ b/core/misc/dialog/off-canvas.motion.css
@@ -6,6 +6,6 @@
  * to improve performance if desired.
  */
 
-.dialog-off-canvas__main-canvas {
+.dialog-off-canvas__page-wrapper {
   transition: all .7s ease;
 }
diff --git a/core/modules/settings_tray/css/settings_tray.module.css b/core/modules/settings_tray/css/settings_tray.module.css
index 05b5bee4dc..6a31fb6b1e 100644
--- a/core/modules/settings_tray/css/settings_tray.module.css
+++ b/core/modules/settings_tray/css/settings_tray.module.css
@@ -14,10 +14,10 @@
   float: right;
 }
 
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode a,
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode input {
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode a,
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode input {
   pointer-events: none;
 }
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .contextual-links a {
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode .contextual-links a {
   pointer-events: inherit;
 }
diff --git a/core/modules/settings_tray/css/settings_tray.motion.css b/core/modules/settings_tray/css/settings_tray.motion.css
index 85d231c76e..58ea058aa2 100644
--- a/core/modules/settings_tray/css/settings_tray.motion.css
+++ b/core/modules/settings_tray/css/settings_tray.motion.css
@@ -12,8 +12,8 @@
 }
 
 /* Transition the editables on the page, their contextual links and their hover states. */
-.dialog-off-canvas__main-canvas .contextual,
-.dialog-off-canvas__main-canvas .js-settings-tray-edit-mode .settings-tray-editable,
-.dialog-off-canvas__main-canvas.js-off-canvas-dialog-open .js-settings-tray-edit-mode .settings-tray-editable {
+.dialog-off-canvas__page-wrapper .contextual,
+.dialog-off-canvas__page-wrapper .js-settings-tray-edit-mode .settings-tray-editable,
+.dialog-off-canvas__page-wrapper.js-off-canvas-dialog-open .js-settings-tray-edit-mode .settings-tray-editable {
   transition: all .7s ease;
 }
diff --git a/core/modules/settings_tray/css/settings_tray.theme.css b/core/modules/settings_tray/css/settings_tray.theme.css
index 9c40c74dfd..112a1ceec5 100644
--- a/core/modules/settings_tray/css/settings_tray.theme.css
+++ b/core/modules/settings_tray/css/settings_tray.theme.css
@@ -60,11 +60,11 @@
 }
 
 /* Style the editables while in edit mode. */
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable {
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode .settings-tray-editable {
   outline: 1px dashed rgba(0,0,0,0.5);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
 }
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable:hover,
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode .settings-tray-editable:hover,
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode .settings-tray-editable.settings-tray-active-editable {
   background-color: rgba(0,0,0,0.2);
 }
diff --git a/core/modules/settings_tray/js/settings_tray.es6.js b/core/modules/settings_tray/js/settings_tray.es6.js
index 7ce08dabb8..261de9eb63 100644
--- a/core/modules/settings_tray/js/settings_tray.es6.js
+++ b/core/modules/settings_tray/js/settings_tray.es6.js
@@ -8,7 +8,7 @@
 (function ($, Drupal) {
   const blockConfigureSelector = '[data-settings-tray-edit]';
   const toggleEditSelector = '[data-drupal-settingstray="toggle"]';
-  const itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
+  const itemsToToggleSelector = '[data-off-canvas-page-wrapper], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
   const contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   const quickEditItemSelector = '[data-quickedit-entity-id]';
 
@@ -66,8 +66,8 @@
    *   True enable edit mode, false disable edit mode.
    */
   function setEditModeState(editMode) {
-    if (!document.querySelector('[data-off-canvas-main-canvas]')) {
-      throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
+    if (!document.querySelector('[data-off-canvas-page-wrapper]')) {
+      throw new Error('data-off-canvas-page-wrapper is missing from settings-tray-page-wrapper.html.twig');
     }
     editMode = !!editMode;
     const $editButton = $(toggleEditSelector);
@@ -80,7 +80,7 @@
       $editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
       if ($editables.length) {
         // Use event capture to prevent clicks on links.
-        document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
+        document.querySelector('[data-off-canvas-page-wrapper]').addEventListener('click', preventClick, true);
 
         // When a click occurs try and find the settings-tray edit link
         // and click it.
@@ -116,7 +116,7 @@
     else {
       $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
       if ($editables.length) {
-        document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
+        document.querySelector('[data-off-canvas-page-wrapper]').removeEventListener('click', preventClick, true);
         $editables.off('.settingstray');
         $(quickEditItemSelector).off('.settingstray');
       }
diff --git a/core/modules/settings_tray/js/settings_tray.js b/core/modules/settings_tray/js/settings_tray.js
index 88cbb0eb6e..1266ef1257 100644
--- a/core/modules/settings_tray/js/settings_tray.js
+++ b/core/modules/settings_tray/js/settings_tray.js
@@ -8,7 +8,7 @@
 (function ($, Drupal) {
   var blockConfigureSelector = '[data-settings-tray-edit]';
   var toggleEditSelector = '[data-drupal-settingstray="toggle"]';
-  var itemsToToggleSelector = '[data-off-canvas-main-canvas], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
+  var itemsToToggleSelector = '[data-off-canvas-page-wrapper], #toolbar-bar, [data-drupal-settingstray="editable"] a, [data-drupal-settingstray="editable"] button';
   var contextualItemsSelector = '[data-contextual-id] a, [data-contextual-id] button';
   var quickEditItemSelector = '[data-quickedit-entity-id]';
 
@@ -36,8 +36,8 @@
   }
 
   function setEditModeState(editMode) {
-    if (!document.querySelector('[data-off-canvas-main-canvas]')) {
-      throw new Error('data-off-canvas-main-canvas is missing from settings-tray-page-wrapper.html.twig');
+    if (!document.querySelector('[data-off-canvas-page-wrapper]')) {
+      throw new Error('data-off-canvas-page-wrapper is missing from settings-tray-page-wrapper.html.twig');
     }
     editMode = !!editMode;
     var $editButton = $(toggleEditSelector);
@@ -49,7 +49,7 @@
 
       $editables = $('[data-drupal-settingstray="editable"]').once('settingstray');
       if ($editables.length) {
-        document.querySelector('[data-off-canvas-main-canvas]').addEventListener('click', preventClick, true);
+        document.querySelector('[data-off-canvas-page-wrapper]').addEventListener('click', preventClick, true);
 
         $editables.not(contextualItemsSelector).on('click.settingstray', function (e) {
           if ($(e.target).closest('.contextual').length || !localStorage.getItem('Drupal.contextualToolbar.isViewing')) {
@@ -72,7 +72,7 @@
     } else {
         $editables = $('[data-drupal-settingstray="editable"]').removeOnce('settingstray');
         if ($editables.length) {
-          document.querySelector('[data-off-canvas-main-canvas]').removeEventListener('click', preventClick, true);
+          document.querySelector('[data-off-canvas-page-wrapper]').removeEventListener('click', preventClick, true);
           $editables.off('.settingstray');
           $(quickEditItemSelector).off('.settingstray');
         }
@@ -151,4 +151,4 @@
       }
     }
   });
-})(jQuery, Drupal);
\ No newline at end of file
+})(jQuery, Drupal);
diff --git a/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css b/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css
index 071afce28a..7a5259dfb6 100644
--- a/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css
+++ b/core/modules/settings_tray/tests/modules/settings_tray_test_css/css/css_fix.theme.css
@@ -1,5 +1,5 @@
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode a,
-.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode input {
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode a,
+.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode input {
   pointer-events: inherit !important;
 }
 /**
diff --git a/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
index 3da1f26619..6bc8a26542 100644
--- a/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
+++ b/core/modules/settings_tray/tests/src/FunctionalJavascript/SettingsTrayBlockFormTest.php
@@ -145,7 +145,7 @@ public function testBlocks($theme, $block_plugin, $new_page_text, $element_selec
     // suppressed.
     $this->openBlockForm("$block_selector {$element_selector}", $block_selector);
     $web_assert->elementTextContains('css', '.contextual-toolbar-tab button', 'Editing');
-    $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-settings-tray-edit-mode');
+    $web_assert->elementAttributeContains('css', '.dialog-off-canvas__page-wrapper', 'class', 'js-settings-tray-edit-mode');
     // Simulate press the Escape key.
     $this->getSession()->executeScript('jQuery("body").trigger(jQuery.Event("keyup", { keyCode: 27 }));');
     $this->waitForOffCanvasToClose();
@@ -153,7 +153,7 @@ public function testBlocks($theme, $block_plugin, $new_page_text, $element_selec
     $this->assertEditModeDisabled();
     $web_assert->elementTextContains('css', '#drupal-live-announce', 'Exited edit mode.');
     $web_assert->elementTextNotContains('css', '.contextual-toolbar-tab button', 'Editing');
-    $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__main-canvas', 'class', 'js-settings-tray-edit-mode');
+    $web_assert->elementAttributeNotContains('css', '.dialog-off-canvas__page-wrapper', 'class', 'js-settings-tray-edit-mode');
   }
 
   /**
@@ -278,7 +278,7 @@ protected function openBlockForm($block_selector, $contextual_link_container = '
     $this->assertNotEmpty($contextual_link);
     // When page first loads Edit Mode is not triggered until first contextual
     // link is added.
-    $this->assertElementVisibleAfterWait('css', '.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode');
+    $this->assertElementVisibleAfterWait('css', '.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode');
     // Ensure that all other Ajax activity is completed.
     $this->assertSession()->assertWaitOnAjaxRequest();
     $this->click($block_selector);
@@ -414,8 +414,9 @@ protected function assertEditModeEnabled() {
     $web_assert->elementNotExists('css', '.contextual .trigger.visually-hidden');
     // The toolbar edit button should read "Editing".
     $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Editing');
-    // The main canvas element should have the "js-settings-tray-edit-mode" class.
-    $web_assert->elementExists('css', '.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode');
+    // The page wrapper element should have the "js-settings-tray-edit-mode"
+    // class.
+    $web_assert->elementExists('css', '.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode');
   }
 
   /**
@@ -429,9 +430,9 @@ protected function assertEditModeDisabled() {
     $web_assert->elementNotExists('css', '.contextual .trigger:not(.visually-hidden)');
     // The toolbar edit button should read "Edit".
     $web_assert->elementContains('css', static::TOOLBAR_EDIT_LINK_SELECTOR, 'Edit');
-    // The main canvas element should NOT have the "js-settings-tray-edit-mode"
+    // The page wrapper element should NOT have the "js-settings-tray-edit-mode"
     // class.
-    $web_assert->elementNotExists('css', '.dialog-off-canvas__main-canvas.js-settings-tray-edit-mode');
+    $web_assert->elementNotExists('css', '.dialog-off-canvas__page-wrapper.js-settings-tray-edit-mode');
   }
 
   /**
@@ -570,13 +571,11 @@ public function testValidationMessages() {
    * {@inheritdoc}
    */
   protected function getTestThemes() {
-    $themes = parent::getTestThemes();
     // Remove 'seven' theme. Setting Tray "Edit Mode" will not work with 'seven'
     // because it removes all contextual links the off-canvas dialog should.
-    if (($key = array_search('seven', $themes)) !== FALSE) {
-      unset($themes[$key]);
-    }
-    return $themes;
+    return array_filter(parent::getTestThemes(), function ($theme) {
+      return $theme !== 'seven';
+    });
   }
 
 }
diff --git a/core/modules/system/templates/off-canvas-page-wrapper.html.twig b/core/modules/system/templates/off-canvas-page-wrapper.html.twig
index 98b67ba2c2..1da025f0e9 100644
--- a/core/modules/system/templates/off-canvas-page-wrapper.html.twig
+++ b/core/modules/system/templates/off-canvas-page-wrapper.html.twig
@@ -4,13 +4,11 @@
  * Default theme implementation for a page wrapper.
  *
  * For consistent wrapping to {{ page }} render in all themes. The
- * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog.
- * This is used by the core/drupal.dialog.off_canvas library to select the
- * "main canvas" page element as opposed to the "off canvas" which is the dialog
- * itself. The "main canvas" element must be resized according to the width of
- * the "off canvas" dialog so that no portion of the "main canvas" is obstructed
- * by the off-canvas dialog. The off-canvas dialog can vary in width when opened
- * and can be resized by the user. The "data-off-canvas-main-canvas" attribute
+ * "data-off-canvas-page-wrapper" attribute is required by the off-canvas
+ * dialog. The "page wrapper" element must be resized according to the width of
+ * the "off canvas" dialog so that no portion of the page is obstructed by the
+ * off-canvas dialog. The off-canvas dialog can vary in width when opened and
+ * can be resized by the user. The "data-off-canvas-page-wrapper" attribute
  * cannot be removed without breaking the off-canvas dialog functionality.
  *
  * Available variables:
@@ -20,7 +18,7 @@
  */
 #}
 {% if children %}
-  <div class="dialog-off-canvas__main-canvas" data-off-canvas-main-canvas>
+  <div class="dialog-off-canvas__page-wrapper" data-off-canvas-page-wrapper>
     {{ children }}
   </div>
 {% endif %}
diff --git a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
index 1b00e1b6dc..197cde04e9 100644
--- a/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
+++ b/core/modules/system/tests/src/FunctionalJavascript/OffCanvasTest.php
@@ -90,20 +90,20 @@ public function testNarrowWidth() {
       // Testing at the wider width.
       $this->getSession()->resizeWindow($narrow_width_breakpoint + $offset, $height);
       $this->drupalGet('/off-canvas-test-links');
-      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on wide page load.');
+      $this->assertFalse($page->find('css', '.dialog-off-canvas__page-wrapper')->hasAttribute('style'), 'Body not padded on wide page load.');
       $page->clickLink("Click Me 1!");
       $this->waitForOffCanvasToOpen();
-      // Check that the main canvas is padded when page is not narrow width and
+      // Check that the page wrapper is padded when page is not narrow width and
       // tray is open.
-      $web_assert->elementAttributeContains('css', '.dialog-off-canvas__main-canvas', 'style', 'padding-right');
+      $web_assert->elementAttributeContains('css', '.dialog-off-canvas__page-wrapper', 'style', 'padding-right');
 
       // Testing at the narrower width.
       $this->getSession()->resizeWindow($narrow_width_breakpoint - $offset, $height);
       $this->drupalGet('/off-canvas-test-links');
-      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page load.');
+      $this->assertFalse($page->find('css', '.dialog-off-canvas__page-wrapper')->hasAttribute('style'), 'Body not padded on narrow page load.');
       $page->clickLink("Click Me 1!");
       $this->waitForOffCanvasToOpen();
-      $this->assertFalse($page->find('css', '.dialog-off-canvas__main-canvas')->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
+      $this->assertFalse($page->find('css', '.dialog-off-canvas__page-wrapper')->hasAttribute('style'), 'Body not padded on narrow page with tray open.');
     }
   }
 
diff --git a/core/themes/stable/css/core/dialog/off-canvas.motion.css b/core/themes/stable/css/core/dialog/off-canvas.motion.css
index 87fbf3016a..f8bd00af42 100644
--- a/core/themes/stable/css/core/dialog/off-canvas.motion.css
+++ b/core/themes/stable/css/core/dialog/off-canvas.motion.css
@@ -6,6 +6,6 @@
  * to improve performance if desired.
  */
 
-.dialog-off-canvas__main-canvas {
+.dialog-off-canvas__page-wrapper {
   transition: all .7s ease;
 }
diff --git a/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig b/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig
index 11993371c4..ff1e06f622 100644
--- a/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig
+++ b/core/themes/stable/templates/content/off-canvas-page-wrapper.html.twig
@@ -4,13 +4,11 @@
  * Theme override for page wrapper.
  *
  * For consistent wrapping to {{ page }} render in all themes. The
- * "data-off-canvas-main-canvas" attribute is required by the off-canvas dialog.
- * This is used by the core/drupal.dialog.off_canvas library to select the
- * "main canvas" page element as opposed to the "off canvas" which is the dialog
- * itself. The "main canvas" element must be resized according to the width of
- * the "off canvas" dialog so that no portion of the "main canvas" is obstructed
- * by the off-canvas dialog. The off-canvas dialog can vary in width when opened
- * and can be resized by the user. The "data-off-canvas-main-canvas" attribute
+ * "data-off-canvas-page-wrapper" attribute is required by the off-canvas
+ * dialog. The "page wrapper" element must be resized according to the width of
+ * the "off canvas" dialog so that no portion of the page is obstructed by the
+ * off-canvas dialog. The off-canvas dialog can vary in width when opened and
+ * can be resized by the user. The "data-off-canvas-page-wrapper" attribute
  * cannot be removed without breaking the off-canvas dialog functionality.
  *
  * Available variables:
@@ -18,7 +16,7 @@
  */
 #}
 {% if children %}
-  <div class="dialog-off-canvas__main-canvas" data-off-canvas-main-canvas>
+  <div class="dialog-off-canvas__page-wrapper" data-off-canvas-page-wrapper>
     {{ children }}
   </div>
 {% endif %}