WP_Theme_JSON::get_styles_for_block() │ public │ WP 6.1.0
Gets the CSS rules for a particular block from theme.json.
Method of the class: WP_Theme_JSON{}
No Hooks.
Return
String
. Styles for the block.
Usage
$WP_Theme_JSON = new WP_Theme_JSON(); $WP_Theme_JSON->get_styles_for_block( $block_metadata );
- $block_metadata(array) (required)
- Metadata about the block to get styles for.
Changelog
Since 6.1.0 | Introduced. |
WP_Theme_JSON::get_styles_for_block() WP Theme JSON::get styles for block code WP 6.1.1
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 = _wp_array_get( $this->theme_json, array( 'settings' ) ); /* * Process style declarations for block support features the current * block contains selectors for. Values for a feature with a custom * selector are filtered from the theme.json node before it is * processed as normal. */ $feature_declarations = array(); if ( ! empty( $block_metadata['features'] ) ) { foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) { if ( ! empty( $node[ $feature_name ] ) ) { // Create temporary node containing only the feature data // to leverage existing `compute_style_properties` function. $feature = array( $feature_name => $node[ $feature_name ] ); // Generate the feature's declarations only. $new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json ); // Merge new declarations with any that already exist for // the feature selector. This may occur when multiple block // support features use the same custom selector. if ( isset( $feature_declarations[ $feature_selector ] ) ) { foreach ( $new_feature_declarations as $new_feature_declaration ) { $feature_declarations[ $feature_selector ][] = $feature_declaration; } } else { $feature_declarations[ $feature_selector ] = $new_feature_declarations; } // Remove the feature from the block's node now the // styles will be included under the feature level selector. unset( $node[ $feature_name ] ); } } } /* * 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(); // TODO: Replace array_key_exists() with isset() check once WordPress drops // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067. if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) { $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, 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 ] ) && // TODO: Replace array_key_exists() with isset() check once WordPress drops // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067. array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) && 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 ) ) { $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] ); $block_rules .= static::to_ruleset( $selector_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 ); } // 5. Generate and append the feature level rulesets. foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) { $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations ); } return $block_rules; }