Skip To Main Content


useBlocksTheme is a React hook that provides the theme value when passed in the WordPressBlocksProvider component. The theme value is sourced by a theme.json file when using the fromThemeJson helper function.


First, define your theme in the WordPressBlocksProvider:

// _app.js
import { WordPressBlocksProvider, fromThemeJson } from '@faustwp/blocks';
import blocks from 'src/wp-blocks';
import themeJson from './theme.json';

export function MyApp() {
  return (
    <WordPressBlocksProvider config={{blocks, theme: fromThemeJson(themeJson)}}>
      // Rest of your app

Code language: JavaScript (javascript)

Then, within your application, you can use useBlocksTheme to retrieve the specified theme:

const theme = useBlocksTheme();Code language: JavaScript (javascript)