WordPressBlocksProvider
WordPressBlocksProvider
is a provider component that wraps your entire app. This provider gives the proper context (which blocks have been defined as a part 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,
theme: null
}}>
<Component {...pageProps} key={router.asPath} />
</WordPressBlocksProvider>
</FaustProvider>
);
}
Code language: JavaScript (javascript)
Props
Below is WordPressBlocksProviders
‘s props defined as a TypeScript interface:
interface WordPressBlocksProviderProps {
config: {
blocks?: { [key: string]: WordPressBlock };
theme?: BlocksTheme
};
}
Code language: CSS (css)
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 often the path to the wp-blocks/index.js
:
import { WordPressBlocksProvider } from '@faustwp/blocks';
import blocks from '../wp-blocks/index.js';
<WordPressBlocksProvider
config={{
blocks,
theme: null
}} />;
Code language: JavaScript (javascript)
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)
}} />;
Code language: JavaScript (javascript)