WordPressBlocksViewer

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.

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,
	};
};

It requests the editorBlocks without flattening them all in a single list (using flat: false). If set to 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:

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