Highlight the row of block that was just placed

Whoo :) This is soooo critical and an issue we identified + solution we actually identified back in 2009 at the Baltimore usability test. Very happy to see this patch :)

I do think that choosing a region should become required. Although the UX is a little wonky, the whole disabled region concept is even wonkier.

I manually tested the patch on multiple browsers. It works.

I have one small change to the JS that introduces once(). Otherwise that screen will scroll to the just-placed block any time an AJAX request is sent off or something else invokes Drupal.attachBehaviors.

/**
 * Highlights the block that was just placed into the block listing.
 */
Drupal.behaviors.blockHighlightPlacement = {
  attach: function (context, settings) {
    if (settings.blockPlacement) {
      $('#blocks').once('block-highlight', function () {
        var $container = $(this);
        // Just scrolling the document.body will not work in Firefox. The html
        // element is needed as well.
        $('html, body').animate({
          scrollTop: $('#block-placed').offset().top - $container.offset().top + $container.scrollTop()
        }, 500);
      });
    }
  }
};

Tim, just have a look at the JS I changed. If you're fine with it, this is ready to be RTBC pending the bot.

I tried to break this during manual testing, but could not :)
I tried to find nitpicks, but could not :)

Much nicer UX indeed.

Committed to 8.x. Thanks.

tag.

Also, animate() #sadpanda. and using a function as an argument to .once() and doing a var $thing = $(this) when you're already creating the jquery object the line before #sadunicorn.

Almost:

diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.js
index 5c657d4..35bb5e8 100644
--- a/core/modules/block/js/block.admin.js
+++ b/core/modules/block/js/block.admin.js
@@ -74,14 +74,14 @@ Drupal.behaviors.blockFilterByText = {
 Drupal.behaviors.blockHighlightPlacement = {
   attach: function (context, settings) {
     if (settings.blockPlacement) {
-      $('#blocks').once('block-highlight', function () {
-        var $container = $(this);
+      var $blocks = $('#blocks').once('block-highlight');
+      if ($blocks.length) {
         // Just scrolling the document.body will not work in Firefox. The html
         // element is needed as well.
         $('html, body').animate({
-          scrollTop: $('#block-placed').offset().top - $container.offset().top + $container.scrollT
+          scrollTop: $('#block-placed').offset().top - $blocks.offset().top + $blocks.scrollTop()
         }, 500);
-      });
+      }
     }
   }
 };

When we'll replace jquery with regular JS it'll be easier to change things when this form is used instead of the function thing. Which also creates a new scope that really isn't needed usually.

For the animate thing I don't know haven't saw the D8 UI in weeks so maybe it's needed, but I took out the animation for collapsible fieldsets a while back, I hoping the same can happen here (or at least it was supposed to be removed in #2060573: Standardized filter/search behavior; surface filter matches regardless of their containing box's open state; but anyway).

Reopening.

That kind of stuff is handled by 20+ years old technology (we broke) #block-placed. This patch + #1870006: HTML5 validation with table sticky header is misaligned over the toolbar should be enough.

I'll open follow-up then.

follow-up: #2088027: just placed block keeps changed color even after saving the block layout page