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.

Usage

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

wp-blocks/CoreColumn.jsx

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

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

  return (
    <>
      <WordPressBlocksViewer contentBlocks={contentBlocks} />
    </>
  );
}

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

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

Props

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

note

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[];
}