Skip to main content

Getting Started with Gutenberg Blocks Provider and Viewer

Quick Start​


Make sure you have completed the initial setup for Faust at Getting Started.

Install the blocks package:

npm i @faustwp/blocks

Create a new folder inside your application root that you will place all the blocks. For conventional reasons, we name it wp-blocks.

export default {};

Open _app.js and import the blocks provider, passing the list of blocks in the config property:

import { WordPressBlocksProvider } from '@faustwp/blocks';
import blocks from '../wp-blocks';

<FaustProvider pageProps={pageProps}>
<Component {...pageProps} key={router.asPath} />

Then, inside your templates you need to pass on the editorBlocks data in your WordPressBlocksViewer. The helper function flatListToHierarchical is referenced here:

import { WordPressBlocksViewer } from '@faustwp/blocks';
import components from '../wp-blocks';

const { editorBlocks } =;
const blocks = flatListToHierarchical(editorBlocks);

return <WordPressBlocksViewer blocks={blocks}/>

Example editorBlocks GraphQL query fragment.

editorBlocks(flat: false) {
id: clientId

Setting flat: false above returns separate nodes with their own arrays. By default, editorBlocks brings all the nodes back in one array instead.

A Simple Block Example​

This is a simple block called CoreParagraph. The block is a p tag that sets its content to attributes.content which is passed in from the props.

CoreParagraph.fragments does a WPGraphQL query for the content and cssClassName and sets it as the fragment CoreParagraphFragment.

import { gql } from '@apollo/client';
import React from 'react';

export default function CoreParagraph(props) {
const attributes = props.attributes;
return (
dangerouslySetInnerHTML={{ __html: attributes.content }}></p>

CoreParagraph.fragments = {
entry: gql`
fragment CoreParagraphFragment on CoreParagraph {
attributes {
key: `CoreParagraphFragment`,

CoreParagraph.displayName = 'CoreParagraph';
// This also works
// = 'CoreParagraph'

We added a displayName property here to make sure that the __typename of the block matches this value. For production builds, it is required to use either a displayName="NameOfBlock" or a"NameOfBlock" properties for the block to resolve and render properly.

Export the block in wp-blocks/index.js:

import CoreParagraph from './CoreParagraph';
export default {

Further Learning​

More details on the WordPressBlocksProvider.

More details on the WordPressBlocksViewer.

Continue learning about the project structure, how to change styles, layout, etc. by referencing the Example Project Walkthrough Structure.