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)