feat: finds images on single page and puts into images prop

plugins/cia-endpoints/includes/class.make-endpoint.php

@@ -61,6 +61,9 @@ class Make_Endpoint_For extends WP_REST_Controller {
         $filtered[content] = $item->post_content;
         $filtered[blocks] = get_rearrange_blocks($item->blocks);
         
+        // Log the request with PHP Console
+        if ( class_exists( 'PC' ) ) PC::debug( $item, 'Blocks' );
+        
         return $filtered;
         // return $item;
     }

plugins/cia-endpoints/includes/reformat-blocks.php

@@ -1,6 +1,7 @@
 <?php
     function get_rearrange_blocks($blocks) {
         $parsed_blocks = array();
+
         foreach( $blocks as $block ) {
             if(sizeof($block[innerBlocks]) < 1 && $block[innerHTML] !== "\n\n") {
                 array_push($parsed_blocks, $block[innerHTML]);

plugins/cia-post-types/cia-post-types.php

@@ -65,4 +65,3 @@ foreach ($custom_types as $type):
     $icon = get_icon($type);
     add_action( 'init', [ new PostType($type, $icon), 'register_post_type' ] );
 endforeach;
-

vue-theme/src/components/gallery.vue

@@ -2,21 +2,33 @@
 .gallery.f-col.center(v-if="fullscreengallery")
     button(@click="hideGallery") hide
     ul
-        li
-            h1 hello world
-        li
-            h1 hello world again
+        li(v-for="(image, i) of images" :class="{ active: i === selected }")
+            .image-wrapper.f-row.center
+                img(:src="image")
     .controls.f-row
-        button(@click="hideGallery") <<<
-        button(@click="hideGallery") >>>
+        button(@click="prev") <
+        .f-grow
+        button(@click="next") >
 </template>
 
 <script>
 export default {
     props: {
+        images: { type: Array },
         fullscreengallery: { type: Boolean }
     },
+    data() { 
+        return {
+            selected: 0
+        }
+    },
     methods: {
+        prev() {
+            this.selected > 0 ? this.selected-- : this.selected = this.images.length - 1
+        },
+        next() {
+            this.selected < this.images.length - 1 ? this.selected++ : this.selected = 0
+        },
         hideGallery() {
             this.$emit('close')
         }
@@ -30,7 +42,7 @@ export default {
     top: 0
     left: 0
     width: 100%
-    height: 100vw
+    height: 100%
     background-color: blue
     opacity: 75%
     z-index: 1001
@@ -40,6 +52,17 @@ export default {
         z-index: 1011
     ul
         list-style: none
-        h1
-            color: green
+        li
+            display: none
+            &.active
+                display: block
+            .image-wrapper
+                height: 100%
+                width: 50vw
+                background-color: yellow
+            h1
+                color: green
+    .controls
+        position: absolute
+        bottom: 5em
 </style>

vue-theme/src/pages/single.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
-.page--single.f-row.between
-    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false")
+.page--single.f-row.between(v-if="$route.params.slug")
+    gallery(v-if="images.length" :fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images")
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
             button(@click="fullscreengallery = true") fullscreen
-        section
+        section(v-if="posts[$route.params.slug]")
             h4 {{ posts[$route.params.slug].title }}
             .block-wrapper(v-for="block in posts[$route.params.slug].blocks" v-html="block")
     sidebar(v-if="sidebar" :type="`${type}`")
@@ -32,6 +32,7 @@ export default {
     },
     data() {
         return {
+            images: [], 
             fullscreengallery: false
         }
     },
@@ -62,11 +63,36 @@ export default {
             }, {})
         },
     },
+    methods: {
+        checkForImages(post) {
+            const allBlocks = post[this.$route.params.slug].blocks.map(block => {
+                if(block) return block
+            })
+            allBlocks.forEach(block => {
+                if(!block) return
+
+                const domparser = new DOMParser()
+                const doc = domparser.parseFromString(block, 'text/html')
+
+                const gallery = doc.querySelectorAll('.blocks-gallery-item img')
+                if(gallery) {
+                    this.images = [].slice.call(gallery).map(item => { return item.src })
+                }
+            })
+        }
+    },
+    watch: {
+        posts(newVal, oldVal) {
+            this.checkForImages(newVal)
+        }
+    },
     mounted() {
         // TODO: this should be conditional after checking vuex state
         let type = this.$route.params.type
         type = type.charAt(0).toUpperCase() + type.slice(1)
         this.$store.dispatch(`getAll${type}`)
+        
+        console.log(this.images)
     }
 }
 </script>