Issue #3034347 by dead_arm, phenaproxima, tim.plunkett, lauriii: Update the...

Issue #3034347 by dead_arm, phenaproxima, tim.plunkett, lauriii: Update the Layout Builder UI classes to implement BEM naming conventions

core/modules/layout_builder/css/layout-builder.css

-.new-section {
+.layout-builder__add-section {
   background-color: #f7f7f7;
   width: 100%;
   outline: 2px dashed #979797;
@@ -7,51 +7,47 @@
   margin-bottom: 1.5em;
 }
 
-.new-section__link,
-.new-block__link {
+.layout-builder__link--add {
   color: #787878;
   border-bottom: none;
   padding-left: 24px;
   background: url(../../../misc/icons/787878/plus.svg) transparent top left / 16px 16px no-repeat;
 }
 
-.new-section__link:hover,
-.new-section__link:active,
-.new-section__link:focus,
-.new-block__link:hover,
-.new-block__link:active,
-.new-block__link:focus {
+.layout-builder__link--add:hover,
+.layout-builder__link--add:active,
+.layout-builder__link--add:focus {
   border-bottom-style: none;
   color: #000;
 }
 
-.layout-section {
+.layout-builder__section {
   margin-bottom: 1.5em;
 }
 
-.layout-section .ui-sortable-helper {
+.layout-builder__section .ui-sortable-helper {
   background-color: #fff;
   outline: 2px solid #f7f7f7;
 }
 
-.layout-section .ui-state-drop {
+.layout-builder__section .ui-state-drop {
   background-color: #ffd;
   outline: 2px dashed #fedb60;
   margin: 20px;
   padding: 30px;
 }
 
-.layout-section .layout-builder--layout__region {
+.layout-builder__region {
   outline: 2px dashed #2f91da;
 }
 
-.layout-section .layout-builder--layout__region .new-block {
+.layout-builder__add-block {
   background-color: #eff6fc;
   padding: 1.5em 0;
   text-align: center;
 }
 
-.layout-section .remove-section {
+.layout-builder__link--remove {
   position: relative;
   background: url(../../../misc/icons/bebebe/ex.svg) #fff center center / 16px 16px no-repeat;
   border: 1px solid #ccc;
@@ -67,7 +63,7 @@
   margin-left: -10px;
 }
 
-.layout-section .remove-section:hover {
+.layout-builder__link--remove:hover {
   background-image: url(../../../misc/icons/787878/ex.svg);
 }
 

core/modules/layout_builder/js/layout-builder.es6.js

@@ -111,10 +111,10 @@
   behaviors.layoutBuilderBlockDrag = {
     attach(context) {
       $(context)
-        .find('.layout-builder--layout__region')
+        .find('.layout-builder__region')
         .sortable({
           items: '> .draggable',
-          connectWith: '.layout-builder--layout__region',
+          connectWith: '.layout-builder__region',
           placeholder: 'ui-state-drop',
 
           /**
@@ -128,7 +128,7 @@
           update(event, ui) {
             // Check if the region from the event and region for the item match.
             const itemRegion = ui.item.closest(
-              '.layout-builder--layout__region',
+              '.layout-builder__region',
             );
             if (event.target === itemRegion[0]) {
               // Find the destination delta.

core/modules/layout_builder/js/layout-builder.js

@@ -55,13 +55,13 @@
 
   behaviors.layoutBuilderBlockDrag = {
     attach: function attach(context) {
-      $(context).find('.layout-builder--layout__region').sortable({
+      $(context).find('.layout-builder__region').sortable({
         items: '> .draggable',
-        connectWith: '.layout-builder--layout__region',
+        connectWith: '.layout-builder__region',
         placeholder: 'ui-state-drop',
 
         update: function update(event, ui) {
-          var itemRegion = ui.item.closest('.layout-builder--layout__region');
+          var itemRegion = ui.item.closest('.layout-builder__region');
           if (event.target === itemRegion[0]) {
             var deltaTo = ui.item.closest('[data-layout-delta]').data('layout-delta');
 

core/modules/layout_builder/src/Element/LayoutBuilder.php

@@ -123,6 +123,7 @@ protected function layout(SectionStorageInterface $section_storage) {
     $output['#attached']['library'][] = 'layout_builder/drupal.layout_builder';
     $output['#type'] = 'container';
     $output['#attributes']['id'] = 'layout-builder';
+    $output['#attributes']['class'][] = 'layout-builder';
     // Mark this UI as uncacheable.
     $output['#cache']['max-age'] = 0;
     return $output;
@@ -208,7 +209,11 @@ protected function buildAddSectionLink(SectionStorageInterface $section_storage,
           ],
           [
             'attributes' => [
-              'class' => ['use-ajax', 'new-section__link'],
+              'class' => [
+                'use-ajax',
+                'layout-builder__link',
+                'layout-builder__link--add',
+              ],
               'data-dialog-type' => 'dialog',
               'data-dialog-renderer' => 'off_canvas',
             ],
@@ -217,7 +222,7 @@ protected function buildAddSectionLink(SectionStorageInterface $section_storage,
       ],
       '#type' => 'container',
       '#attributes' => [
-        'class' => ['new-section'],
+        'class' => ['layout-builder__add-section'],
       ],
     ];
   }
@@ -275,7 +280,11 @@ protected function buildAdministrativeSection(SectionStorageInterface $section_s
           ],
           [
             'attributes' => [
-              'class' => ['use-ajax', 'new-block__link'],
+              'class' => [
+                'use-ajax',
+                'layout-builder__link',
+                'layout-builder__link--add',
+              ],
               'data-dialog-type' => 'dialog',
               'data-dialog-renderer' => 'off_canvas',
             ],
@@ -283,10 +292,10 @@ protected function buildAdministrativeSection(SectionStorageInterface $section_s
         ),
       ];
       $build[$region]['layout_builder_add_block']['#type'] = 'container';
-      $build[$region]['layout_builder_add_block']['#attributes'] = ['class' => ['new-block']];
+      $build[$region]['layout_builder_add_block']['#attributes'] = ['class' => ['layout-builder__add-block']];
       $build[$region]['layout_builder_add_block']['#weight'] = 1000;
       $build[$region]['#attributes']['data-region'] = $region;
-      $build[$region]['#attributes']['class'][] = 'layout-builder--layout__region';
+      $build[$region]['#attributes']['class'][] = 'layout-builder__region';
     }
 
     $build['#attributes']['data-layout-update-url'] = Url::fromRoute('layout_builder.move_block', [
@@ -294,12 +303,12 @@ protected function buildAdministrativeSection(SectionStorageInterface $section_s
       'section_storage' => $storage_id,
     ])->toString();
     $build['#attributes']['data-layout-delta'] = $delta;
-    $build['#attributes']['class'][] = 'layout-builder--layout';
+    $build['#attributes']['class'][] = 'layout-builder__layout';
 
     return [
       '#type' => 'container',
       '#attributes' => [
-        'class' => ['layout-section'],
+        'class' => ['layout-builder__section'],
       ],
       'configure' => [
         '#type' => 'link',
@@ -325,12 +334,16 @@ protected function buildAdministrativeSection(SectionStorageInterface $section_s
           'delta' => $delta,
         ]),
         '#attributes' => [
-          'class' => ['use-ajax', 'remove-section'],
+          'class' => [
+            'use-ajax',
+            'layout-builder__link',
+            'layout-builder__link--remove',
+          ],
           'data-dialog-type' => 'dialog',
           'data-dialog-renderer' => 'off_canvas',
         ],
       ],
-      'layout-section' => $build,
+      'layout-builder__section' => $build,
     ];
   }