From 9bd884d5cd9c08ee86af798420a2a9560eb0eb88 Mon Sep 17 00:00:00 2001
From: Alex Pott <alex.a.pott@googlemail.com>
Date: Mon, 15 Apr 2019 05:44:56 -0700
Subject: [PATCH] Issue #3041375 by lauriii, johndevman, yogeshmpawar, bnjmnm:
 Convert behaviors.layoutBuilderBlockDrag to use js- prefixed classes for
 attaching behaviors

---
 core/modules/layout_builder/js/layout-builder.es6.js      | 8 ++++----
 core/modules/layout_builder/js/layout-builder.js          | 8 ++++----
 core/modules/layout_builder/src/Element/LayoutBuilder.php | 3 ++-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/core/modules/layout_builder/js/layout-builder.es6.js b/core/modules/layout_builder/js/layout-builder.es6.js
index afe1947d4d4..7fc5ed7a2ed 100644
--- a/core/modules/layout_builder/js/layout-builder.es6.js
+++ b/core/modules/layout_builder/js/layout-builder.es6.js
@@ -111,10 +111,10 @@
   behaviors.layoutBuilderBlockDrag = {
     attach(context) {
       $(context)
-        .find('.layout-builder__region')
+        .find('.js-layout-builder-region')
         .sortable({
-          items: '> .draggable',
-          connectWith: '.layout-builder__region',
+          items: '> .js-layout-builder-block',
+          connectWith: '.js-layout-builder-region',
           placeholder: 'ui-state-drop',
 
           /**
@@ -127,7 +127,7 @@
            */
           update(event, ui) {
             // Check if the region from the event and region for the item match.
-            const itemRegion = ui.item.closest('.layout-builder__region');
+            const itemRegion = ui.item.closest('.js-layout-builder-region');
             if (event.target === itemRegion[0]) {
               // Find the destination delta.
               const deltaTo = ui.item
diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js
index 0acdd59938e..88bf8ede2a5 100644
--- a/core/modules/layout_builder/js/layout-builder.js
+++ b/core/modules/layout_builder/js/layout-builder.js
@@ -55,13 +55,13 @@
 
   behaviors.layoutBuilderBlockDrag = {
     attach: function attach(context) {
-      $(context).find('.layout-builder__region').sortable({
-        items: '> .draggable',
-        connectWith: '.layout-builder__region',
+      $(context).find('.js-layout-builder-region').sortable({
+        items: '> .js-layout-builder-block',
+        connectWith: '.js-layout-builder-region',
         placeholder: 'ui-state-drop',
 
         update: function update(event, ui) {
-          var itemRegion = ui.item.closest('.layout-builder__region');
+          var itemRegion = ui.item.closest('.js-layout-builder-region');
           if (event.target === itemRegion[0]) {
             var deltaTo = ui.item.closest('[data-layout-delta]').data('layout-delta');
 
diff --git a/core/modules/layout_builder/src/Element/LayoutBuilder.php b/core/modules/layout_builder/src/Element/LayoutBuilder.php
index 88cd292c882..db80176b16f 100644
--- a/core/modules/layout_builder/src/Element/LayoutBuilder.php
+++ b/core/modules/layout_builder/src/Element/LayoutBuilder.php
@@ -246,7 +246,7 @@ class LayoutBuilder extends RenderElement implements ContainerFactoryPluginInter
     foreach ($layout_definition->getRegions() as $region => $info) {
       if (!empty($build[$region])) {
         foreach (Element::children($build[$region]) as $uuid) {
-          $build[$region][$uuid]['#attributes']['class'][] = 'draggable';
+          $build[$region][$uuid]['#attributes']['class'][] = 'js-layout-builder-block';
           $build[$region][$uuid]['#attributes']['class'][] = 'layout-builder-block';
           $build[$region][$uuid]['#attributes']['data-layout-block-uuid'] = $uuid;
           $build[$region][$uuid]['#attributes']['data-layout-builder-highlight-id'] = $this->blockUpdateHighlightId($uuid);
@@ -303,6 +303,7 @@ class LayoutBuilder extends RenderElement implements ContainerFactoryPluginInter
       $build[$region]['layout_builder_add_block']['#weight'] = 1000;
       $build[$region]['#attributes']['data-region'] = $region;
       $build[$region]['#attributes']['class'][] = 'layout-builder__region';
+      $build[$region]['#attributes']['class'][] = 'js-layout-builder-region';
       $build[$region]['#attributes']['role'] = 'group';
       $build[$region]['#attributes']['aria-label'] = $this->t('@region region in section @section', [
         '@region' => $info['label'],