Gets the CSS rules for a particular block from theme.json.
Parameters
$block_metadata
arrayrequired- Metadata about the block to get styles for.
Source
$declarations = array();
$root_variable_duplicates = array();
$root_style_length = strlen( '--wp--style--root--' );
foreach ( $properties as $css_property => $value_path ) {
if ( ! is_array( $value_path ) ) {
continue;
}
$is_root_style = str_starts_with( $css_property, '--wp--style--root--' );
if ( $is_root_style && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
continue;
}
$value = static::get_property_value( $styles, $value_path, $theme_json );
/*
* Root-level padding styles don't currently support strings with CSS shorthand values.
* This may change: https://github.com/WordPress/gutenberg/issues/40132.
*/
if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
continue;
}
if ( $is_root_style && $use_root_padding ) {
$root_variable_duplicates[] = substr( $css_property, $root_style_length );
}
/*
* Processes background image styles.
* If the value is a URL, it will be converted to a CSS `url()` value.
* For uploaded image (images with a database ID), apply size and position defaults,
* equal to those applied in block supports in lib/background.php.
*/
if ( 'background-image' === $css_property && ! empty( $value ) ) {
$background_styles = wp_style_engine_get_styles(
array( 'background' => array( 'backgroundImage' => $value ) )
);
$value = $background_styles['declarations'][ $css_property ];
}
if ( empty( $value ) && static::ROOT_BLOCK_SELECTOR !== $selector && ! empty( $styles['background']['backgroundImage']['id'] ) ) {
if ( 'background-size' === $css_property ) {
$value = 'cover';
}
// If the background size is set to `contain` and no position is set, set the position to `center`.
if ( 'background-position' === $css_property ) {
$background_size = $styles['background']['backgroundSize'] ?? null;
$value = 'contain' === $background_size ? '50% 50%' : null;
}
}
// Skip if empty and not "0" or value represents array of longhand values.
$has_missing_value = empty( $value ) && ! is_numeric( $value );
if ( $has_missing_value || is_array( $value ) ) {
continue;
}
/*
* Look up protected properties, keyed by value path.
* Skip protected properties that are explicitly set to `null`.
*/
$path_string = implode( '.', $value_path );
if (
isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
) {
continue;
}
// Calculates fluid typography rules where available.
if ( 'font-size' === $css_property ) {
/*
* wp_get_typography_font_size_value() will check
* if fluid typography has been activated and also
* whether the incoming value can be converted to a fluid value.
* Values that already have a clamp() function will not pass the test,
* and therefore the original $value will be returned.
* Pass the current theme_json settings to override any global settings.
*/
$value = wp_get_typography_font_size_value( array( 'size' => $value ), $settings );
}
if ( 'aspect-ratio' === $css_property ) {
// For aspect ratio to work, other dimensions rules must be unset.
// This ensures that a fixed height does not override the aspect ratio.
$declarations[] = array(
'name' => 'min-height',
'value' => 'unset',
);
}
$declarations[] = array(
'name' => $css_property,
'value' => $value,
);
}
// If a variable value is added to the root, the corresponding property should be removed.
foreach ( $root_variable_duplicates as $duplicate ) {
$discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
if ( is_numeric( $discard ) ) {
array_splice( $declarations, $discard, 1 );
}
}
return $declarations;
}
/**
* Returns the style property for the given path.
*
* It also converts references to a path to the value
* stored at that location, e.g.
* { "ref": "style.color.background" } => "#fff".
*
* @since 5.8.0
* @since 5.9.0 Added support for values of array type, which are returned as is.
* @since 6.1.0 Added the `$theme_json` parameter.
* @since 6.3.0 It no longer converts the internal format "var:preset|color|secondary"
* to the standard form "--wp--preset--color--secondary".
* This is already done by the sanitize method,
* so every property will be in the standard form.
* @since 6.7.0 Added support for background image refs.
*
* @param array $styles Styles subtree.
* @param array $path Which property to process.
* @param array $theme_json Theme JSON array.
* @return string|array Style property value.
*/
protected static function get_property_value( $styles, $path, $theme_json = null ) {
$value = _wp_array_get( $styles, $path, '' );
if ( '' === $value || null === $value ) {
// No need to process the value further.
return '';
}
/*
* This converts references to a path to the value at that path
* where the value is an array with a "ref" key, pointing to a path.
Changelog
Version | Description |
---|---|
6.1.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.