Merge pull request #6 from kuasha420/master

InnerContent, Modernize Underlying Libraries and Update Dependencies

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true

.gitignore

@@ -62,4 +62,7 @@ typings/
 
 
 # OSX
-.DS_Store
+.DS_Store
+
+# Generated Builds 
+dist/

.prettierignore

@@ -0,0 +1 @@
+dist/

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "printWidth": 120,
+  "tabWidth": 2,
+  "quoteProps": "as-needed",
+  "semi": false
+}

README.md

@@ -8,17 +8,15 @@ Using [LazyBlocks](https://wordpress.org/plugins/lazy-blocks/) to create custom
 
 The frontend can either be a ReactJS App or [Gatsby](https://gatsbyjs.org/) Headless site.
 
-
 [View Demo](https://gatsby-gutenberg.netlify.com/)
 
-
 ## Prerequisites
 
 In order for this to work we'll need to get the Gutenberg data as JSON from WP via REST.
 
 The following code exposes a new field on posts and pages called `blocks`. It can be added either via a plugin or in your theme's `functions.php` file
 
-```
+```php
 <?php
 
 add_action(
@@ -52,12 +50,21 @@ add_action(
 
 ### Install
 
-`npm install react-gutenberg --save`
+Install react-gutenberg and it's peer dependencies
+
+`yarn add react-gutenberg @loadable/component`
+
+`npm i react-gutenberg @loadable/component`
 
-To include your own custom components: `npm install @loadable/component @types/loadable__component --save`
+for consumption in Typescript Project, also add `@types/loadable__component` as a dev dependency
+
+`yarn add -D @types/loadable__component`
+
+`npm i --dev @types/loadable__component`
 
 ### ReactJS Example
-```
+
+```tsx
 import WPGBlocks from 'react-gutenberg'
 …
 
@@ -98,15 +105,13 @@ import WPGBlocks from 'react-gutenberg'
 
 ### Gatsby Example
 
-```
-import * as React from "react"
-import { graphql } from "gatsby"
-import WPGBlocks from "react-gutenberg"
-import { IWPGBlock } from "react-gutenberg/src/types"
+```tsx
+import * as React from 'react'
+import { graphql } from 'gatsby'
+import WPGBlocks from 'react-gutenberg'
+import { IWPGBlock } from 'react-gutenberg/src/types'
 
-const Loading = () => (
-  <div class="loading"></div>
-)
+const Loading = () => <div class="loading"></div>
 
 interface IPost {
   wordpress_id: number
@@ -115,7 +120,7 @@ interface IPost {
   blocks: IWPGBlock[]
 }
 
-const Post: React.SFC<{data: { post: IPost }}> = ({ data }) => {
+const Post: React.FC<{ data: { post: IPost } }> = ({ data }) => {
   const { id, title, blocks } = data.post
 
   return (
@@ -131,18 +136,18 @@ const Post: React.SFC<{data: { post: IPost }}> = ({ data }) => {
 export default Post
 
 export const pageQuery = graphql`
-  fragment WPPost on wordpress__POST{
-      wordpress_id
-      id
-      title
-      excerpt
+  fragment WPPost on wordpress__POST {
+    wordpress_id
+    id
+    title
+    excerpt
+    slug
+    type
+    date
+    categories {
+      name
       slug
-      type
-      date
-      categories {
-        name
-        slug
-      }
+    }
   }
 
   fragment Blocks on wordpress__POSTBlocks {
@@ -255,7 +260,6 @@ To do this you should **lazy import** all your custom blocks into one file say `
 
 To support SSR, we use [`loadable`](https://www.smooth-code.com/open-source/loadable-components/docs/getting-started/). Install it: `npm install @loadable/component @types/loadable__component --save`
 
-
 ```
 // src/blocks/index.tsx
 import loadable from '@loadable/component'
@@ -284,7 +288,7 @@ Example of a custom component for `core/paragraph` block:
 import { IWPGBlock } from 'react-gutenberg/'
 import * as React from 'react'
 
-const CustomParagraphBlock:React.SFC<IWPGBlock> = (props) => {
+const CustomParagraphBlock:React.FC<IWPGBlock> = (props) => {
   const {
     attrs,
     innerHTML } = props
@@ -297,8 +301,6 @@ const CustomParagraphBlock:React.SFC<IWPGBlock> = (props) => {
 export default CustomParagraphBlock
 ```
 
-
-
 ## Why?
 
 For most people it might be fine just taking the raw html from the REST response; `content.rendered`, but I realized that some components I need to make more interactive.