getStyles

The getStyles is a helper function that is used to calculate the inline styles of a block given the current theme and block properties. This is mainly useful when developing blocks taken from the core WordPress blocks list.

API

The getStyles has the following signature:

function getStyles<T extends BlockWithAttributes>(
  theme: BlocksTheme,
  block: T,
): React.CSSProperties {..}
 
interface BlockWithAttributes extends ContentBlock {
  attributes?: Record<string, unknown> | null;
}

The arguments are as follows:

• theme: An object of type BlocksTheme. This is a refined type that contains several key fields extracted from the WordPress theme's theme.json file.
• block: The current block object containing data and attributes. This is typically the block data fetched from the API using the editorBlocks field. This has type that extends BlockWithAttributes which is a type of ContentBlock.

Usage

Below is an example of using the getStyles helper, together with the useBlocksTheme to get the current theme object.

import { useBlocksTheme, getStyles } from "@faustwp/blocks";
 
export function CoreCode(props) {
	const theme = useBlocksTheme();
	const style = getStyles(theme, props);
	const { attributes } = props;
 
	return (
		<pre style={style} className={attributes?.cssClassName}>
			<code dangerouslySetInnerHTML={{ __html: attributes?.content ?? "" }} />
		</pre>
	);
}

First it gets the current theme object using the useBlocksTheme hook as provided by the library. Then it uses this as a parameter together with the block properties (props) that is passed by the WordPressBlocksViewer component.

The getStyles helper will then check the theme and the block properties and create a style object that contains inline CSS of type React.CSSProperties. You can use this object as a style property in the block you are building. In the example above, it assigns the style attribute to the pre element.

The inline styles will be in the form of CSS custom properties (CSS variables) detected based on the provided parameters. For example given the following block props:

{
  attributes: {
    textColor: "secondary",
    backgroundColor: "cyan-bluish-gray"
  }
}

The inline styles generated will be:

{
  backgroundColor: 'var(--wp--preset--color--cyan-bluish-gray)',
  color: 'var(--wp--preset--color--secondary)'
}

Now given the assigned CSS variables you have two options regarding their styles:

Option 1: Define your own CSS Variables

You can go ahead and create a :root rule and place all the relevant CSS variables for the available styles. This might not scale well if you change the general theme of the website since these changes are difficult to track.

:root {
	--wp--preset--color--black: #000000;
	--wp--preset--color--cyan-bluish-gray: #abb8c3;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--pale-pink: #f78da7;
	--wp--preset--color--vivid-red: #cf2e2e;
}

Option 2: Use the generateGlobalStylesheet command from faust-cli

The faust-cli package supports querying and downloading the global CSS stylesheet from the WordPress site WPGraphQL endpoint.

The WordPress global stylesheet can be grabbed at build time by using the faust generateGlobalStylesheet command.

scripts": {
    "dev": "faust dev",
    "build": "faust build",
    "generate": "faust generatePossibleTypes && faust generateGlobalStylesheet",
    "start": "faust start",
    ...
}

It will download a file named globalStylesheet.css which you can import into the project. This stylesheet will contain all the required CSS custom properties (CSS variables) definitions based on the theme's theme.json object. The benefit here is that it will also generate relevant CSS classes as well and assigns them into the HTML tags, providing greater style parity between the editor view and the decoupled Site.

import "../globalStylesheet.css";

Additional Info

Proper block styling parity between the Gutenberg Editor and the Decoupled site is overall very tricky. Consider the following steps and considerations to achieve a better result.

A. Import the @wordpress/base-styles and @wordpress/block-library packages

Both packages contain some necessary block view general styles and inline styles for the Core Reference Blocks. Since they are not included in the globalStylesheet.css you may need to include them in your styles to fill the missing gaps. The following SCSS import declarations should cover the whole spectrum:

// WordPress block styles.
// Used in `components/ContentWrapper`
 
@use "sass:math";
 
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/colors.native";
@import "@wordpress/base-styles/z-index";
@import "@wordpress/base-styles/default-custom-properties";
@import "@wordpress/base-styles/colors";
@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/block-library/src/style";
@import "@wordpress/block-library/src/theme";

B. Assign the correct CSS classes

A lot of block styling is applied using CSS classes. For example when a paragraph block has a text color of Primary, Gutenberg will assign the class names has-primary-color and has-text-color. Certain class names contain specific CSS rules and if you find you are missing those you will need to update your globalStylesheet.css or just override them with custom styles.

C. Add missing block styles injected using hooks

Enqueued styles and scripts as a result of certain actions like wp_enqueue_style are not handled by Faust.js currently. If your block injects scripts or styles via that method, you will need to manually include them in your decoupled Faust.js app's stylesheet.