:bug: clearing dom before rebuilding nodes in rblock

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

@@ -3,6 +3,8 @@
 </template>
 
 <script>
+let treeToAppend = null
+
 export default {
     name: 'rblock',
     props: {
@@ -10,6 +12,7 @@ export default {
     },
     data() {
         return {
+            isLoading: true,
             id: null,
             root: null,
             treeDepth: 0,
@@ -62,25 +65,39 @@ export default {
 
             this.treeDepth--
         },
-    },
-    mounted() {
-        if(typeof this.block !== 'object' || this.block.hasOwnProperty('gallery')) return
+        buildBlocks() {
+            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')
-        // console.log(this.block)
-        this.root.classList.add('wp-block-columns')
-        tree.appendChild(this.root)
-
-        // Loop over all the nodes and append children
-        for(const block of this.block) {
-            this.processBlock(block, this.root)
-        }
+            // Add the top-level blocks to the document tree
+            treeToAppend = new DocumentFragment()
+            this.root = document.createElement('div')
+            // console.log(this.block)
+            this.root.classList.add('wp-block-columns')
+            treeToAppend.appendChild(this.root)
 
+            // Loop over all the nodes and append children
+            if(this.block.length == 1) {
+                for(const block of this.block) {
+                    this.processBlock(block, this.root)
+                }
+            }
+            else {
+                console.warn('more than one block in here')
+            }
+        },
+    },
+    mounted() {
         // Append the final product to DOM
-        document.getElementById(`block-${this.$.uid}`).appendChild(tree)
-
+        this.buildBlocks()
+        document.getElementById(`block-${this.$.uid}`).innerHTML = ''
+        document.getElementById(`block-${this.$.uid}`).appendChild(treeToAppend)
+    },
+    watch: {
+        block(newVal, oldVal) {
+            this.buildBlocks()
+            document.getElementById(`block-${this.$.uid}`).innerHTML = ''
+            document.getElementById(`block-${this.$.uid}`).appendChild(treeToAppend)
+        }
     }
 }
 </script>

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

@@ -12,10 +12,10 @@ figure.block.embed(v-if="block[0].blockName == 'core/embed'")
 
 //- Block clicking on certain block elements
 //- so we can choose when to open the gallery
-rblock(v-else-if="typeof block === 'object'" :block="block" @click.prevent.stop="openGallery")
+rblock(:block="block" @click.prevent.stop="openGallery")
 
-.block.single(v-else)
-    .single--content(v-html="block")
+//- .block.single(v-else)
+//-     .single--content(v-html="block")
 </template>
 
 <script>
@@ -28,10 +28,10 @@ export default {
     },
     methods: {
         fixYoutubeUrl(url) {
-            let videoUid = url.split('https://youtu.be/').filter(pieces => pieces.length > 0)[0]
+            let videoUid = url.split('https://youtu.be/')[1]
 
             if(!videoUid) {
-                videoUid = url.split('https://www.youtube.com/watch?v=').filter(pieces => pieces.length > 0)[0]
+                videoUid = url.split('https://www.youtube.com/watch?v=')[1]
             }
 
             return `https://www.youtube.com/embed/${videoUid}`

vue-theme/src/pages/list.vue

@@ -72,15 +72,17 @@ export default {
 
             let sort = this.sortBy ? this.sortBy : this.$route.path.split('/').pop()
             
-            console.log('trying to sort by:, sort')
+            console.log('trying to sort by:', sort)
+            console.log('includes:', Object.values(sortTypes).includes(sort))
 
-            // Seperate sorting from post slugs
-            if(sort && Object.values(sortTypes).includes(sort)) { 
-                // Don't dispatch if there's no type
-                if(this.type) {
-                    this.$store.dispatch(this.dispatchName, sort)
-                }
+            // Is this a sort type?
+            if(this.type !== sort || !Object.values(sortTypes).includes(sort)) sort = null
+            
+            // Don't dispatch if there's no type
+            if(this.type) {
+                this.$store.dispatch(this.dispatchName, sort)
             }
+            
             if(this.$store.state.hero.url !== type) this.$store.commit('SET_HERO', type)
         }
     },
@@ -88,6 +90,7 @@ export default {
         $route(to, from){
             let type = convertTitleCase(this.type)
             let sort = this.sortBy ? this.sortBy : to.path.split('/').pop()
+            
             if(!this[`all${type}Loaded`] || sort) this.setHeroAndGetPosts()
         }
     },

vue-theme/src/pages/single.vue

@@ -18,7 +18,7 @@
 
         block.post-single.block-wrapper(v-for="(block, index) in post.blocks" :block="block" @open-gallery="openGallery" :key="`block-${index}`")
 
-        credits(v-if="type === 'episodes'" :post="post")
+        credits(v-if="type === 'episodes' && post" :post="post")
 
     sidebar(v-if="sidebar" :type="`${type}`" layout="single")
         .shadow(v-if="Object.keys(p2pPostsByType).length" v-for="p2pPostType in Object.keys(p2pPostsByType)")
@@ -153,6 +153,9 @@ export default {
              * !: posts watcher fires when this finishes
              */
             let type = convertTitleCase(this.type)
+            
+            if(!this.$store.state[this.type]) return 
+
             let allPostsOfType = this.$store.state[this.type].all
 
             /**