@wordpress/style-engine Edit

The Style Engine powering global styles and block customizations.

Installation

Install the module

npm install @wordpress/style-engine --save

This package assumes that your code will run in an ES2015+ environment. If you’re using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @wordpress/babel-preset-default in your code.

Top ↑

Important

This Package is considered experimental at the moment. The idea is to have a package used to generate styles based on a style object that is consistent between: backend, frontend, block style object and theme.json.

Currently it’s not a package that generates a wp.styleEngine global because it’s not ready yet, it’s still a bundled package but ultimately, we want it to be so, once the roadmap is finished:

TODO List:

  • Add style definitions for all the currently supported styles in blocks and theme.json.
  • the CSS variable shortcuts for values (for presets…)
  • Support generating styles in the frontend.
  • Support generating styles in the backend (block supports and theme.json stylesheet).
  • Refactor all block styles to use the style engine server side.
  • Refactor all blocks to consistently use the “style” attribute for all customizations (get rid of the preset specific attributes).

Top ↑

Usage

Top ↑

generate

Generates a stylesheet for a given style object and selector.

Parameters

  • style Style: Style object.
  • options StyleOptions: Options object with settings to adjust how the styles are generated.

Returns

  • string: generated stylesheet.

Top ↑

getCSSRules

Returns a JSON representation of the generated CSS rules.

Parameters

  • style Style: Style object.
  • options StyleOptions: Options object with settings to adjust how the styles are generated.

Returns

  • GeneratedCSSRule[]: generated styles.