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>;