The fromThemeJson is a helper function that is used to convert a theme.json object into a compatible BlocksTheme object.

API

The fromThemeJson has the following signature:

function fromThemeJson(theme: Record<string, unknown>): BlocksThemeCode language: TypeScript (typescript)

Theme: A record object of key values. This is the theme.json object imported from the filesystem.
BlocksTheme: The return type is an object of type BlocksTheme. This is a refined type that contains several key fields extracted from the theme.json.

The type of the BlocksTheme object is as follows:

export type BlocksTheme = {
  colors?: ThemePropertiesColor;
  spacing?: ThemePropertiesSpacing;
  styles?: ThemePropertiesStyles;
  layout?: ThemePropertiesLayout;
  typography?: ThemePropertiesTypography;
  [k: string]: unknown;
};
Code language: JavaScript (javascript)

The individual types of the properties are defined in the repo project for reference.

Usage

Below is an example of using the fromThemeJson as a parameter to the WordPressBlocksProvider config:

import { WordPressBlocksProvider, fromThemeJson } from '@faustwp/blocks';
import themeJson from '../theme.json';
import '../globalStylesheet.css';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  return (
    <FaustProvider pageProps={pageProps}>
      <WordPressBlocksProvider
        config={{
          blocks,
          theme: fromThemeJson(themeJson),
        }}>
        <Component {...pageProps} key={router.asPath} />
      </WordPressBlocksProvider>
    </FaustProvider>
  );
}
Code language: JavaScript (javascript)

It imports the theme.json object locally and feeds this into the fromThemeJson function. This will allow the developer to access many of the theme.json palette colors, fonts, layout and sizes from the theme.json object. Internally the WordPressBlocksProvider will create a React Provider and assigns this theme value as context.

Using the useBlocksTheme hook will resolve the theme property configured in WordPressBlocksProvider:

import { getStyles, useBlocksTheme } from '@faustwp.blocks';
export function CoreParagraph(
  props
) {
  // get the BlocksTheme object
  const theme = useBlocksTheme();
  const style = getStyles(theme, { ...props });
  const { attributes } = props;
  return (
    <p
      style={style}
      className={attributes?.cssClassName}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: attributes?.content ?? '' }}
    />
  );
}
Code language: JavaScript (javascript)

The fromThemeJson helper will consolidate several settings and properties of the theme.json parameter for easier access. As an example we are given the following object containing some palette color settings:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
    "settings": {
		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				}
             ]
         }
     }
}
Code language: JSON / JSON with Comments (json)

The resulting BlocksTheme object will be:

theme.palette = {
  "base": #ffffff,
  "contrast": #000000
}
Code language: PHP (php)

The following theme.json fields will occur the same transformation:

• settings.spacing.spacingSizes -> theme.spacingSizes
• settings.typography.fontFamilies -> theme.fontFamilies
• settings.typography.fontSizes -> theme.fontSizes

Additionally the following fields are copied as is from the original theme.json:

• settings.layout -> theme.layout
• styles -> theme.styles