Narcoleptic's Patch Mangler

    gatsby-theme-wordpress-gutenberg

    0.1.0 • Public • Published

    Gatsby Theme WordPress Gutenberg

    Use WordPress gutenberg editor as a page builder for your Gatsby site.

    Features

    • Render Gutenberg blocks with custom React components
    • Live preview in Gatsby and Gutenberg
    • Automatic React component generation based on post's content to keep bundle size small

    Example

    Querying

    The Blocks component is a component which represents your structured content and is created during build phase. The post content is analyzed for all the blocks it contains and then the components which currently represent each block are consolidated into one component. This way, you only provide your custom implementations for each block and the magic of querying and sticking up the content together is done for you behind the scenes.

    import React from "react"
    import Layout from "../components/layout"
    import { graphql } from "gatsby"
     
    export default function BlogPost({ data }) {
      const post = data.allWpPost.nodes[0]
      console.log(post)
      return (
        <Layout>
          <div>
            <h1>{post.title}</h1>
            {/* Render post.Blocks instead of raw html content */}
            {post.Blocks && <post.Blocks />}
          </div>
        </Layout>
      )
    }
    export const query = graphql`
      query($slug: String!) {
        allWpPost(filter: { slug: { eq: $slug } }) {
          nodes {
            title
            Blocks ### query component as a graphql field
          }
        }
      }

    Custom block implementation

    You can write your own custom block implementation for each block. Otherwise the default <UnknownBlock /> implementation is used.

    An example of custom Paragraph block:

    import React from "react"
    import { graphql } from "gatsby"
     
    import Block from "../../../../components/block"
     
    import "@rmwc/tooltip/styles"
     
    export const query = graphql`
      fragment Paragraph on WpCoreParagraphBlock {
        ...Block
        attributes {
          ... on WpCoreParagraphBlockAttributes {
            content
            dropCap
            customBackgroundColor
          }
        }
      }
    `
     
    export default function Paragraph(props) {
      const { attributes } = props
     
      return (
        <Block {...props}>
          <p
            style={{
              backgroundColor: attributes.customBackgroundColor || `aliceblue`,
              border: `3px solid rebeccapurple`,
              borderRadius: `5px`,
              padding: 5
            }}
            dangerouslySetInnerHTML={{ __html: attributes.content }}
          />
        </Block>
      )
    }

    Install

    npm i gatsby-theme-wordpress-gutenberg

    DownloadsWeekly Downloads

    116

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    24.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • pristas-peter