Issue #3384853 by joaopauloc.dev, smustgrave, lauriii: Javascript breaking on...

Issue #3384853 by joaopauloc.dev, smustgrave, lauriii: Javascript breaking on block layout page after drag or select new region

core/modules/block/js/block.js

@@ -90,8 +90,8 @@
        *
        * @param {jQuery} table
        *   The jQuery object representing the table to inspect.
-       * @param {jQuery} rowObject
-       *   The jQuery object representing the table row.
+       * @param {Drupal.tableDrag.row} rowObject
+       *   Drupal table drag row dropped.
        */
       function checkEmptyRegions(table, rowObject) {
         table.find('tr.region-message').each(function () {
@@ -110,8 +110,8 @@
           }
           // This region has become empty.
           if (
-            !$this.next('tr')[0].matches('.draggable') ||
-            $this.next('tr').length === 0
+            $this.next('tr').length === 0 ||
+            !$this.next('tr')[0].matches('.draggable')
           ) {
             $this.removeClass('region-populated').addClass('region-empty');
           }
@@ -127,15 +127,14 @@
        *
        * @param {jQuery} table
        *   The jQuery object representing the table to inspect.
-       * @param {jQuery} rowObject
-       *   The jQuery object representing the table row.
+       * @param {Drupal.tableDrag.row} rowObject
+       *   Drupal table drag row dropped.
        */
       function updateLastPlaced(table, rowObject) {
         // Remove the color-success class from new block if applicable.
         table.find('.color-success').removeClass('color-success');
-
         const $rowObject = $(rowObject);
-        if (!rowObject.matches('.drag-previous')) {
+        if (!rowObject.element.matches('.drag-previous')) {
           table.find('.drag-previous').removeClass('drag-previous');
           $rowObject.addClass('drag-previous');
         }
@@ -244,7 +243,7 @@
           // Modify empty regions with added or removed fields.
           checkEmptyRegions(table, tableDrag.rowObject);
           // Update last placed block indication.
-          updateLastPlaced(table, row);
+          updateLastPlaced(table, tableDrag.rowObject);
           // Show unsaved changes warning.
           if (!tableDrag.changed) {
             $(Drupal.theme('tableDragChangedWarning'))

core/modules/block/tests/src/FunctionalJavascript/BlockDragTest.php

+<?php
+
+namespace Drupal\Tests\block\FunctionalJavascript;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests drag and drop blocks on block layout page.
+ *
+ * @group block
+ */
+class BlockDragTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['user', 'block', 'node'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'olivero';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $admin_user = $this->drupalCreateUser([
+      'administer blocks',
+    ]);
+    $this->drupalLogin($admin_user);
+  }
+
+  /**
+   * Tests drag and drop blocks.
+   */
+  public function testDragAndDropBlocks() {
+    $this->drupalGet('admin/structure/block');
+    $assertSession = $this->assertSession();
+    $session = $this->getSession();
+    $page = $session->getPage();
+
+    // Dragging main-menu and status messages to header region.
+    $siteBranding = $this->getDragRow($page, 'edit-blocks-olivero-site-branding');
+    $mainMenuRow = $this->getDragRow($page, 'edit-blocks-olivero-main-menu');
+    $mainMenuRow->dragTo($siteBranding);
+    $messages = $this->getDragRow($page, 'edit-blocks-olivero-messages');
+    $messages->dragTo($siteBranding);
+
+    // Test if both blocks above was positioned on the header region.
+    $this->assertEquals(
+      'header',
+      $page->findField('edit-blocks-olivero-main-menu-region')->getValue(),
+      'Main menu should be positioned on header region'
+    );
+    $this->assertEquals(
+      'header',
+      $page->findField('edit-blocks-olivero-messages-region')->getValue(),
+      'Status messages should be positioned on header region'
+    );
+
+    // Check if the message unsaved changed appears.
+    $assertSession->pageTextContains('You have unsaved changes.');
+
+    // Test if the message for empty regions appear after drag the unique block on the region.
+    $noBlockMessage = $page->find('css', 'tr[data-drupal-selector="edit-blocks-region-primary-menu-message"] td')->getText();
+    $this->assertSession()->assert($noBlockMessage === 'No blocks in this region', 'Region primary menu should be empty.');
+
+    // Testing drag row to an empty region.
+    $pageTitle = $this->getDragRow($page, 'edit-blocks-olivero-page-title');
+    $heroRegion = $page->find('css', 'tr[data-drupal-selector="edit-blocks-region-hero-message"]');
+    $pageTitle->dragTo($heroRegion);
+    $this->assertSession()->assert(
+      $page->find('css', 'tr[data-drupal-selector="edit-blocks-region-hero-message"] td')->getText() !== 'No blocks in this region',
+      "Region here shouldn't be empty"
+    );
+
+  }
+
+  /**
+   * Helper function to find block tr element on the page.
+   */
+  private function getDragRow($page, $blockId) {
+    return $page->find('css', '#blocks tbody tr[data-drupal-selector="' . $blockId . '"] a.tabledrag-handle');
+  }
+
+}