diff --git a/core/modules/layout_builder/js/layout-builder.es6.js b/core/modules/layout_builder/js/layout-builder.es6.js index e2e31dad83..717fdbe68f 100644 --- a/core/modules/layout_builder/js/layout-builder.es6.js +++ b/core/modules/layout_builder/js/layout-builder.es6.js @@ -1,5 +1,6 @@ (($, Drupal) => { const { ajax, behaviors, debounce, announce, formatPlural } = Drupal; + let blocksFiltered = false; behaviors.layoutBuilderBlockFilter = { attach(context) { const $categories = $('.js-layout-builder-categories', context); @@ -36,16 +37,18 @@ // Filter if the length of the query is at least 2 characters. if (query.length >= 2) { + // Open all categories so all blocks are available to filter. $categories.find('.js-layout-builder-category').attr('open', ''); + // Toggle visibility of links based on query. $filterLinks.each(toggleBlockEntry); + + // Only display categories with visible links. $categories + .hide() .find('.js-layout-builder-category') - .each((index, category) => { - const hasBlocks = - $(category).find('.js-layout-builder-block-link:visible') - .length > 0; - $(category).toggle(hasBlocks); - }); + .has('.js-layout-builder-block-link:visible') + .toggle(); + announce( formatPlural( $categories.find('.js-layout-builder-block-link:visible').length, @@ -53,9 +56,9 @@ '@count blocks are available in the modified list.', ), ); - $categories.data('blocks-filtered', true); - } else if ($categories.data('blocks-filtered')) { - $categories.removeData('blocks-filtered'); + blocksFiltered = true; + } else if (blocksFiltered) { + blocksFiltered = false; $categories.find('.js-layout-builder-category').show(); $filterLinks.show(); announce(Drupal.t('All available blocks are listed.')); diff --git a/core/modules/layout_builder/js/layout-builder.js b/core/modules/layout_builder/js/layout-builder.js index d96ce6aefd..a40431c238 100644 --- a/core/modules/layout_builder/js/layout-builder.js +++ b/core/modules/layout_builder/js/layout-builder.js @@ -12,6 +12,7 @@ announce = Drupal.announce, formatPlural = Drupal.formatPlural; + var blocksFiltered = false; behaviors.layoutBuilderBlockFilter = { attach: function attach(context) { var $categories = $('.js-layout-builder-categories', context); @@ -28,15 +29,15 @@ if (query.length >= 2) { $categories.find('.js-layout-builder-category').attr('open', ''); + $filterLinks.each(toggleBlockEntry); - $categories.find('.js-layout-builder-category').each(function (index, category) { - var hasBlocks = $(category).find('.js-layout-builder-block-link:visible').length > 0; - $(category).toggle(hasBlocks); - }); + + $categories.hide().find('.js-layout-builder-category').has('.js-layout-builder-block-link:visible').toggle(); + 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.')); - $categories.data('blocks-filtered', true); - } else if ($categories.data('blocks-filtered')) { - $categories.removeData('blocks-filtered'); + blocksFiltered = true; + } else if (blocksFiltered) { + blocksFiltered = false; $categories.find('.js-layout-builder-category').show(); $filterLinks.show(); announce(Drupal.t('All available blocks are listed.'));