Public API functions for generating and compiling CSS styles.

Source: wp-includes/style-engine.php

wp_style_engine_get_styles()

Generates styles from a block style object (e.g., block attributes or theme.json styles).

wp_style_engine_get_styles( array $block_styles, array $options = array() ): array

Parameters

Options

Returns

Example

$styles = wp_style_engine_get_styles(
    array(
        'color' => array( 'text' => '#cccccc' ),
    )
);
// Returns:
// array(
//     'css'          => 'color: #cccccc',
//     'declarations' => array( 'color' => '#cccccc' ),
//     'classnames'   => 'has-text-color',
// )

With Selector

$styles = wp_style_engine_get_styles(
    array(
        'spacing' => array(
            'padding' => array(
                'top'    => '1em',
                'bottom' => '1em',
            ),
        ),
    ),
    array(
        'selector' => '.my-block',
    )
);
// Returns:
// array(
//     'css'          => '.my-block{padding-top:1em;padding-bottom:1em}',
//     'declarations' => array(
//         'padding-top'    => '1em',
//         'padding-bottom' => '1em',
//     ),
// )

With Preset Variables

$styles = wp_style_engine_get_styles(
    array(
        'color' => array(
            'background' => 'var:preset|color|vivid-red',
        ),
    )
);
// Returns:
// array(
//     'css'          => 'background-color: var(--wp--preset--color--vivid-red)',
//     'declarations' => array( 'background-color' => 'var(--wp--preset--color--vivid-red)' ),
//     'classnames'   => 'has-background has-vivid-red-background-color',
// )

wp_style_engine_get_stylesheet_from_css_rules()

Compiles CSS from an array of selector/declaration pairs.

wp_style_engine_get_stylesheet_from_css_rules( array $css_rules, array $options = array() ): string

Parameters

CSS Rules Format

array(
    array(
        'selector'     => '.my-selector',
        'declarations' => array( 'color' => 'red' ),
        'rules_group'  => '@media (min-width: 80rem)', // Optional, since 6.6.0
    ),
)

Options

Returns

Compiled CSS string.

Example

$css_rules = array(
    array(
        'selector'     => '.elephant-are-cool',
        'declarations' => array(
            'color' => 'gray',
            'width' => '3em',
        ),
    ),
);

$css = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
// Returns: '.elephant-are-cool{color:gray;width:3em}'

With Rules Group (Since 6.6.0)

$css_rules = array(
    array(
        'rules_group'  => '@media (min-width: 80rem)',
        'selector'     => '.responsive-block',
        'declarations' => array( 'font-size' => '2rem' ),
    ),
);

$css = wp_style_engine_get_stylesheet_from_css_rules( $css_rules );
// Returns: '@media (min-width: 80rem){.responsive-block{font-size:2rem}}'

wp_style_engine_get_stylesheet_from_context()

Retrieves compiled CSS from a named store.

wp_style_engine_get_stylesheet_from_context( string $context, array $options = array() ): string

Parameters

Options

Returns

Compiled CSS string from all rules in the store.

Example

// First, store styles during block rendering
wp_style_engine_get_styles(
    array( 'color' => array( 'text' => 'red' ) ),
    array(
        'context'  => 'my-context',
        'selector' => '.block-a',
    )
);

wp_style_engine_get_styles(
    array( 'color' => array( 'text' => 'blue' ) ),
    array(
        'context'  => 'my-context',
        'selector' => '.block-b',
    )
);

// Later, retrieve all styles
$css = wp_style_engine_get_stylesheet_from_context( 'my-context' );
// Returns: '.block-a{color:red}.block-b{color:blue}'