Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

Minimilistic ReactJS Gutenberg Blocks

The goal of this project is to be able to generate an entire WordPress post created with Gutenberg, within a seperate React based frontend.

Using LazyBlocks to create custom blocks you can mix both custom and builtin blocks in your posts & pages.

The frontend can either be a ReactJS App or Gatsby Headless site.

View Demo


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


  function () {

    if ( ! function_exists( 'use_block_editor_for_post_type' ) ) {
      require ABSPATH . 'wp-admin/includes/post.php';

    // Surface all Gutenberg blocks in the WordPress REST API
    $post_types = get_post_types_by_support( [ 'editor' ] );
    foreach ( $post_types as $post_type ) {
      if ( use_block_editor_for_post_type( $post_type ) ) {
            'get_callback' => function ( array $post ) {
              return parse_blocks( $post['content']['raw'] );



npm install react-gutenberg --save

To include your own custom components: npm install @loadable/component @types/loadable__component --save

ReactJS Example

import WPGBlocks from 'react-gutenberg'

  constructor(props) {

    const WP_URL = https://my-wordpess-site.com/wp-json/wp/v2/posts

      .then(response => response.json())
      .then(posts => {
        this.setState( { posts })

  render() {
    const { posts } = this.state

    if (!posts) return (

    return (
      <div class="posts">
        { posts.map(post => (
          <div className="post" data-id={post.id}>
            <WPGBlocks blocks={post.blocks} />
        )) }


Gatsby Example

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>

interface IPost {
  wordpress_id: number
  id: number
  title: string
  blocks: IWPGBlock[]

const Post: React.SFC<{data: { post: IPost }}> = ({ data }) => {
  const { id, title, blocks } = data.post

  return (
      <article data-id={id}>
        <WPGBlocks blocks={blocks} />

export default Post

export const pageQuery = graphql`
  fragment WPPost on wordpress__POST{
      categories {

  fragment Blocks on wordpress__POSTBlocks {
    innerBlocks {
      attrs {
      innerBlocks {
        attrs {

  query PostById($id: String!) {
    post: wordpressPost(id: { eq: $id }) {
      blocks {

Supported/Implemented WP Gutenberg Blocks

By default the raw innerHTML is used to render the block, however in some cases it is more beneficial that the block is built up in React for example having a the Gallery component to support lightbox effect.

As a fallback if a block can’t be found it is rendered with the HTML Block which should cover most of the default Wordpress Blocks.

Common Blocks

  • Paragraph
  • Image
  • Heading
  • Gallery
  • List
  • Quote
  • Audio
  • Cover
  • File
  • Video


  • Code
  • Classic ! Raw html support only
  • Custom HTML ! Raw html support only
  • Preformatted
  • Pullquote
  • Table
  • Verse

Layout Elements

  • Button
  • Columns ! Yes supports recursive blocks
  • Media & Text
  • More
  • Page Break
  • Separator
  • Spacer


  • Shortcode ! Not to be implemented
  • Archives
  • Calendar
  • Categories
  • Latest Comments
  • Latest Posts
  • RSS
  • Search
  • Tag Cloud


  • Embed
  • Twitter
  • Youtube
  • Facebook
  • Instagram
  • Wordpress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo

Custom Blocks

Adding your own Custom Blocks

The main purpose of this library is to give you a easy way to add any custom blocks for your projects.

Blocks created with LazyBlocks have a blockName starting with lazyblock/.

To do this you should lazy import all your custom blocks into one file say blocks/index.tsx(typescript) exporting a function that decides what component to load for which block name.

To support SSR, we use loadable. Install it: npm install @loadable/component @types/loadable__component --save

// src/blocks/index.tsx
import loadable from '@loadable/component'

const Employee = loadable(() => import('./employee'))

export default function GetCustomBlock(name: string) {
  switch (name) {
    case 'lazyblock/employee': return Employee
    default: return null

Then wherever you use the WPGBlocks component send it the function GetCustomBlock on the prop mapToBlock. The library will then first call your function before checking if it has a component.

Usage Example: `

Custom Component for Default Blocks

You may also supply your own components for the default blocks.

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 {
    innerHTML } = props

  return (
    <div className="custom-paragraph" dangerouslySetInnerHTML={{__html: innerHTML}}/>

export default CustomParagraphBlock


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.

This project hopefully gives a platform to parse the blocks property from a REST response and where needed custom and interactive blocks can be made Reactive.


This project is dependent on PR requests and the community.

Source is coded in TypeScript to enforce more understandable code.

Make sure to install TypeScript before trying to build npm install -g typescript


The styles of each block is kept to a minimal and should work in both dark and light mode conditions.

Classes on blocks should conform to the BEM naming convention.

Included is the default WP styles for Blocks based on the Twenty Ninetween theme. To use it: import "react-gutenberg/default.css"

© 2023 Gatsby, Inc.