WordPressBlocksProvider Reference
WordPressBlocksProvider
is a provider component that wraps your entire app. This provider gives the proper context (which blocks have been defined as apart of your Faust app) to the WordPressBlocksViewer
component.
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 is WordPressBlocksProviders
's props defined as a TypeScript interface:
interface WordPressBlocksProviderProps {
config: {
blocks?: WordPressBlock[];
};
}
The config
prop accepts a blocks
property, which is an array of WordPressBlock
:
type WordPressBlock = React.FC & {
displayName?: string;
name?: string;
config?: {
name: string;
};
};
The blocks
property is often the path to the wp-blocks/index.js
:
import { WordPressBlocksProvider } from '@faustwp/blocks';
import blocks from '../wp-blocks/index.js';
<WordPressBlocksProvider
config={{
blocks,
}}></WordPressBlocksProvider>;