WordPress Version: 6.1
/**
* Style engine: Public functions
*
* This file contains a variety of public functions developers can use to interact with
* the Style Engine API.
*
* @package WordPress
* @subpackage StyleEngine
* @since 6.1.0
*/
/**
* Global public interface method to generate styles from a single style object, e.g.,
* the value of a block's attributes.style object or the top level styles in theme.json.
* See: https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/#styles and
* https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/
*
* Example usage:
*
* $styles = wp_style_engine_get_styles( array( 'color' => array( 'text' => '#cccccc' ) ) );
* // Returns `array( 'css' => 'color: #cccccc', 'declarations' => array( 'color' => '#cccccc' ), 'classnames' => 'has-color' )`.
*
* @access public
* @since 6.1.0
*
* @param array $block_styles The style object.
* @param array $options {
* Optional. An array of options. Default empty array.
*
* @type string|null $context An identifier describing the origin of the style object, e.g., 'block-supports' or 'global-styles'. Default is `null`.
* When set, the style engine will attempt to store the CSS rules, where a selector is also passed.
* @type bool $convert_vars_to_classnames Whether to skip converting incoming CSS var patterns, e.g., `var:preset|<PRESET_TYPE>|<PRESET_SLUG>`, to var( --wp--preset--* ) values. Default `false`.
* @type string $selector Optional. When a selector is passed, the value of `$css` in the return value will comprise a full CSS rule `$selector { ...$css_declarations }`,
* otherwise, the value will be a concatenated string of CSS declarations.
* }
*
* @return array {
* @type string $css A CSS ruleset or declarations block formatted to be placed in an HTML `style` attribute or tag.
* @type string[] $declarations An associative array of CSS definitions, e.g., array( "$property" => "$value", "$property" => "$value" ).
* @type string $classnames Classnames separated by a space.
* }
*/
function wp_style_engine_get_styles($block_styles, $options = array())
{
$options = wp_parse_args($options, array('selector' => null, 'context' => null, 'convert_vars_to_classnames' => false));
$parsed_styles = WP_Style_Engine::parse_block_styles($block_styles, $options);
// Output.
$styles_output = array();
if (!empty($parsed_styles['declarations'])) {
$styles_output['css'] = WP_Style_Engine::compile_css($parsed_styles['declarations'], $options['selector']);
$styles_output['declarations'] = $parsed_styles['declarations'];
if (!empty($options['context'])) {
WP_Style_Engine::store_css_rule($options['context'], $options['selector'], $parsed_styles['declarations']);
}
}
if (!empty($parsed_styles['classnames'])) {
$styles_output['classnames'] = implode(' ', array_unique($parsed_styles['classnames']));
}
return array_filter($styles_output);
}