Merge branch 'master' into categories

Author: Bryce Flory

Diff for: README.md

@@ -68,7 +68,7 @@ add_action( 'graphql_register_types', 'coa_register_graphql_connection' );
 - ~~[ ] Use Gatsby Image for responsiveness~~ Unnecessary since using CDN
 - [ ] Lazy load images, maybe(?)
 - [x] ~~Gallery popup~~
-- [ ] EXIF data to lightbox images
+- [x] ~~EXIF data to lightbox images~~
 - [x] ~~Add social share~~
 - [x] ~~FontAwesome integration~~
 - [ ] Add page transitions

Diff for: src/blocks/Gallery/CoreGalleryBlock.data.js

@@ -13,6 +13,7 @@ module.exports = () => {
       galleryImages {
         nodes {
           mediaItemId
+          mediaItemUrl
           mediaDetails {
             meta {
               aperture

Diff for: src/blocks/Gallery/CoreGalleryBlock.js

@@ -3,44 +3,97 @@ import Lightbox from 'react-image-lightbox'
 import 'react-image-lightbox/style.css'
 
 const CoreGalleryBlock = ({ attributes, galleryImages }) => {
-console.log(attributes)
+
   const {columns, images, imageCrop, align, caption} = attributes
-  
-  // convert images JSON into array
-  let imgs = JSON.parse(images)
 
   // Set State for Lightbox
   const [photoIndex, setPhotoIndex] = useState(0)
   const [isOpen, setIsOpen] = useState(false)
 
+  // Shutter Speed conversion function
+  function sSpeed(d) {
+    if (d >= 1) {
+      return Math.round(d) + "s"
+    }
+    var df = 1,
+      top = 1,
+      bot = 1
+    var tol = 1e-8 // seems to allow for d > 1e-4
+    while (df !== d && Math.abs(df - d) > tol) {
+      if (df < d) {
+        top += 1
+      } else {
+        bot += 1
+        top = parseInt(d * bot, 10)
+      }
+      df = top / bot
+    }
+    if (top > 1) {
+      bot = Math.round(bot / top)
+      top = 1
+    }
+    if (bot <= 1) {
+      return "1s"
+    }
+    return top + "/" + bot + "s"
+  }
+
   return (
     <figure className={`wp-block-gallery columns-${columns} is-cropped`}>
       <ul className="blocks-gallery-grid">
-        {imgs.map( (img, index) => {
+        {galleryImages.nodes.map((img, index) => {
           // setup onclick function to handle state change
           function updateOnClick() {
             setPhotoIndex(index)
             setIsOpen(true)
           }
           return (
-            <li key={index} onClick={updateOnClick} className="blocks-gallery-item">
+            <li
+              key={index}
+              onClick={updateOnClick}
+              className="blocks-gallery-item"
+            >
               <figure>
-                <img src={img.url} />
+                <img src={img.mediaItemUrl} />
               </figure>
             </li>
           )
         })}
-        
       </ul>
 
       {isOpen && (
         <Lightbox
-          mainSrc={imgs[photoIndex].url}
-          nextSrc={imgs[(photoIndex + 1) % imgs.length].url}
-          prevSrc={imgs[(photoIndex + imgs.length - 1) % imgs.length].url}
+          mainSrc={galleryImages.nodes[photoIndex].mediaItemUrl}
+          nextSrc={
+            galleryImages.nodes[(photoIndex + 1) % galleryImages.nodes.length]
+              .mediaItemUrl
+          }
+          prevSrc={
+            galleryImages.nodes[
+              (photoIndex + galleryImages.nodes.length - 1) %
+                galleryImages.nodes.length
+            ].mediaItemUrl
+          }
           onCloseRequest={() => setIsOpen(false)}
-          onMovePrevRequest={() => setPhotoIndex( (photoIndex + imgs.length -1) % imgs.length )}
-          onMoveNextRequest={() => setPhotoIndex( (photoIndex + 1) % imgs.length )}
+          onMovePrevRequest={() =>
+            setPhotoIndex(
+              (photoIndex + galleryImages.nodes.length - 1) %
+                galleryImages.nodes.length
+            )
+          }
+          onMoveNextRequest={() =>
+            setPhotoIndex((photoIndex + 1) % galleryImages.nodes.length)
+          }
+          enableZoom={false}
+          imageCaption={`Camera: ${
+            galleryImages.nodes[photoIndex].mediaDetails.meta.camera
+          }, Aperture: f/${
+            galleryImages.nodes[photoIndex].mediaDetails.meta.aperture
+          }, ISO: ${
+            galleryImages.nodes[photoIndex].mediaDetails.meta.iso
+          }, Shutter Speed: ${sSpeed(
+            galleryImages.nodes[photoIndex].mediaDetails.meta.shutterSpeed
+          )}`}
         />
       )}
     </figure>

Diff for: src/blocks/Html/CoreHtmlBlock.data.js

@@ -0,0 +1,7 @@
+module.exports = () => {
+  return `
+    ... on WPGraphQL_CoreHtmlBlock {
+      originalContent
+    }
+  `
+}

Diff for: src/blocks/Html/CoreHtmlBlock.js

@@ -0,0 +1,11 @@
+import React from "react"
+import ReactHtmlParser from 'react-html-parser'
+
+const CoreHtmlBlock = ({ originalContent }) => {
+
+  return (
+    ReactHtmlParser(originalContent)
+  )
+}
+
+export default CoreHtmlBlock

Diff for: src/blocks/Html/index.js

@@ -0,0 +1 @@
+export { default } from "./CoreHtmlBlock"

Diff for: src/blocks/Image/CoreImageBlock.js

@@ -1,12 +1,12 @@
 import React from "react"
-import ReactHtmlParser from "react-html-parser"
 
 const CoreImageBlock = ({ attributes }) => {
   const { align, caption, className, url, alt, id } = attributes
 
   return (
     <figure className="wp-block-image">
       <img src={url} alt={alt} />
+      <figcaption>{caption}</figcaption>
     </figure>
   )
 }

Diff for: src/blocks/Video/CoreVideoBlock.data.js

@@ -0,0 +1,19 @@
+module.exports = () => {
+  return `
+    ... on WPGraphQL_CoreVideoBlock {
+      attributes {
+        src
+        poster
+        preload
+        playsInline
+        muted
+        loop
+        controls
+        className
+        caption
+        autoplay
+        align
+      }
+    }
+  `
+}

Diff for: src/blocks/Video/CoreVideoBlock.js

@@ -0,0 +1,15 @@
+import React from "react"
+
+const CoreVideoBlock = ({ attributes }) => {
+  const { src, poster, preoload, playsInline, muted, loop, controls, className, caption, autoplay, align } = attributes
+
+  return (
+    <figure className="wp-block-video aligncenter">
+      <video controls src={src}></video>
+      <figcaption>{caption}</figcaption>
+    </figure>
+  )
+
+}
+
+export default CoreVideoBlock

Diff for: src/blocks/Video/index.js

@@ -0,0 +1 @@
+export { default } from './CoreVideoBlock'

Diff for: src/components/AllBlocks.js

@@ -5,6 +5,8 @@ import CoreListBlock from "../blocks/List"
 import CoreImageBlock from "../blocks/Image"
 import CoreHeadingBlock from "../blocks/Heading"
 import CoreGalleryBlock from "../blocks/Gallery"
+import CoreVideoBlock from "../blocks/Video"
+import CoreHtmlBlock from "../blocks/Html"
 
 const AllBlocks = ({ blockData }) => {
 
@@ -25,6 +27,8 @@ const AllBlocks = ({ blockData }) => {
     WPGraphQL_CoreImageBlock: CoreImageBlock,
     WPGraphQL_CoreHeadingBlock: CoreHeadingBlock,
     WPGraphQL_CoreGalleryBlock: CoreGalleryBlock,
+    WPGraphQL_CoreVideoBlock: CoreVideoBlock,
+    WPGraphQL_CoreHtmlBlock: CoreHtmlBlock,
     page_default: Default,
   }
 

Diff for: src/components/layout.css

@@ -860,7 +860,9 @@ section.wp-block-cover-image>h2 {
 
 .wp-block-image figcaption {
     margin-top: .5em;
-    margin-bottom: 1em
+    margin-bottom: 1em;
+    margin-left: .5em;
+    font-size: .8rem;
 }
 
 .is-style-circle-mask img {

Diff for: src/templates/pages/index.js

@@ -13,7 +13,7 @@ const SinglePage = props => {
     <Layout>
     <Helmet bodyAttributes={{ class: 'page' }} />
       <div id="primary" className="content-area wrapper">
-        <div className="grid-wrapper">
+        <div className="grid-wrapper grid-main">
           <main id="main" className="site-main" role="main">
             <article data-id={id} id={`post-${postId}`} className={`post-${postId} page type-page status-publish hentry entry`} >
               <header className="entry-header">

Diff for: src/templates/posts/single.js

@@ -28,7 +28,7 @@ const SinglePost = ({ pageContext }) => {
       next,
     },
   } = pageContext
-console.log(pageContext.prev)
+
   const allBlocks = blocks || []
 
   return (