Docs ReferenceWordPressBlocksProvider

WordPressBlocksProvider

WordPressBlocksProvider is a React Context Provider that exposes the data that WordPressBlocksViewer needs to render WordPress blocks, namely which blocks have been defined as a part of your Faust app.

Usage

The below example shows how you can setup the WordPressBlocksProvider in your Faust app’s _app.js file:

pages/_app.js

import "../faust.config";
import React from "react";
import { useRouter } from "next/router";
import { WordPressBlocksProvider } from "@faustwp/blocks"; 
import { FaustProvider } from "@faustwp/core";
import blocks from "../wp-blocks/index.js";
 
export default function MyApp({ Component, pageProps }) {
	const router = useRouter();
 
	return (
		<FaustProvider pageProps={pageProps}>
			<WordPressBlocksProvider
				config={{
					blocks, 
				}}
			>
				{" "}
				<Component {...pageProps} key={router.asPath} />
			</WordPressBlocksProvider>{" "}
		</FaustProvider>
	);
}

Props

Below are WordPressBlocksProvider’s props defined as a TypeScript interface:

interface WordPressBlocksProviderProps {
	config: {
		blocks?: { [key: string]: WordPressBlock };
		theme?: BlocksTheme;
	};
}

The config prop accepts a blocks property, which is an map of block names to WordPressBlock components:

type WordPressBlock = React.FC & {
	displayName?: string;
	name?: string;
	config?: {
		name: string;
	};
};

The blocks property is typically set to a path of wp-blocks/index.js:

import { WordPressBlocksProvider } from "@faustwp/blocks";
import blocks from "../wp-blocks/index.js"; 
 
<WordPressBlocksProvider
	config={{
		blocks,
	}}
/>;

The theme property is an optional parameter that is used to assign a ThemeProvider for a theme.json and will be available in the useBlocksTheme hook. You will need to use the fromThemeJson helper to transform a theme.json object into the BlocksTheme type:

import { WordPressBlocksProvider } from "@faustwp/blocks";
import blocks from "../wp-blocks/index.js";
import themeJson from "../theme.json"; 
 
<WordPressBlocksProvider
	config={{
		blocks,
		theme: fromThemeJson(themeJson), 
	}}
/>;