Deploys by Netlify
Visit us on GitHub


How does the theme work?

Theme gives you these features:

  • allows you to write custom React component for each block
  • autogenerates the <Blocks /> component importing only react components that are used in the content, to keep bundle size small
  • manages live previews (as you type in gutenberg)

The Blocks component can be obtained as a field through graphql query in Gatsby:

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"

export default function BlogPost({ data }) {
  const post = data.allWpPost.nodes[0]
  return (
        {post.Blocks && <post.Blocks />}
export const query = graphql`
  query($slug: String!) {
    allWpPost(filter: { slug: { eq: $slug } }) {
      nodes {

Read more about how to write your custom React component and how the previews work.

Edit on GitHub