gatsby-theme-wordpress-gutenberg
Use WordPress gutenberg editor as a page builder for your Gatsby site.
Last updated 4 months ago by pristas-peter .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gatsby-theme-wordpress-gutenberg 
SYNC missed versions from official npm registry.

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>
  )
}

Current Tags

  • 0.1.0                                ...           latest (4 months ago)

2 Versions

  • 0.1.0                                ...           4 months ago
  • 0.0.2-alpha.0                                ...           7 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (6)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |