Issue #2998862 by bnjmnm, tedbow, bendeguz.csirmaz, samuel.mortenson, starshaped, phenaproxima, lauriii, alwaysworking, andrewmacpherson: The Layout Builder block listing should be filterable

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

@@ -92,6 +92,7 @@
   padding-left: 44px;
   font-size: 16px;
   color: #eee;
+  border-bottom: 1px solid #333;
   background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
 }
 

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

@@ -1,5 +1,114 @@
-(($, { ajax, behaviors }) => {
-  behaviors.layoutBuilder = {
+/**
+ * @file
+ * Attaches the behaviors for the Layout Builder module.
+ */
+
+(($, Drupal) => {
+  const { ajax, behaviors, debounce, announce, formatPlural } = Drupal;
+
+  /*
+   * Boolean that tracks if block listing is currently being filtered. Declared
+   * outside of behaviors so value is retained on rebuild.
+   */
+  let layoutBuilderBlocksFiltered = false;
+
+  /**
+   * Provides the ability to filter the block listing in Add Block dialog.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attach block filtering behavior to Add Block dialog.
+   */
+  behaviors.layoutBuilderBlockFilter = {
+    attach(context) {
+      const $categories = $('.js-layout-builder-categories', context);
+      const $filterLinks = $categories.find('.js-layout-builder-block-link');
+
+      /**
+       * Filters the block list.
+       *
+       * @param {jQuery.Event} e
+       *   The jQuery event for the keyup event that triggered the filter.
+       */
+      const 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} link
+         *   The link to add the block.
+         */
+        const toggleBlockEntry = (index, link) => {
+          const $link = $(link);
+          const textMatch =
+            $link
+              .text()
+              .toLowerCase()
+              .indexOf(query) !== -1;
+          $link.toggle(textMatch);
+        };
+
+        // Filter if the length of the query is at least 2 characters.
+        if (query.length >= 2) {
+          // Attribute to note which categories are closed before opening all.
+          $categories
+            .find('.js-layout-builder-category:not([open])')
+            .attr('remember-closed', '');
+
+          // Open all categories so every block is available to filtering.
+          $categories.find('.js-layout-builder-category').attr('open', '');
+          // Toggle visibility of links based on query.
+          $filterLinks.each(toggleBlockEntry);
+
+          // Only display categories containing visible links.
+          $categories
+            .find(
+              '.js-layout-builder-category:not(:has(.js-layout-builder-block-link:visible))',
+            )
+            .hide();
+
+          announce(
+            formatPlural(
+              $categories.find('.js-layout-builder-block-link:visible').length,
+              '1 block is available in the modified list.',
+              '@count blocks are available in the modified list.',
+            ),
+          );
+          layoutBuilderBlocksFiltered = true;
+        } else if (layoutBuilderBlocksFiltered) {
+          layoutBuilderBlocksFiltered = false;
+          // Remove "open" attr from categories that were closed pre-filtering.
+          $categories
+            .find('.js-layout-builder-category[remember-closed]')
+            .removeAttr('open')
+            .removeAttr('remember-closed');
+          $categories.find('.js-layout-builder-category').show();
+          $filterLinks.show();
+          announce(Drupal.t('All available blocks are listed.'));
+        }
+      };
+
+      $('input.js-layout-builder-filter', context)
+        .once('block-filter-text')
+        .on('keyup', debounce(filterBlockList, 200));
+    },
+  };
+
+  /**
+   * Provides the ability to drag blocks to new positions in the layout.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attach block drag behavior to the Layout Builder UI.
+   */
+  behaviors.layoutBuilderBlockDrag = {
     attach(context) {
       $(context)
         .find('.layout-builder--layout__region')

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

@@ -5,11 +5,55 @@
 * @preserve
 **/
 
-(function ($, _ref) {
-  var ajax = _ref.ajax,
-      behaviors = _ref.behaviors;
+(function ($, Drupal) {
+  var ajax = Drupal.ajax,
+      behaviors = Drupal.behaviors,
+      debounce = Drupal.debounce,
+      announce = Drupal.announce,
+      formatPlural = Drupal.formatPlural;
 
-  behaviors.layoutBuilder = {
+  var layoutBuilderBlocksFiltered = false;
+
+  behaviors.layoutBuilderBlockFilter = {
+    attach: function attach(context) {
+      var $categories = $('.js-layout-builder-categories', context);
+      var $filterLinks = $categories.find('.js-layout-builder-block-link');
+
+      var filterBlockList = function filterBlockList(e) {
+        var query = $(e.target).val().toLowerCase();
+
+        var toggleBlockEntry = function toggleBlockEntry(index, link) {
+          var $link = $(link);
+          var textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
+          $link.toggle(textMatch);
+        };
+
+        if (query.length >= 2) {
+          $categories.find('.js-layout-builder-category:not([open])').attr('remember-closed', '');
+
+          $categories.find('.js-layout-builder-category').attr('open', '');
+
+          $filterLinks.each(toggleBlockEntry);
+
+          $categories.find('.js-layout-builder-category:not(:has(.js-layout-builder-block-link:visible))').hide();
+
+          announce(formatPlural($categories.find('.js-layout-builder-block-link:visible').length, '1 block is available in the modified list.', '@count blocks are available in the modified list.'));
+          layoutBuilderBlocksFiltered = true;
+        } else if (layoutBuilderBlocksFiltered) {
+          layoutBuilderBlocksFiltered = false;
+
+          $categories.find('.js-layout-builder-category[remember-closed]').removeAttr('open').removeAttr('remember-closed');
+          $categories.find('.js-layout-builder-category').show();
+          $filterLinks.show();
+          announce(Drupal.t('All available blocks are listed.'));
+        }
+      };
+
+      $('input.js-layout-builder-filter', context).once('block-filter-text').on('keyup', debounce(filterBlockList, 200));
+    }
+  };
+
+  behaviors.layoutBuilderBlockDrag = {
     attach: function attach(context) {
       $(context).find('.layout-builder--layout__region').sortable({
         items: '> .draggable',

core/modules/layout_builder/layout_builder.libraries.yml

@@ -8,6 +8,8 @@ drupal.layout_builder:
   dependencies:
     - core/jquery.ui.sortable
     - core/drupal.dialog.off_canvas
+    - core/drupal.announce
+    - core/drupal.debounce
 
 # CSS libraries for Layout plugins.
 twocol_section:

core/modules/layout_builder/src/Controller/ChooseBlockController.php

@@ -110,8 +110,21 @@ class ChooseBlockController implements ContainerInjectionInterface {
       }
     }
 
+    $build['filter'] = [
+      '#type' => 'search',
+      '#title' => $this->t('Filter by block name'),
+      '#title_display' => 'invisible',
+      '#size' => 30,
+      '#placeholder' => $this->t('Filter by block name'),
+      '#attributes' => [
+        'class' => ['js-layout-builder-filter'],
+        'title' => $this->t('Enter a part of the block name to filter by.'),
+      ],
+    ];
+
     $block_categories['#type'] = 'container';
     $block_categories['#attributes']['class'][] = 'block-categories';
+    $block_categories['#attributes']['class'][] = 'js-layout-builder-categories';
 
     // @todo Explicitly cast delta to an integer, remove this in
     //   https://www.drupal.org/project/drupal/issues/2984509.
@@ -125,6 +138,7 @@ class ChooseBlockController implements ContainerInjectionInterface {
     $grouped_definitions = $this->blockManager->getGroupedDefinitions($definitions);
     foreach ($grouped_definitions as $category => $blocks) {
       $block_categories[$category]['#type'] = 'details';
+      $block_categories[$category]['#attributes']['class'][] = 'js-layout-builder-category';
       $block_categories[$category]['#open'] = TRUE;
       $block_categories[$category]['#title'] = $category;
       $block_categories[$category]['links'] = $this->getBlockLinks($section_storage, $delta, $region, $blocks);
@@ -195,6 +209,8 @@ class ChooseBlockController implements ContainerInjectionInterface {
   protected function getBlockLinks(SectionStorageInterface $section_storage, $delta, $region, array $blocks) {
     $links = [];
     foreach ($blocks as $block_id => $block) {
+      $attributes = $this->getAjaxAttributes();
+      $attributes['class'][] = 'js-layout-builder-block-link';
       $link = [
         'title' => $block['admin_label'],
         'url' => Url::fromRoute('layout_builder.add_block',
@@ -206,7 +222,7 @@ class ChooseBlockController implements ContainerInjectionInterface {
             'plugin_id' => $block_id,
           ]
         ),
-        'attributes' => $this->getAjaxAttributes(),
+        'attributes' => $attributes,
       ];
 
       $links[] = $link;

core/modules/layout_builder/tests/src/FunctionalJavascript/BlockFilterTest.php

@@ -0,0 +1,152 @@
+<?php
+
+namespace Drupal\Tests\layout_builder\FunctionalJavascript;
+
+use Behat\Mink\Element\NodeElement;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the JavaScript functionality of the block add filter.
+ *
+ * @group layout_builder
+ */
+class BlockFilterTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'block',
+    'node',
+    'datetime',
+    'layout_builder',
+    'user',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+    $user = $this->drupalCreateUser([
+      'configure any layout',
+      'administer node display',
+      'administer node fields',
+    ]);
+    $this->drupalLogin($user);
+    $this->createContentType(['type' => 'bundle_with_section_field']);
+  }
+
+  /**
+   * Tests block filter.
+   */
+  public function testBlockFilter() {
+    $assert_session = $this->assertSession();
+    $session = $this->getSession();
+    $page = $session->getPage();
+
+    // From the manage display page, go to manage the layout.
+    $field_ui_prefix = 'admin/structure/types/manage/bundle_with_section_field';
+    $this->drupalPostForm("$field_ui_prefix/display/default", ['layout[enabled]' => TRUE], 'Save');
+    $assert_session->linkExists('Manage layout');
+    $this->clickLink('Manage layout');
+    $assert_session->addressEquals("$field_ui_prefix/display-layout/default");
+
+    // Open the block listing.
+    $assert_session->linkExists('Add Block');
+    $this->clickLink('Add Block');
+    $assert_session->assertWaitOnAjaxRequest();
+
+    // Get all blocks, for assertions later.
+    $blocks = $page->findAll('css', '.js-layout-builder-block-link');
+    $categories = $page->findAll('css', '.js-layout-builder-category');
+
+    $filter = $assert_session->elementExists('css', '.js-layout-builder-filter');
+
+    // Set announce to ensure it is not cleared.
+    $init_message = 'init message';
+    $session->evaluateScript("Drupal.announce('$init_message')");
+    // Test block filter does not take effect for 1 character.
+    $filter->setValue('a');
+    $this->assertAnnounceContains($init_message);
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertEquals(count($blocks), count($visible_rows));
+
+    // Get the Content Fields category, which will be closed before filtering.
+    $contentFieldsCategory = $page->find('named', ['content', 'Content fields']);
+    // Link that belongs to the Content Fields category, to verify collapse.
+    $promoteToFrontPageLink = $page->find('named', ['content', 'Promoted to front page']);
+    // Test that front page link is visible until Content Fields collapsed.
+    $this->assertTrue($promoteToFrontPageLink->isVisible());
+    $contentFieldsCategory->click();
+    $this->assertFalse($promoteToFrontPageLink->isVisible());
+
+    // Test block filter reduces the number of visible rows.
+    $filter->setValue('ad');
+    $fewer_blocks_message = ' blocks are available in the modified list';
+    $this->assertAnnounceContains($fewer_blocks_message);
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertGreaterThan(0, count($blocks));
+    $this->assertLessThan(count($blocks), count($visible_rows));
+    $visible_categories = $this->filterVisibleElements($categories);
+    $this->assertGreaterThan(0, count($visible_categories));
+    $this->assertLessThan(count($categories), count($visible_categories));
+
+    // Test Drupal.announce() message when multiple matches are present.
+    $expected_message = count($visible_rows) . $fewer_blocks_message;
+    $this->assertAnnounceContains($expected_message);
+
+    // Test Drupal.announce() message when only one match is present.
+    $filter->setValue('Powered by');
+    $this->assertAnnounceContains(' block is available');
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertCount(1, $visible_rows);
+    $visible_categories = $this->filterVisibleElements($categories);
+    $this->assertCount(1, $visible_categories);
+    $this->assertAnnounceContains('1 block is available in the modified list.');
+
+    // Test Drupal.announce() message when no matches are present.
+    $filter->setValue('Pan-Galactic Gargle Blaster');
+    $visible_rows = $this->filterVisibleElements($blocks);
+    $this->assertCount(0, $visible_rows);
+    $visible_categories = $this->filterVisibleElements($categories);
+    $this->assertCount(0, $visible_categories);
+    $announce_element = $page->find('css', '#drupal-live-announce');
+    $page->waitFor(2, function () use ($announce_element) {
+      return strpos($announce_element->getText(), '0 blocks are available') === 0;
+    });
+
+    // Test Drupal.announce() message when all blocks are listed.
+    $filter->setValue('');;
+    $this->assertAnnounceContains('All available blocks are listed.');
+    // Confirm the Content Fields category remains collapsed after filtering.
+    $this->assertFalse($promoteToFrontPageLink->isVisible());
+  }
+
+  /**
+   * Removes any non-visible elements from the passed array.
+   *
+   * @param \Behat\Mink\Element\NodeElement[] $elements
+   *   An array of node elements.
+   *
+   * @return \Behat\Mink\Element\NodeElement[]
+   *   An array of visible node elements.
+   */
+  protected function filterVisibleElements(array $elements) {
+    return array_filter($elements, function (NodeElement $element) {
+      return $element->isVisible();
+    });
+  }
+
+  /**
+   * Checks for inclusion of text in #drupal-live-announce.
+   *
+   * @param string $expected_message
+   *   The text expected to be present in #drupal-live-announce.
+   */
+  protected function assertAnnounceContains($expected_message) {
+    $assert_session = $this->assertSession();
+    $this->assertNotEmpty($assert_session->waitForElement('css', "#drupal-live-announce:contains('$expected_message')"));
+  }
+
+}