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