WP_Theme_JSON::get_styles_for_block( array $block_metadata ): string

In this article

Gets the CSS rules for a particular block from theme.json.

Parameters

$block_metadataarrayrequired
Metadata about the block to get styles for.

Return

string Styles for the block.

Source

		 * This may change: https://github.com/WordPress/gutenberg/issues/40132.
		 */
		if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
			continue;
		}

		if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
			$root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
		}

		/*
		 * Look up protected properties, keyed by value path.
		 * Skip protected properties that are explicitly set to `null`.
		 */
		if ( is_array( $value_path ) ) {
			$path_string = implode( '.', $value_path );
			if (
				isset( static::PROTECTED_PROPERTIES[ $path_string ] ) &&
				_wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
			) {
				continue;
			}
		}

		// Processes background styles.
		if ( 'background' === $value_path[0] && isset( $styles['background'] ) ) {
			$background_styles = wp_style_engine_get_styles( array( 'background' => $styles['background'] ) );
			$value             = isset( $background_styles['declarations'][ $css_property ] ) ? $background_styles['declarations'][ $css_property ] : $value;
		}

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

		// 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.
 *
 * @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 values is an array with a "ref" key, pointing to a path.
	 * For example: { "ref": "style.color.background" } => "#fff".
	 */
	if ( is_array( $value ) && isset( $value['ref'] ) ) {
		$value_path = explode( '.', $value['ref'] );
		$ref_value  = _wp_array_get( $theme_json, $value_path );
		// Only use the ref value if we find anything.
		if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
			$value = $ref_value;
		}

		if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) {
			$path_string      = json_encode( $path );
			$ref_value_string = json_encode( $ref_value );
			_doing_it_wrong(
				'get_property_value',
				sprintf(
					/* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
					__( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.' ),
					'theme.json',
					$ref_value_string,
					$path_string,
					$ref_value['ref']
				),
				'6.1.0'
			);
		}
	}

	if ( is_array( $value ) ) {
		return $value;
	}

	return $value;
}

Changelog

VersionDescription
6.1.0Introduced.

User Contributed Notes

You must log in before being able to contribute a note or feedback.