Block components

You can write your own custom block implementation for each block. Otherwise the default <UnknownBlock /> component is used which just displays the raw html output of the block.

Example

To create your own block component:

• create a file with path src/gatsby-theme-wordpress-gutenberg/components/blocks/[block-name].[ext] which has the component as its default export
• the file should contain a graphql fragment definition on the block's graphql type, where you can query for block fields, this fragment will be included when querying for Blocks component field
• the innerBlocks components are passed in as the children prop

The components can be shadowed. That means if multiple themes or your project implement the same block, the last definition wins.

For example for the default core/quote block, the file should be created as src/gatsby-theme-wordpress-gutenberg/components/blocks/core/quote.js:

Graphql typename for block type name is camelCased and uses Block suffix, for example: core/quote -> WpCoreQuoteBlock

import React from "react"
import { graphql } from "gatsby"

export const query = graphql`
  fragment Quote on WpCoreQuoteBlock {
    attributes {
      ... on WpCoreQuoteBlockAttributes {
        value
      }
    }
  }
`

export default ({ attributes }) => (
  <p style={{ background: `orange` }}>
    <strong>This is a custom implementation of quote block</strong>
    My value is {attributes.value}
  </p>
)