Enagage demo

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

@@ -85,3 +85,34 @@
   display: block;
   padding-top: 0.55em;
 }
+
+#drupal-off-canvas a.inline-block-create-button {
+  display: block;
+  padding: 24px;
+  padding-left: 44px;
+  font-size: 16px;
+  color: #EEE;
+  border-bottom: 1px solid #333;
+  background: url(../../../misc/icons/bebebe/plus.svg) transparent 16px no-repeat;
+}
+
+#drupal-off-canvas a.inline-block-create-button,
+#drupal-off-canvas .inline-block-list a {
+  margin: 0 -20px;
+  transition: background-color 0.5s;
+  background-color: #444;
+}
+
+#drupal-off-canvas a.inline-block-create-button:hover,
+#drupal-off-canvas .inline-block-list a:hover {
+  background-color: #333;
+}
+
+#drupal-off-canvas .inline-block-list {
+  margin-bottom: 15px;
+}
+
+#drupal-off-canvas .inline-block-list a {
+  display: block;
+  padding: 15px 0 15px 25px;
+}

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

@@ -1,5 +1,67 @@
-(($, { ajax, behaviors }) => {
-  behaviors.layoutBuilder = {
+(($, { ajax, behaviors, debounce }) => {
+  behaviors.layoutBuilderBlockFilter = {
+    attach(context) {
+      const $input = $('input.js-layout-builder-filter', context).once('block-filter-text');
+      const $categories = $('.js-layout-builder-categories', context);
+      let $filterLinks;
+
+      /**
+       * 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} link
+         *   The link to add the block.
+         */
+        function toggleBlockEntry(index, link) {
+          const $link = $(link);
+          const textMatch =
+            $link
+              .text()
+              .toLowerCase()
+              .indexOf(query) !== -1;
+          $link.toggle(textMatch);
+        }
+
+        $categories.find('.js-layout-builder-category').show();
+        $filterLinks.show();
+
+        // Filter if the length of the query is at least 2 characters.
+        if (query.length >= 2) {
+          $categories.find('.js-layout-builder-category').attr('open', '');
+          $filterLinks.each(toggleBlockEntry);
+          $categories.find('.js-layout-builder-category').each(function() {
+            const hasBlocks = $(this).find('.js-layout-builder-block-link:visible').length > 0;
+            $(this).toggle(hasBlocks);
+          });
+          Drupal.announce(
+            Drupal.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.',
+            ),
+          );
+        }
+      }
+
+      if ($input.length) {
+        $filterLinks = $categories.find('.js-layout-builder-block-link');
+        $input.on('keyup', debounce(filterBlockList, 200));
+      }
+    }
+  };
+  behaviors.layoutBuilderBlockDrag = {
     attach(context) {
       $(context)
         .find('.layout-builder--layout__region')

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

@@ -7,9 +7,45 @@
 
 (function ($, _ref) {
   var ajax = _ref.ajax,
-      behaviors = _ref.behaviors;
+      behaviors = _ref.behaviors,
+      debounce = _ref.debounce;
 
-  behaviors.layoutBuilder = {
+  behaviors.layoutBuilderBlockFilter = {
+    attach: function attach(context) {
+      var $input = $('input.js-layout-builder-filter', context).once('block-filter-text');
+      var $categories = $('.js-layout-builder-categories', context);
+      var $filterLinks = void 0;
+
+      function filterBlockList(e) {
+        var query = $(e.target).val().toLowerCase();
+
+        function toggleBlockEntry(index, link) {
+          var $link = $(link);
+          var textMatch = $link.text().toLowerCase().indexOf(query) !== -1;
+          $link.toggle(textMatch);
+        }
+
+        $categories.find('.js-layout-builder-category').show();
+        $filterLinks.show();
+
+        if (query.length >= 2) {
+          $categories.find('.js-layout-builder-category').attr('open', '');
+          $filterLinks.each(toggleBlockEntry);
+          $categories.find('.js-layout-builder-category').each(function () {
+            var hasBlocks = $(this).find('.js-layout-builder-block-link:visible').length > 0;
+            $(this).toggle(hasBlocks);
+          });
+          Drupal.announce(Drupal.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.'));
+        }
+      }
+
+      if ($input.length) {
+        $filterLinks = $categories.find('.js-layout-builder-block-link');
+        $input.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,3 +8,5 @@ drupal.layout_builder:
   dependencies:
     - core/jquery.ui.sortable
     - core/drupal.dialog.off_canvas
+    - core/drupal.announce
+    - core/drupal.debounce

core/modules/layout_builder/layout_builder.module

@@ -177,7 +177,7 @@ function layout_builder_cron() {
 function layout_builder_plugin_filter_block_alter(array &$definitions, array $extra, $consumer) {
   // @todo Determine the 'inline_block' blocks should be allowed outside
   //   of layout_builder https://www.drupal.org/node/2979142.
-  if ($consumer !== 'layout_builder') {
+  if ($consumer !== 'layout_builder' || !isset($extra['list']) || $extra['list'] !== 'inline_blocks') {
     foreach ($definitions as $id => $definition) {
       if ($definition['id'] === 'inline_block') {
         unset($definitions[$id]);

core/modules/layout_builder/layout_builder.routing.yml

@@ -80,6 +80,19 @@ layout_builder.add_block:
       section_storage:
         layout_builder_tempstore: TRUE
 
+layout_builder.choose_inline_block:
+  path: '/layout_builder/choose/inline-block/{section_storage_type}/{section_storage}/{delta}/{region}'
+  defaults:
+    _controller: '\Drupal\layout_builder\Controller\ChooseBlockController::inlineBlockList'
+    _title: 'Add a new Inline Block'
+  requirements:
+    _permission: 'configure any layout'
+  options:
+    _admin_route: TRUE
+    parameters:
+      section_storage:
+        layout_builder_tempstore: TRUE
+
 layout_builder.update_block:
   path: '/layout_builder/update/block/{section_storage_type}/{section_storage}/{delta}/{region}/{uuid}'
   defaults: