Skip to main content

WordPressBlocksViewer Reference

WordPressBlocksViewer is a component used to render blocks received from WordPress. It uses the react components passed to the WordPressBlocksProvider and matches them to the appropriate blocks received in the contentBlocks prop.


The below example shows how a Faust Template can use the requested contentBlocks from WPGraphQL and render them using the WordPressBlocksViewer component.

import { WordPressBlocksViewer } from '@faustwp/blocks';

export default function Component(props) {
const { contentBlocks } =;

return (
<WordPressBlocksViewer contentBlocks={contentBlocks} />

Component.query = gql`
query GetPost(
$databaseId: ID!
) {
post(id: $databaseId, idType: DATABASE_ID) {
contentBlocks {
id: nodeId

Component.variables = ({ databaseId }, ctx) => {
return {


Below is WordPressBlocksViewer's props defined as a TypeScript interface:


The contentBlocks type defined below is data received from WPGraphQL and the WPGraphQL Content Blocks companion plugin.

export interface ContentBlock {
__typename?: string;
apiVersion?: number;
cssClassNames?: string;
innerBlocks?: ContentBlock[];
isDynamic?: boolean;
name?: string;
renderedHtml?: string;

export interface WordpressBlocksViewerProps {
contentBlocks: ContentBlock[];