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 Block 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;
}
Code language: TypeScript (typescript)

theme: An object of type BlocksTheme. This is a refined type that contains several key fields extracted from the theme.json.
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>
  );
}
Code language: JavaScript (javascript)

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 Variables detected based on the provided parameters. For example given the following block props:

{
  attributes: {
    textColor: "secondary",
    backgroundColor: "cyan-bluish-gray"
  }
}
Code language: CSS (css)

The inline styles generated will be:

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

NOTE
Currently the getStyles prefixes the CSS variable using the same wp--preset prefix rules as WordPress. Check out the preset guide rules here to see what variables are being generated.

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

• 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;
}
Code language: CSS (css)

• 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.

//package.json

scripts": {
    "dev": "faust dev",
    "build": "faust build",
    "generate": "faust generatePossibleTypes && faust generateGlobalStylesheet",
    "start": "faust start",
    ...
}
Code language: PHP (php)

It will download a file named globalStylesheet.css which you can import into the project. This stylesheet will contain all the required CSS Variable definitions based on the 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.

// _app.js
import '../globalStylesheet.css';
Code language: JavaScript (javascript)

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:

• 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:

// _block.scss
// 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';
Code language: JavaScript (javascript)

• Assigning 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 following classNames: has-primary-color has-text-color . Certain classNames contain specifci 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.
• Missing block styles injected using hooks: Enqueued styles and scripts as a result of certain actions like wp_enqueue_style are not handled at the moment. If your block injects those then, you need to make sure you include them as well manually in the decoupled site stylesheet