云策 WordPress 开发者社区

函数文档

wp_style_engine_get_styles()

查看官方原文 ↗
💡 云策文档标注

概述

wp_style_engine_get_styles() 是 WordPress 样式引擎的全局公共接口函数，用于从单个样式对象（如块属性或 theme.json 中的顶级样式）生成 CSS 样式、声明和类名。它支持多种选项以定制输出，并可与 WP_Style_Engine 类的方法协同工作。

关键要点

  • 函数接受两个参数：必需的 $block_styles（样式对象数组）和可选的 $options（配置选项数组）。
  • 返回一个数组，包含 'css'（CSS 规则或声明字符串）、'declarations'（CSS 声明关联数组）和 'classnames'（类名字符串）。
  • 通过 $options 参数可设置上下文、选择器、CSS 变量转换等，以控制样式生成和存储行为。
  • 内部调用 WP_Style_Engine::parse_block_styles() 和 WP_Style_Engine::compile_css() 等方法处理样式。
  • 自 WordPress 6.1.0 版本引入，是块编辑器和主题开发中的核心工具。

代码示例

$styles = wp_style_engine_get_styles(
    array(
        'color' => array( 'text' => '#cccccc' ),
    )
);

注意事项

  • 当 $options['selector'] 提供时，返回的 'css' 将包含完整 CSS 规则；否则为 CSS 声明字符串。
  • 设置 $options['context'] 可启用样式存储功能，便于后续 CSS 规则管理。
  • 函数返回的数组经过 array_filter() 处理，空值会被自动移除。
📄 原文内容

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.

Description

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',
)

See also

Parameters

$block_stylesarrayrequired
The style object.
$optionsarrayoptional
An array of options.

  • context string|null
    An identifier describing the origin of the style object, e.g. 'block-supports' or 'global-styles'. Default null.
    When set, the style engine will attempt to store the CSS rules, where a selector is also passed.
  • convert_vars_to_classnames bool
    Whether to skip converting incoming CSS var patterns, e.g. var:preset|<PRESET_TYPE>|<PRESET_SLUG>, to var( --wp--preset--* ) values. Default false.
  • selector string
    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.

Default:array()

Return

array

  • css string
    A CSS ruleset or declarations block formatted to be placed in an HTML style attribute or tag.
  • declarations string[]
    An associative array of CSS definitions, e.g. array( "$property" => "$value", "$property" => "$value" ).
  • classnames string
    Classnames separated by a space.

Source

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

View all references View on Trac View on GitHub

Uses Description
WP_Style_Engine::parse_block_styles()wp-includes/style-engine/class-wp-style-engine.php

Returns classnames and CSS based on the values in a styles object.
WP_Style_Engine::compile_css()wp-includes/style-engine/class-wp-style-engine.php

Returns compiled CSS from CSS declarations.
WP_Style_Engine::store_css_rule()wp-includes/style-engine/class-wp-style-engine.php

Stores a CSS rule using the provided CSS selector and CSS declarations.
wp_parse_args()wp-includes/functions.php

Merges user defined arguments into defaults array.

Show 1 moreShow less

Used by Description
WP_Theme_JSON::compute_style_properties()wp-includes/class-wp-theme-json.php

Given a styles array, it extracts the style properties and adds them to the $declarations array following the format:

Changelog

Version Description
6.1.0 Introduced.