From d224a4c9f66ae7f5e4c4d6e4a3e39410264b83dd Mon Sep 17 00:00:00 2001
From: Brooke Stevens <bstevens@elevatedthird.com>
Date: Fri, 8 Dec 2023 14:36:19 -0700
Subject: [PATCH] Use twig template, change icon

---
 css/layout_builder_browser_block_library.css    |  5 ++++-
 icons/table.svg                                 |  5 ++++-
 layout_builder_browser_block_library.module     | 17 +++++++++++++++++
 .../BrowserBlockLibraryController.php           |  2 ++
 src/Controller/OverriddenBrowserController.php  |  8 +++++---
 .../layout-builder-browser-block.html.twig      |  4 ++++
 6 files changed, 36 insertions(+), 5 deletions(-)
 create mode 100644 templates/layout-builder-browser-block.html.twig

diff --git a/css/layout_builder_browser_block_library.css b/css/layout_builder_browser_block_library.css
index 80442fe..0b1e04a 100644
--- a/css/layout_builder_browser_block_library.css
+++ b/css/layout_builder_browser_block_library.css
@@ -8,8 +8,11 @@ a.layout-builder-browser-block-item {
 a.browse-library-icon.align-right {
   font-size: .75em;
   padding-right: 30px;
-  background: transparent url(../icons/table.svg) no-repeat scroll center right;
+  background: url(../icons/table.svg) no-repeat right center;
+  height: 28px;
   margin-top: 12px;
+  display: flex;
+  align-items: center;
 }
 
 .browser-block-library-blocks .messages {
diff --git a/icons/table.svg b/icons/table.svg
index b90a1c9..6ffce68 100644
--- a/icons/table.svg
+++ b/icons/table.svg
@@ -1 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#bebebe" d="M7 15a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 9.5a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zm-4.5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zM7 4a1.5 1.5 0 0 1 0-3h7a1.5 1.5 0 0 1 0 3H7zM2.5 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/></svg>
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="14" cy="14" r="14" fill="#BED4FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4385 5.91651C9.83354 6.42547 8.41634 7.40054 7.36735 8.71758C6.31835 10.0346 5.68503 11.634 5.54801 13.3122H9.65468C9.68492 12.3075 9.77842 11.3175 9.93426 10.3788C10.124 9.22934 10.4063 8.16967 10.7684 7.26217C10.9517 6.79476 11.176 6.34446 11.4385 5.91651ZM13.9997 4.14551C12.7056 4.14551 11.4242 4.40039 10.2286 4.89561C9.03309 5.39083 7.94677 6.11668 7.03173 7.03173C6.11668 7.94677 5.39083 9.03309 4.89561 10.2286C4.40039 11.4242 4.14551 12.7056 4.14551 13.9997C4.14551 15.2937 4.40039 16.5751 4.89561 17.7707C5.39083 18.9663 6.11668 20.0526 7.03173 20.9676C7.94677 21.8827 9.03309 22.6085 10.2286 23.1037C11.4242 23.599 12.7056 23.8538 13.9997 23.8538C16.6132 23.8538 19.1196 22.8156 20.9676 20.9676C22.8156 19.1196 23.8538 16.6132 23.8538 13.9997C23.8538 11.3862 22.8156 8.87974 20.9676 7.03173C19.1196 5.18371 16.6132 4.14551 13.9997 4.14551ZM13.9997 5.52051C13.7604 5.52051 13.4506 5.63601 13.0913 6.00817C12.7283 6.38401 12.3662 6.97159 12.0453 7.77276C11.7273 8.56934 11.4678 9.53001 11.29 10.6043C11.1479 11.466 11.0608 12.3799 11.0315 13.3122H16.9678C16.9415 12.4049 16.8551 11.5003 16.7093 10.6043C16.5315 9.53001 16.2721 8.56934 15.954 7.77276C15.6332 6.97159 15.2711 6.38401 14.909 6.00817C14.5488 5.63601 14.2398 5.52051 13.9997 5.52051ZM18.3447 13.3122C18.3172 12.3292 18.2238 11.3493 18.0651 10.3788C17.8753 9.22934 17.593 8.16967 17.2309 7.26217C17.0474 6.79471 16.8228 6.3444 16.5599 5.91651C17.8561 6.3264 19.0345 7.04232 19.9956 8.00376C21.4175 9.4261 22.2876 11.3076 22.4504 13.3122H18.3447ZM16.9678 14.6872H11.0315C11.0599 15.6194 11.1479 16.5333 11.29 17.395C11.4678 18.4693 11.7273 19.43 12.0453 20.2257C12.3662 21.0278 12.7283 21.6153 13.0903 21.9912C13.4506 22.3633 13.7595 22.4788 13.9997 22.4788C14.2389 22.4788 14.5488 22.3633 14.9081 21.9912C15.2711 21.6153 15.6332 21.0278 15.954 20.2266C16.2721 19.43 16.5315 18.4693 16.7093 17.395C16.8514 16.5333 16.9385 15.6194 16.9678 14.6872ZM16.5608 22.0828C16.8083 21.685 17.0329 21.2313 17.23 20.7372C17.593 19.8297 17.8753 18.77 18.0651 17.6205C18.2235 16.6501 18.3166 15.6701 18.3438 14.6872H22.4504C22.3139 16.3655 21.6807 17.9651 20.6317 19.2822C19.5826 20.5994 18.1661 21.5743 16.5608 22.0828ZM11.4385 22.0828C11.1763 21.6549 10.9523 21.2046 10.7693 20.7372C10.4063 19.8297 10.124 18.77 9.93426 17.6205C9.77581 16.6501 9.68272 15.6701 9.65559 14.6872H5.54801C5.68448 16.3654 6.3175 17.9649 7.36638 19.282C8.41527 20.5991 9.83254 21.5742 11.4376 22.0828H11.4385Z" fill="#1156E2"/>
+</svg>
diff --git a/layout_builder_browser_block_library.module b/layout_builder_browser_block_library.module
index b3d9bbc..5ab4081 100644
--- a/layout_builder_browser_block_library.module
+++ b/layout_builder_browser_block_library.module
@@ -1 +1,18 @@
 <?php
+
+/**
+ * Implements hook_theme().
+ */
+function layout_builder_browser_block_library_theme(&$variables) {
+  return [
+    'lb_browser_block' => [
+      'template' => 'layout-builder-browser-block',
+      'variables' => [
+        'attributes' => NULL,
+        'url' => NULL,
+        'title' => NULL,
+        'browse_link' => NULL,
+      ],
+    ],
+  ];
+}
diff --git a/src/Controller/BrowserBlockLibraryController.php b/src/Controller/BrowserBlockLibraryController.php
index 42347d1..8c3387f 100644
--- a/src/Controller/BrowserBlockLibraryController.php
+++ b/src/Controller/BrowserBlockLibraryController.php
@@ -114,6 +114,8 @@ class BrowserBlockLibraryController implements ContainerInjectionInterface {
    */
   public function browse(SectionStorageInterface $section_storage, $delta, $region, $bundle) {
     $build = [];
+    $build['#prefix'] = "<div class='lbb-block-library'>";
+    $build['#suffix'] = '</div>';
 
     $definitions = $this->blockManager->getFilteredDefinitions('layout_builder', $this->getPopulatedContexts($section_storage), [
       'section_storage' => $section_storage,
diff --git a/src/Controller/OverriddenBrowserController.php b/src/Controller/OverriddenBrowserController.php
index 86f809a..e634d5f 100644
--- a/src/Controller/OverriddenBrowserController.php
+++ b/src/Controller/OverriddenBrowserController.php
@@ -48,7 +48,7 @@ class OverriddenBrowserController extends BrowserController {
       }
       $block_render_array['label'] = ['#markup' => $block["layout_builder_browser_data"]->label()];
       $link = [
-        '#type' => 'link',
+        '#theme' => 'lb_browser_block',
         '#title' => $block_render_array,
         '#url' => Url::fromRoute('layout_builder.add_block',
           [
@@ -62,7 +62,6 @@ class OverriddenBrowserController extends BrowserController {
         '#attributes' => $attributes,
       ];
 
-      $links[] = $link;
       $pieces = explode(':', $block_id);
       $bundle = $pieces[1] ?? NULL;
       if ($block['id'] == 'inline_block') {
@@ -72,7 +71,7 @@ class OverriddenBrowserController extends BrowserController {
         if (!isset($block_ids_by_bundle[$bundle])) {
           $attributes['class'][] = 'browse-library-empty';
         }
-        $links[] = [
+        $browse_link = [
           '#type' => 'link',
           '#title' => $this->t('Browse library'),
           '#url' => Url::fromRoute('layout_builder_browser_block_library.choose_block_library',
@@ -87,7 +86,10 @@ class OverriddenBrowserController extends BrowserController {
           ),
           '#attributes' => $attributes,
         ];
+        $link['#browse_link'] = $browse_link;
       }
+
+      $links[] = $link;
     }
     return $links;
   }
diff --git a/templates/layout-builder-browser-block.html.twig b/templates/layout-builder-browser-block.html.twig
new file mode 100644
index 0000000..da09b8e
--- /dev/null
+++ b/templates/layout-builder-browser-block.html.twig
@@ -0,0 +1,4 @@
+<a href="{{ url }}" {{ attributes }}>
+  {{ title }}
+</a>
+{{ browse_link }}
-- 
GitLab