:sparkles: recursively dealing with content blocks

vue-theme/src/components/block.vue

@@ -1,29 +0,0 @@
-<template lang="pug">
-.block
-    p block component
-    p {{ block }}
-</template>
-
-<script>
-
-export default {
-    props: {
-        block: { required: true }
-    },
-    data() {
-        return {
-        }
-    },
-    computed: {
-    },
-    methods: {
-    },
-    created() {
-  
-    }
-}
-</script>
-
-<style lang="postcss">
-.block
-</style>

vue-theme/src/components/content-block/block-recursive.vue

@@ -0,0 +1,90 @@
+<template lang="pug">
+.block.recursive(:id="`block-${this.$.uid}`")
+</template>
+
+<script>
+export default {
+    name: 'rblock',
+    props: {
+        block: { required: true }
+    },
+    data() {
+        return {
+            id: null,
+            root: null,
+            treeDepth: 0,
+            currentParentNode: null,
+            prevDepth: 0,
+            ancestors: []
+        }
+    },
+    methods: {
+        toEl(html) {
+            var template = document.createElement('template')
+            html = html.trim() // Never return a text node of whitespace as the result
+            template.innerHTML = html
+            return template.content.firstChild
+        },
+        processBlock(block, root) {
+            this.treeDepth++
+
+            if(this.treeDepth === 1) {
+                // Add the base nodes
+                // Don't forget that this is recursive (see line: 49)
+                this.currentParentNode = this.toEl(block.innerHTML)
+                this.ancestors.push(this.currentParentNode)
+                root.appendChild(this.currentParentNode)
+            } else {
+            
+                // You need to create a REFERENCE to this node
+                // So you can target it later as a parent
+                // If you don't create a reference then you'll
+                // be creating a new <el> and will lose all
+                // parent-child relationship
+                if(this.treeDepth > this.prevDepth) {
+                    this.ancestors.push(this.currentParentNode)
+                } else {
+                    this.ancestors.pop()
+                }
+
+                this.currentParentNode = this.toEl(block.innerHTML)
+                this.ancestors[this.ancestors.length - 1].appendChild(this.currentParentNode)
+            }
+
+            if(this.currentParentNode.className === 'wp-block-columns') {
+                this.currentParentNode.classList.add('f-row')
+                this.currentParentNode.classList.add('start')
+            }
+            
+            if(!block.innerBlocks) return
+            
+            this.prevDepth = this.treeDepth
+
+            // !: Process any children recursively
+            for(let childBlock of block.innerBlocks) {
+                this.processBlock(childBlock, this.currentParentNode)
+            }
+
+            this.treeDepth--
+        },
+    },
+    mounted() {
+        if(typeof this.block !== 'object' || this.block.hasOwnProperty('gallery')) return
+
+        // Add the top-level blocks to the document tree
+        const tree = new DocumentFragment()
+        this.root = document.createElement('div')
+        tree.appendChild(this.root)
+
+        // Loop over all the nodes and append children
+        for(const block of this.block) {
+            this.processBlock(block, this.root)
+        }
+
+        // Append the final product to DOM
+        document.getElementById(`block-${this.$.uid}`).appendChild(tree)
+
+    }
+}
+</script>
+

vue-theme/src/components/content-block/block.vue

@@ -0,0 +1,30 @@
+<template lang="pug">
+.block.gallery(v-if="block.hasOwnProperty('gallery')")
+    p place-holder gallery {{ block.gallery }}
+
+rblock(v-else-if="typeof block === 'object'" :block="block")
+        
+.block.single(v-else)
+    .single--content(v-html="block")
+</template>
+
+<script>
+import rblock from './block-recursive'
+
+export default {
+    components: { rblock },
+    props: {
+        block: { required: true }
+    },
+    data() {
+        return {
+        }
+    },
+    computed: {
+    }
+}
+</script>
+
+<style lang="postcss">
+.block
+</style>

vue-theme/src/pages/single.vue

@@ -9,14 +9,7 @@
                 p start: {{ dateFrom(post.start) }}
                 p end: {{ dateFrom(post.end) }}
 
-
-        .post-single.block-wrapper(v-for="(block, index) in post.blocks" :key="`block-${index}`")
-            block(:block="block")
-            p(v-if="block.hasOwnProperty('gallery')") {{ block }}
-            p(v-else-if="block.length && typeof block === 'object'" v-for="inner in block") {{ inner }}
-            p(v-else) single {{ block }}
-            //- Just a regular block (html or img)
-            //- .block(v-else v-html="block")
+        block.post-single.block-wrapper(v-for="(block, index) in post.blocks" :block="block" :key="`block-${index}`")
 
     sidebar(v-if="sidebar" :type="`${type}`")
         .shadow
@@ -28,7 +21,7 @@
 <script>
 import sidebar from '@/components/sidebars/sidebar'
 import gallery from '@/components/gallery/'
-import block from '@/components/block'
+import block from '@/components/content-block/block'
 
 import { postTypeGetters } from './mixin-post-types'