--- /dev/null
+/**
+ * @file
+ * Block admin behaviors.
+ */
+
+(function ($, Drupal, debounce) {
+ /**
+ * Filters the block list by a text input search string.
+ *
+ * The text input will have the selector `input.block-filter-text`.
+ *
+ * The target element to do searching in will be in the selector
+ * `input.block-filter-text[data-element]`
+ *
+ * The text source where the text should be found will have the selector
+ * `.block-filter-text-source`
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches the behavior for the block filtering.
+ */
+ Drupal.behaviors.blockFilterByText = {
+ attach(context, settings) {
+ const $input = $('input.block-filter-text').once('block-filter-text');
+ const $table = $($input.attr('data-element'));
+ let $filter_rows;
+
+ /**
+ * Filters the block list.
+ *
+ * @param {jQuery.Event} e
+ * The jQuery event for the keyup event that triggered the filter.
+ */
+ function filterBlockList(e) {
+ const query = $(e.target).val().toLowerCase();
+
+ /**
+ * Shows or hides the block entry based on the query.
+ *
+ * @param {number} index
+ * The index in the loop, as provided by `jQuery.each`
+ * @param {HTMLElement} label
+ * The label of the block.
+ */
+ function toggleBlockEntry(index, label) {
+ const $label = $(label);
+ const $row = $label.parent().parent();
+ const textMatch = $label.text().toLowerCase().indexOf(query) !== -1;
+ $row.toggle(textMatch);
+ }
+
+ // Filter if the length of the query is at least 2 characters.
+ if (query.length >= 2) {
+ $filter_rows.each(toggleBlockEntry);
+ Drupal.announce(
+ Drupal.formatPlural(
+ $table.find('tr:visible').length - 1,
+ '1 block is available in the modified list.',
+ '@count blocks are available in the modified list.'
+ )
+ );
+ }
+ else {
+ $filter_rows.each(function (index) {
+ $(this).parent().parent().show();
+ });
+ }
+ }
+
+ if ($table.length) {
+ $filter_rows = $table.find('div.block-filter-text-source');
+ $input.on('keyup', debounce(filterBlockList, 200));
+ }
+ },
+ };
+
+ /**
+ * Highlights the block that was just placed into the block listing.
+ *
+ * @type {Drupal~behavior}
+ *
+ * @prop {Drupal~behaviorAttach} attach
+ * Attaches the behavior for the block placement highlighting.
+ */
+ Drupal.behaviors.blockHighlightPlacement = {
+ attach(context, settings) {
+ if (settings.blockPlacement) {
+ $(context).find('[data-drupal-selector="edit-blocks"]').once('block-highlight').each(function () {
+ const $container = $(this);
+ // Just scrolling the document.body will not work in Firefox. The html
+ // element is needed as well.
+ $('html, body').animate({
+ scrollTop: $('.js-block-placed').offset().top - $container.offset().top + $container.scrollTop(),
+ }, 500);
+ });
+ }
+ },
+ };
+}(jQuery, Drupal, Drupal.debounce));