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 editorBlocks prop.

Usage

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

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

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

  return (
    <>
      <WordPressBlocksViewer blocks={editorBlocks} />
    </>
  );
}

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

Component.variables = ({ databaseId }, ctx) => {
  return {
    databaseId,
  };
};
Code language: JavaScript (javascript)

It requests the editorBlocks without flattening them all in a single list (using flat: false). If set flat:true it will put all of the blocks ( including innnerBlocks in a list and which you can use the flatListToHierarchical helper to put them back together in the right order.

By default the WordPressBlocksViewer component will use the renderedHtml property to render all the blocks in the page one by one.

Props

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

NOTE
The blocks 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 {
  blocks: ContentBlock[];
  fallbackBlock?: React.FC<ContentBlock>;
}
Code language: PHP (php)