wip

resources/css/_breadcrumb.css

@@ -0,0 +1,36 @@
+.block-breadcrumb {
+    background-color: #fff;
+    position: sticky;
+    left: 0px;
+    bottom: 0px;
+    display: flex;
+    gap: 4px;
+    border-top: 1px solid var(--paver-border-color);
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    font-size: .8rem;
+    font-weight: 500;
+
+    li {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+
+        svg {
+            width: 18px;
+            color: var(--paver-border-color);
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:last-of-type {
+            svg {
+                display: none;
+            }
+        }
+    }
+}

resources/css/_toolbar.css

@@ -3,26 +3,43 @@
 }
 
 .block-toolbar {
-  border: 1px solid #000;
-  border-radius: 3px;
+  /* border-radius: 0 0 0 3px; */
   display: none;
+  align-items: center;
   z-index: 100;
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
   animation: fadeIn 0.2s ease-in-out;
 
   position: absolute;
-  right: 5px;
-  top: 5px;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  justify-content: space-between;
   color: #000;
 
   button:last-of-type {
     border-right: none;
-    border-radius: 0 3px 3px 0;
+    /* border-radius: 0 3px 3px 0; */
   }
 
   button:first-of-type {
-    border-radius: 3px 0 0 3px;
+    /* border-radius: 3px 0 0 3px; */
+  }
+
+  .block-toolbar-actions {
+    display: flex;
+  }
+
+  .block-toolbar-info {
+    background-color: var(--paver-color-primary);
+    color: rgba(255, 255, 255, .75);
+    padding: 0 5px;
+    font-size: .8rem;
+    align-self: stretch;
+    display: flex;
+    align-items: center;
+    font-weight: 500;
   }
 
   button {
@@ -32,11 +49,12 @@
     align-items: center;
     padding: 0 7px;
     height: 30px;
-    background-color: #f9f9f9;
-    border-right: 1px solid #000;
+    border-right: 1px solid rgba(255, 255, 255, .15);
+    background-color: var(--paver-color-primary);
+    color: rgba(255, 255, 255, .75);
 
     &:hover {
-      color: var(--paver-color-primary);
+      color: #fff;
     }
 
     svg {
@@ -45,9 +63,9 @@
     }
   }
 }
-
+/*
 .sortable-ghost {
   .block-toolbar {
     background: #ff0000;
   }
-}
+} */

resources/css/frame.css

@@ -2,6 +2,7 @@
 @import "_animations.css";
 @import "_utilities.css";
 @import "_toolbar.css";
+@import '_breadcrumb.css';
 
 html,
 body {
@@ -16,6 +17,7 @@ body {
 
 .sortable {
   min-height: 50px;
+  padding: 5px 0;
 }
 
 /* body {
@@ -24,7 +26,8 @@ body {
 } */
 
 .editor-root {
-  min-height: 300px;
+    padding: 0;
+    min-height: 300px;
 }
 
 .sortable-ghost {
@@ -73,7 +76,7 @@ body {
   }
 
   &:hover::after {
-    border-color: rgba(3, 124, 186, 0.25);
+    border-color: var(--paver-color-primary);
   }
 }
 
@@ -85,7 +88,7 @@ body {
     left: 0;
     right: 0;
     bottom: 0;
-    border: 1px solid rgba(3, 124, 186);
+    border: 1px solid var(--paver-color-primary);
     pointer-events: none;
   }
 }

resources/js/frame.js

@@ -20,6 +20,8 @@ window.PaverFrame = function (data) {
 
         blocks: [],
 
+        breadcrumb: [],
+
         editingBlock: null,
 
         editingElement: null,
@@ -33,6 +35,9 @@ window.PaverFrame = function (data) {
             Shortcuts.expand(() => this.expand())
             Shortcuts.exit(() => this.exit())
 
+            Shortcuts.selectParentBlock(() => this.selectParentBlock())
+            helpers.listenFromFrame('selectParentBlock', () => this.selectParentBlock())
+
             document.addEventListener('loading', () => helpers.dispatchToParent('loading'))
             document.addEventListener('loaded', () => helpers.dispatchToParent('loaded'))
 
@@ -67,33 +72,70 @@ window.PaverFrame = function (data) {
             helpers.dispatchToParent('revert', {})
         },
 
+        selectParentBlock() {
+            if (this.breadcrumb.length > 1) {
+                this.edit(this.breadcrumb[this.breadcrumb.length - 2].target)
+            }
+        },
+
         trash(e) {
             e.preventDefault()
 
             if (!confirm(this.text('Are you sure you want to delete this block?'))) {
                 return
             }
 
-            let target = e.currentTarget.parentNode.parentNode
+            let target = e.currentTarget.closest('.paver__block')
             let block = target.getAttribute('data-id')
 
             helpers.dispatchToParent('delete', JSON.parse(JSON.stringify(block)))
+            this.breadcrumb = []
         },
 
         clone(e) {
-            let target = e.currentTarget.parentNode.parentNode
+            let target = e.currentTarget.closest('.paver__block')
             // let block = JSON.parse(target.getAttribute('data-block'))
 
             helpers.dispatchToParent('clone', JSON.parse(JSON.stringify({ blockHtml: target.outerHTML })))
+
+            this.breadcrumb = []
+        },
+
+        getBlockBreadcrumb(block) {
+            let breadcrumb = [];
+            let current = block;
+
+            while (current) {
+                breadcrumb.push({target: current, data: JSON.parse(current.getAttribute('data-block'))})
+                current = current.parentElement.closest('.paver__block')
+            }
+
+            return breadcrumb.reverse()
         },
 
         async edit(e) {
-            let target = e.currentTarget.parentNode.parentNode
+            let target = null;
+
+            if (e instanceof Event) {
+                if (e.currentTarget.classList.contains('paver__block')) {
+                    target = e.currentTarget
+                } else {
+                    target = e.currentTarget.closest('.paver__block')
+                }
+            } else if (e instanceof HTMLElement) {
+                if (e.classList.contains('paver__block')) {
+                    target = e
+                } else {
+                    target = e.closest('.paver__block')
+                }
+            }
 
-            if (target.classList.contains('paver__active-block')) {
-                return;
+            if (!target || target.classList.contains('paver__active-block')) {
+                return
             }
 
+            this.breadcrumb = this.getBlockBreadcrumb(target)
+
             let block = JSON.parse(target.getAttribute('data-block'))
 
             document.querySelectorAll('.paver__active-block').forEach((el) => {

resources/js/paver.js

@@ -17,6 +17,8 @@ window.Paver = function (data) {
     return {
         ...Localization,
 
+        breadcrumb: [],
+
         texts: data.texts,
 
         api: new ApiClient(data.api),
@@ -138,15 +140,19 @@ window.Paver = function (data) {
         determineAllowedBlocks() {
             this.allowedBlocks = []
 
-            this.root().querySelector('.paver__active-block').querySelectorAll('.paver__sortable').forEach(element => {
-                if(! element.hasAttribute('data-allow-blocks')) {
-                    return
-                }
+            let element = this.root().querySelector('.paver__active-block .paver__sortable')
+
+            if(! element) {
+                return
+            }
 
-                let elementAllowedBlocks = JSON.parse(element.getAttribute('data-allow-blocks'))
+            if(! element.hasAttribute('data-allow-blocks')) {
+                return
+            }
 
-                this.allowedBlocks = [...this.allowedBlocks, ...elementAllowedBlocks]
-            })
+            let elementAllowedBlocks = JSON.parse(element.getAttribute('data-allow-blocks'))
+
+            this.allowedBlocks = [...this.allowedBlocks, ...elementAllowedBlocks]
 
             this.log('Blocks allowed in this block:', this.allowedBlocks)
         },
@@ -191,9 +197,15 @@ window.Paver = function (data) {
 
             helpers.listenFromFrame('expand', (event) => this.toggleExpand())
 
+            Shortcuts.selectParentBlock(() => {
+                helpers.dispatchToFrame(this.$refs.editor, 'selectParentBlock')
+            })
+
             helpers.listenFromFrame('loading', () => this.isLoading())
             helpers.listenFromFrame('loaded', () => this.isLoaded())
 
+            helpers.listenFromFrame('updateBreadcrumb', (event) => this.breadcrumb = event.breadcrumb)
+
             document.addEventListener('loading', () => this.isLoading())
             document.addEventListener('loaded', () => this.isLoaded())
 
@@ -298,7 +310,6 @@ window.Paver = function (data) {
             })
         },
 
-
         determineVisibleInsertableBlocks() {
             const searchTerm = this.blockInserter.search.trim().toLowerCase()
             const allowedBlocks = this.allowedBlocks.length ? this.allowedBlocks : null
@@ -308,11 +319,18 @@ window.Paver = function (data) {
             let totalVisible = 0
 
             blocks.forEach(block => {
-                const blockName = block.getAttribute('data-block').trim().toLowerCase()
+                const blockData = JSON.parse(block.getAttribute('data-block'))
+                const blockName = blockData.block.trim().toLowerCase()
+                const isHidden = block.classList.contains('paver__hide_from_block_inserter')
                 const matchesSearch = !searchTerm || blockName.includes(searchTerm)
                 const isAllowed = !allowedBlocks || allowedBlocks.includes(blockName)
                 const withinLimit = this.blockInserter.showAll || visibleCount < this.blockInserter.limit
 
+                if (isHidden && (!allowedBlocks || !allowedBlocks.includes(blockName))) {
+                    block.style.display = 'none'
+                    return
+                }
+
                 if (matchesSearch && isAllowed) {
                     totalVisible++
                     block.style.display = withinLimit ? 'flex' : 'none'
@@ -427,7 +445,7 @@ window.Paver = function (data) {
 
                         let allowedBlocks = JSON.parse(to.el.getAttribute('data-allow-blocks'))
 
-                        let draggedBlock = draggedElement.getAttribute('data-block').trim().toLowerCase()
+                        let draggedBlock = JSON.parse(draggedElement.getAttribute('data-block')).block.trim().toLowerCase()
 
                         return allowedBlocks.some(block => block.trim().toLowerCase() === draggedBlock)
                     }
@@ -531,14 +549,15 @@ window.Paver = function (data) {
         },
 
         async fetchBlock(evt) {
-            const block = evt.item.getAttribute('data-block')
+            const block = JSON.parse(evt.item.getAttribute('data-block'))
+
             try {
-                const response = await this.api.fetchBlock(block, this.api.payload)
+                const response = await this.api.fetchBlock(block.block, this.api.payload)
 
                 const newElement = document.createElement('div')
                 newElement.innerHTML = response.render
 
-                newElement.firstElementChild.setAttribute('data-block', JSON.stringify({block, data: response.data}))
+                newElement.firstElementChild.setAttribute('data-block', JSON.stringify({...block, data: response.data}))
                 newElement.firstElementChild.setAttribute('data-id', response.id)
 
                 evt.item.outerHTML = newElement.innerHTML

resources/js/shortcuts.js

@@ -24,6 +24,16 @@ const Shortcuts = {
             if (event.key === 'Escape') {
                 event.preventDefault()
 
+                callback()
+            }
+        })
+    },
+
+    selectParentBlock(callback) {
+        document.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowUp') {
+                event.preventDefault()
+
                 callback()
             }
         })