From b7631364ec8bba4013e9b6bc7d67975251d8aed8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A1vid=20Malich?= <kontakt@davidmalich.eu>
Date: Wed, 1 Nov 2023 04:19:25 +0100
Subject: [PATCH] Added tablet preview and categories for blocks

---
 public/editor.js                 |  2 +-
 resources/js/editor.js           |  1 +
 resources/views/editor.blade.php | 63 ++++++++++++++++++++++++--------
 src/Blocks/Block.php             |  8 ++++
 4 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/public/editor.js b/public/editor.js
index 69d2810..b81c53c 100644
--- a/public/editor.js
+++ b/public/editor.js
@@ -1 +1 @@
-(()=>{var e,t={950:()=>{function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(!e)return;if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}window.dropblockeditor=function(t){return{iframe:null,dropList:null,insert:!1,mobile:!1,lastTopPos:0,cursorPos:0,currentDragItem:null,insertBeforeClasses:["after:opacity-100","after:top-0","after:h-[5px]"],insertAfterClasses:["after:opacity-100","after:bottom-0","after:h-[5px]"],init:function(){var e=this;this.iframe=document.getElementById("frame"),this.dropList=document.querySelector("[drop-list]"),document.addEventListener("keydown",(function(t){return e.undo(t,e)})),document.addEventListener("keydown",(function(t){return e.redo(t,e)})),this.initListeners(),this.iframe.addEventListener("load",(function(){e.initListeners(),e.iframe.contentWindow.scrollTo(0,e.lastTopPos)}))},initListeners:function(){var t=this,r=this.iframe.contentWindow.document;r.addEventListener("keydown",(function(e){return t.undo(e,t)})),r.addEventListener("keydown",(function(e){return t.redo(e,t)})),this.dropList.querySelectorAll("[drag-item]").forEach((function(e){e.addEventListener("dragstart",(function(e){e.target.setAttribute("inserting",!0)})),e.addEventListener("dragend",(function(e){e.target.removeAttribute("inserting")})),e.addEventListener("dragover",(function(e){return e.preventDefault()}))})),r.querySelectorAll("[drop-placeholder]").forEach((function(e){e.addEventListener("dragover",(function(e){return e.preventDefault()})),e.addEventListener("dragenter",(function(e){e.preventDefault(),e.target.classList.add("bg-gray-200/50","animate-pulse")})),e.addEventListener("dragleave",(function(e){e.preventDefault(),e.target.classList.remove("bg-gray-200/50","animate-pulse")})),e.addEventListener("drop",(function(e){if(e.preventDefault,e.target.closest("[drop-placeholder]")){var r=document.querySelector("[inserting]");return null!=r?(t.component().call("insertBlock",r.dataset.block,0),r.removeAttribute("inserting"),void(r=!1)):void 0}}))})),r.querySelectorAll("[drag-item]").forEach((function(n){n.addEventListener("click",(function(e){Livewire.dispatch("blockEditComponentSelected",{blockId:e.target.closest("[drag-item]").dataset.block})}),!1),n.addEventListener("dragstart",(function(e){e.target.setAttribute("dragging",!0),t.currentDragItem=n})),n.addEventListener("dragover",(function(r){r.preventDefault();var n=r.target.closest("[drag-item]");if(t.currentDragItem!==n){var a,i,o=t.beforeOrAfterEl(r,n),s=null!=t.currentDragItem&&t.currentDragItem.previousElementSibling;if(n!=(null!=t.currentDragItem&&t.currentDragItem.nextElementSibling)&&"before"===o)(a=n.classList).remove.apply(a,e(t.insertAfterClasses)),(i=n.classList).add.apply(i,e(t.insertBeforeClasses));else if(n!=s&&"after"===o){var l,c;(l=n.classList).remove.apply(l,e(t.insertBeforeClasses)),(c=n.classList).add.apply(c,e(t.insertAfterClasses))}else{var d;(d=n.classList).remove.apply(d,e(t.insertBeforeClasses).concat(e(t.insertAfterClasses)))}}})),n.addEventListener("dragend",(function(e){e.target.removeAttribute("dragging"),t.currentDragItem=null})),n.addEventListener("dragenter",(function(e){e.target.hasAttribute("drag-item")&&e.target.setAttribute("is-target",!0)})),n.addEventListener("dragleave",(function(r){var n;(r.preventDefault,r.target.hasAttribute("is-target"))&&(n=r.target.classList).remove.apply(n,e(t.insertAfterClasses).concat(e(t.insertBeforeClasses)))})),n.addEventListener("drop",(function(n){n.preventDefault;var a=r.querySelector("[dragging]"),i=document.querySelector("[inserting]");if(n.target.closest("[drag-item]")){var o;if(n.target.hasAttribute("drag-item"))(o=n.target.classList).remove.apply(o,e(t.insertAfterClasses).concat(e(t.insertBeforeClasses)));t.lastTopPos=r.documentElement.scrollTop;var s=t.beforeOrAfterEl(n,n.target.closest("[drag-item]"));if(null!=i)return t.component().call("insertBlock",i.dataset.block,n.target.closest("[drag-item]").dataset.block,s),i.removeAttribute("inserting"),void(i=!1);"after"===s?n.target.closest("[drag-item]").after(a):n.target.closest("[drag-item]").before(a);var l=Array.from(r.querySelectorAll("[drag-item]")).map((function(e){return e.dataset.block}));t.component().call("reorder",l)}}))}))},isBefore:function(e,t,r){var n=!1,a=!1,i=!1;return e.querySelectorAll("[drag-item]").forEach((function(e){i||(a=!!a||e==r,!1!==(n=!!n||e==t)||!0!==a||(i=!0))})),i},beforeOrAfterEl:function(e,t){var r=t.getBoundingClientRect(),n=r.y,a=n+r.height/2,i=a,o=i+r.height/2,s=e.clientY>=n&&e.clientY<=a,l=e.clientY>=i&&e.clientY<=o;return s?"before":!!l&&"after"},component:function(){return Livewire.find(frame.closest("[wire\\:id]").getAttribute("wire:id"))},undo:function(e,t){!e.ctrlKey&&!e.metaKey||e.shiftKey||"z"!==e.key||(e.preventDefault(),-1!=navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("Chrome")&&window.history.forward(),t.component().call("undo"))},redo:function(e,t){(e.ctrlKey||e.metaKey)&&e.shiftKey&&"z"===e.key&&(e.preventDefault(),-1!=navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("Chrome")&&window.history.forward(),t.component().call("redo"))}}}},611:()=>{}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.m=t,e=[],n.O=(t,r,a,i)=>{if(!r){var o=1/0;for(d=0;d<e.length;d++){for(var[r,a,i]=e[d],s=!0,l=0;l<r.length;l++)(!1&i||o>=i)&&Object.keys(n.O).every((e=>n.O[e](r[l])))?r.splice(l--,1):(s=!1,i<o&&(o=i));if(s){e.splice(d--,1);var c=a();void 0!==c&&(t=c)}}return t}i=i||0;for(var d=e.length;d>0&&e[d-1][2]>i;d--)e[d]=e[d-1];e[d]=[r,a,i]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={192:0,982:0};n.O.j=t=>0===e[t];var t=(t,r)=>{var a,i,[o,s,l]=r,c=0;if(o.some((t=>0!==e[t]))){for(a in s)n.o(s,a)&&(n.m[a]=s[a]);if(l)var d=l(n)}for(t&&t(r);c<o.length;c++)i=o[c],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(d)},r=self.webpackChunk=self.webpackChunk||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),n.O(void 0,[982],(()=>n(950)));var a=n.O(void 0,[982],(()=>n(611)));a=n.O(a)})();
\ No newline at end of file
+(()=>{var e,t={950:()=>{function e(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(!e)return;if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return t(e,r)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}window.dropblockeditor=function(t){return{iframe:null,dropList:null,insert:!1,mobile:!1,tablet:!1,lastTopPos:0,cursorPos:0,currentDragItem:null,insertBeforeClasses:["after:opacity-100","after:top-0","after:h-[5px]"],insertAfterClasses:["after:opacity-100","after:bottom-0","after:h-[5px]"],init:function(){var e=this;this.iframe=document.getElementById("frame"),this.dropList=document.querySelector("[drop-list]"),document.addEventListener("keydown",(function(t){return e.undo(t,e)})),document.addEventListener("keydown",(function(t){return e.redo(t,e)})),this.initListeners(),this.iframe.addEventListener("load",(function(){e.initListeners(),e.iframe.contentWindow.scrollTo(0,e.lastTopPos)}))},initListeners:function(){var t=this,r=this.iframe.contentWindow.document;r.addEventListener("keydown",(function(e){return t.undo(e,t)})),r.addEventListener("keydown",(function(e){return t.redo(e,t)})),this.dropList.querySelectorAll("[drag-item]").forEach((function(e){e.addEventListener("dragstart",(function(e){e.target.setAttribute("inserting",!0)})),e.addEventListener("dragend",(function(e){e.target.removeAttribute("inserting")})),e.addEventListener("dragover",(function(e){return e.preventDefault()}))})),r.querySelectorAll("[drop-placeholder]").forEach((function(e){e.addEventListener("dragover",(function(e){return e.preventDefault()})),e.addEventListener("dragenter",(function(e){e.preventDefault(),e.target.classList.add("bg-gray-200/50","animate-pulse")})),e.addEventListener("dragleave",(function(e){e.preventDefault(),e.target.classList.remove("bg-gray-200/50","animate-pulse")})),e.addEventListener("drop",(function(e){if(e.preventDefault,e.target.closest("[drop-placeholder]")){var r=document.querySelector("[inserting]");return null!=r?(t.component().call("insertBlock",r.dataset.block,0),r.removeAttribute("inserting"),void(r=!1)):void 0}}))})),r.querySelectorAll("[drag-item]").forEach((function(n){n.addEventListener("click",(function(e){Livewire.dispatch("blockEditComponentSelected",{blockId:e.target.closest("[drag-item]").dataset.block})}),!1),n.addEventListener("dragstart",(function(e){e.target.setAttribute("dragging",!0),t.currentDragItem=n})),n.addEventListener("dragover",(function(r){r.preventDefault();var n=r.target.closest("[drag-item]");if(t.currentDragItem!==n){var a,i,o=t.beforeOrAfterEl(r,n),s=null!=t.currentDragItem&&t.currentDragItem.previousElementSibling;if(n!=(null!=t.currentDragItem&&t.currentDragItem.nextElementSibling)&&"before"===o)(a=n.classList).remove.apply(a,e(t.insertAfterClasses)),(i=n.classList).add.apply(i,e(t.insertBeforeClasses));else if(n!=s&&"after"===o){var l,c;(l=n.classList).remove.apply(l,e(t.insertBeforeClasses)),(c=n.classList).add.apply(c,e(t.insertAfterClasses))}else{var d;(d=n.classList).remove.apply(d,e(t.insertBeforeClasses).concat(e(t.insertAfterClasses)))}}})),n.addEventListener("dragend",(function(e){e.target.removeAttribute("dragging"),t.currentDragItem=null})),n.addEventListener("dragenter",(function(e){e.target.hasAttribute("drag-item")&&e.target.setAttribute("is-target",!0)})),n.addEventListener("dragleave",(function(r){var n;(r.preventDefault,r.target.hasAttribute("is-target"))&&(n=r.target.classList).remove.apply(n,e(t.insertAfterClasses).concat(e(t.insertBeforeClasses)))})),n.addEventListener("drop",(function(n){n.preventDefault;var a=r.querySelector("[dragging]"),i=document.querySelector("[inserting]");if(n.target.closest("[drag-item]")){var o;if(n.target.hasAttribute("drag-item"))(o=n.target.classList).remove.apply(o,e(t.insertAfterClasses).concat(e(t.insertBeforeClasses)));t.lastTopPos=r.documentElement.scrollTop;var s=t.beforeOrAfterEl(n,n.target.closest("[drag-item]"));if(null!=i)return t.component().call("insertBlock",i.dataset.block,n.target.closest("[drag-item]").dataset.block,s),i.removeAttribute("inserting"),void(i=!1);"after"===s?n.target.closest("[drag-item]").after(a):n.target.closest("[drag-item]").before(a);var l=Array.from(r.querySelectorAll("[drag-item]")).map((function(e){return e.dataset.block}));t.component().call("reorder",l)}}))}))},isBefore:function(e,t,r){var n=!1,a=!1,i=!1;return e.querySelectorAll("[drag-item]").forEach((function(e){i||(a=!!a||e==r,!1!==(n=!!n||e==t)||!0!==a||(i=!0))})),i},beforeOrAfterEl:function(e,t){var r=t.getBoundingClientRect(),n=r.y,a=n+r.height/2,i=a,o=i+r.height/2,s=e.clientY>=n&&e.clientY<=a,l=e.clientY>=i&&e.clientY<=o;return s?"before":!!l&&"after"},component:function(){return Livewire.find(frame.closest("[wire\\:id]").getAttribute("wire:id"))},undo:function(e,t){!e.ctrlKey&&!e.metaKey||e.shiftKey||"z"!==e.key||(e.preventDefault(),-1!=navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("Chrome")&&window.history.forward(),t.component().call("undo"))},redo:function(e,t){(e.ctrlKey||e.metaKey)&&e.shiftKey&&"z"===e.key&&(e.preventDefault(),-1!=navigator.userAgent.indexOf("Safari")&&-1==navigator.userAgent.indexOf("Chrome")&&window.history.forward(),t.component().call("redo"))}}}},611:()=>{}},r={};function n(e){var a=r[e];if(void 0!==a)return a.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,n),i.exports}n.m=t,e=[],n.O=(t,r,a,i)=>{if(!r){var o=1/0;for(d=0;d<e.length;d++){for(var[r,a,i]=e[d],s=!0,l=0;l<r.length;l++)(!1&i||o>=i)&&Object.keys(n.O).every((e=>n.O[e](r[l])))?r.splice(l--,1):(s=!1,i<o&&(o=i));if(s){e.splice(d--,1);var c=a();void 0!==c&&(t=c)}}return t}i=i||0;for(var d=e.length;d>0&&e[d-1][2]>i;d--)e[d]=e[d-1];e[d]=[r,a,i]},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={192:0,982:0};n.O.j=t=>0===e[t];var t=(t,r)=>{var a,i,[o,s,l]=r,c=0;if(o.some((t=>0!==e[t]))){for(a in s)n.o(s,a)&&(n.m[a]=s[a]);if(l)var d=l(n)}for(t&&t(r);c<o.length;c++)i=o[c],n.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return n.O(d)},r=self.webpackChunk=self.webpackChunk||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})(),n.O(void 0,[982],(()=>n(950)));var a=n.O(void 0,[982],(()=>n(611)));a=n.O(a)})();
diff --git a/resources/js/editor.js b/resources/js/editor.js
index e6eec28..b6a98fa 100644
--- a/resources/js/editor.js
+++ b/resources/js/editor.js
@@ -7,6 +7,7 @@ window.dropblockeditor = (config) => {
         insert: false,
 
         mobile: false,
+        tablet: false,
 
         lastTopPos: 0,
 
diff --git a/resources/views/editor.blade.php b/resources/views/editor.blade.php
index 6fc0518..5cca3d2 100644
--- a/resources/views/editor.blade.php
+++ b/resources/views/editor.blade.php
@@ -9,7 +9,8 @@
     <div
         x-cloak
         x-data="dropblockeditor({
-            mobile: false
+            mobile: false,
+            tablet: false
         })"
         class="dropblockeditor flex flex-col min-h-screen bg-gray-100">
         <div class="{{ config('dropblockeditor.brand.colors.topbar_bg', 'bg-white') }} px-5 py-5 border-b text-white flex justify-between flex-initial">
@@ -43,15 +44,24 @@ class="dropblockeditor flex flex-col min-h-screen bg-gray-100">
         <div class="flex flex-initial h-full grow">
 
             <div class="relative flex-1 flex justify-center">
-                <iframe id="frame" srcdoc="{{ $result }}" class="h-full" :class="mobile ? 'w-[320px]' : 'w-full'"></iframe>
+                <iframe id="frame" srcdoc="{{ $result }}" class="h-full" :class="mobile ? 'w-[320px]' : tablet ? 'w-[768px]' : 'w-full'"></iframe>
                 <div class="absolute right-4 top-4 flex items-center bg-white rounded-md border shadow-sm">
-                    <button x-on:click="mobile = true" class="p-2 border-r" :class="mobile ? 'text-gray-800' : 'text-gray-300'">
+                    <button x-on:click="mobile = true; tablet = false" class="p-2 border-r" :class="mobile ? 'text-gray-800' : 'text-gray-300'">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />
                         </svg>
                     </button>
 
-                    <button x-on:click="mobile = false" class="p-2" :class="mobile ? 'text-gray-300' : 'text-gray-800'">
+                    <button x-on:click="mobile = false; tablet = true" class="p-2 border-r" :class="tablet ? 'text-gray-800' : 'text-gray-300'">
+{{--                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">--}}
+{{--                            <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3" />--}}
+{{--                        </svg>--}}
+                        <svg fill="none" stroke="currentColor" class="w-5 h-5" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M6,23H18a3,3,0,0,0,3-3V4a3,3,0,0,0-3-3H6A3,3,0,0,0,3,4V20A3,3,0,0,0,6,23ZM5,4A1,1,0,0,1,6,3H18a1,1,0,0,1,1,1V20a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1Zm6,14a1,1,0,1,1,1,1A1,1,0,0,1,11,18Z"></path>
+                        </svg>
+                    </button>
+
+                    <button x-on:click="mobile = false; tablet = false" class="p-2" :class="mobile || tablet ? 'text-gray-300' : 'text-gray-800'">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                             <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                         </svg>
@@ -109,20 +119,41 @@ class="dropblockeditor flex flex-col min-h-screen bg-gray-100">
                     </div>
                 </div>
                 @else
-                <div drop-list class="grid grid-cols-3 gap-4 mb-6 p-4">
-                    @foreach(collect($blocks)->map(function($block) {
-                        return $this->getBlockFromClassName($block['class']);
-                    }) as $i => $block)
-                        <div drag-item draggable="true" data-block="{{ $i }}" class="shadow-sm mb-2 text-center bg-white border border-gray-100 rounded-lg px-3 py-2 flex flex-col justify-center items-center cursor-grab active:cursor-grabbing hover:border-gray-200">
-                            @if($block->getIcon())
-                                <div class="opacity-50 mb-1">{!! $block->getIcon() !!}</div>
-                            @endif
+                <div drop-list class="flex flex-col">
+                    @php
+                        $blockGroups = collect($blocks)->map(function($block, $i) {
+                            return [
+                                'original_index' => $i,
+                                'block' => $this->getBlockFromClassName($block['class']),
+                            ];
+                        })->groupBy(function($item) {
+                            return $item['block']->getCategory();
+                        });
+                    @endphp
 
-                            <span class="text-sm">{{ $block->getTitle() }}</span>
+                    @foreach($blockGroups as $category => $categoryBlocks)
+                        <div class="mb-4">
+                            <h2 class="p-4 font-medium">{{ $category }}</h2> <!-- Display the category name -->
+                            <div class="grid grid-cols-3 gap-4 p-4">
+                                @foreach($categoryBlocks as $groupedBlock)
+                                    @php
+                                        $i = $groupedBlock['original_index']; // Retrieve the original index
+                                        $block = $groupedBlock['block'];
+                                    @endphp
 
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="opacity-25 w-4 h-4">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
-                            </svg>
+                                    <div drag-item draggable="true" data-block="{{ $i }}" class="shadow-sm mb-2 text-center bg-white border border-gray-100 rounded-lg px-3 py-2 flex flex-col justify-center items-center cursor-grab active:cursor-grabbing hover:border-gray-200">
+                                        @if($block->getIcon())
+                                            <div class="opacity-50 mb-1">{!! $block->getIcon() !!}</div>
+                                        @endif
+
+                                        <span class="text-sm">{{ $block->getTitle() }}</span>
+
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="opacity-25 w-4 h-4">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
+                                        </svg>
+                                    </div>
+                                @endforeach
+                            </div>
                         </div>
                     @endforeach
                 </div>
diff --git a/src/Blocks/Block.php b/src/Blocks/Block.php
index 9cccaf0..074bd2a 100644
--- a/src/Blocks/Block.php
+++ b/src/Blocks/Block.php
@@ -12,6 +12,8 @@ abstract class Block
 
     public $blockEditComponent;
 
+    public $category = 'Example Category';
+
     public $data = [];
 
     abstract public function render();
@@ -26,6 +28,11 @@ public function getTitle()
         return $this->title;
     }
 
+    public function getCategory()
+    {
+        return $this->category;
+    }
+
     public function getData()
     {
         return $this->data;
@@ -57,6 +64,7 @@ public function toArray()
         return [
             'data' => $this->data,
             'class' => get_class($this),
+            'category' => $this->category,
         ];
     }
 }