fromThemeJson

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

API

The fromThemeJson function has the following signature:

function fromThemeJson(theme: Record<string, unknown>): BlocksTheme;

The theme argument is an object of key values. This is the theme.json object imported from the filesystem.

The BlocksTheme return object 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;
};

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

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 assign 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 ?? "" }}
		/>
	);
}

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"
				}
			]
		}
	}
}

The resulting BlocksTheme object will be:

theme.palette = {
  "base": #ffffff,
  "contrast": #000000
}

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 theme's theme.json file:

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