WP_Theme_JSON::get_styles_for_block( array $block_metadata ): string
Gets the CSS rules for a particular block from theme.json.
Parameters
-
$block_metadata
array Required -
Metadata about the block to get styles for.
Return
string Styles for the block.
Source
File: wp-includes/class-wp-theme-json.php
.
View all references
'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
);
}
}
}
}
}
}
return $nodes;
}
/**
* Gets the CSS rules for a particular block from theme.json.
*
* @since 6.1.0
*
* @param array $block_metadata Metadata about the block to get styles for.
*
* @return string Styles for the block.
*/
public function get_styles_for_block( $block_metadata ) {
$node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
$use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
$selector = $block_metadata['selector'];
$settings = isset( $this->theme_json['settings'] ) ? $this->theme_json['settings'] : array();
$feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $node );
// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
$style_variation_declarations = array();
if ( ! empty( $block_metadata['variations'] ) ) {
foreach ( $block_metadata['variations'] as $style_variation ) {
$style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() );
$clean_style_variation_selector = trim( $style_variation['selector'] );
// Generate any feature/subfeature style declarations for the current style variation.
$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );
// Combine selectors with style variation's selector and add to overall style variation declarations.
foreach ( $variation_declarations as $current_selector => $new_declarations ) {
// If current selector includes block classname, remove it but leave the whitespace in.
$shortened_selector = str_replace( $block_metadata['selector'] . ' ', ' ', $current_selector );
// Prepend the variation selector to the current selector.
$split_selectors = explode( ',', $shortened_selector );
$updated_selectors = array_map(
static function ( $split_selector ) use ( $clean_style_variation_selector ) {
return $clean_style_variation_selector . $split_selector;
},
$split_selectors
);
$combined_selectors = implode( ',', $updated_selectors );
// Add the new declarations to the overall results under the modified selector.
$style_variation_declarations[ $combined_selectors ] = $new_declarations;
}
// Compute declarations for remaining styles not covered by feature level selectors.
$style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json );
}
}
/*
* Get a reference to element name from path.
* $block_metadata['path'] = array( 'styles','elements','link' );
* Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
* Skip non-element paths like just ['styles'].
*/
$is_processing_element = in_array( 'elements', $block_metadata['path'], true );
$current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
$element_pseudo_allowed = array();
if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] ) ) {
$element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
}
/*
* Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
* This also resets the array keys.
*/
$pseudo_matches = array_values(
array_filter(
$element_pseudo_allowed,
static function ( $pseudo_selector ) use ( $selector ) {
return str_contains( $selector, $pseudo_selector );
}
)
);
$pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
/*
* If the current selector is a pseudo selector that's defined in the allow list for the current
* element then compute the style properties for it.
* Otherwise just compute the styles for the default selector as normal.
*/
if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] )
&& in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
) {
$declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
} else {
$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
}
$block_rules = '';
/*
* 1. Separate the declarations that use the general selector
* from the ones using the duotone selector.
*/
$declarations_duotone = array();
foreach ( $declarations as $index => $declaration ) {
if ( 'filter' === $declaration['name'] ) {
unset( $declarations[ $index ] );
$declarations_duotone[] = $declaration;
}
}
// Update declarations if there are separators with only background color defined.
if ( '.wp-block-separator' === $selector ) {
$declarations = static::update_separator_declarations( $declarations );
}
// 2. Generate and append the rules that use the general selector.
$block_rules .= static::to_ruleset( $selector, $declarations );
// 3. Generate and append the rules that use the duotone selector.
if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
$block_rules .= static::to_ruleset( $block_metadata['duotone'], $declarations_duotone );
}
// 4. Generate Layout block gap styles.
if (
static::ROOT_BLOCK_SELECTOR !== $selector &&
! empty( $block_metadata['name'] )
) {
$block_rules .= $this->get_layout_styles( $block_metadata );
}
Changelog
Version | Description |
---|---|
6.1.0 | Introduced. |