Title: WP_Theme_JSON::get_styles_for_block
Published: November 2, 2022
Last modified: August 20, 2026

---

# WP_Theme_JSON::get_styles_for_block( array $block_metadata ): string

## In this article

 * [Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#parameters)
 * [Return](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#return)
 * [Source](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#source)
 * [Related](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#related)
 * [Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#changelog)

[ Back to top](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#wp--skip-link--target)

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

## 󠀁[Parameters](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#parameters)󠁿

 `$block_metadata`arrayrequired

Metadata about the block to get styles for.

## 󠀁[Return](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#return)󠁿

 string Styles for the block.

## 󠀁[Source](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#source)󠁿

    ```php
    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                 = $this->theme_json['settings'] ?? array();
    	$feature_declarations     = static::get_feature_declarations_for_node( $block_metadata, $node );
    	$is_root_selector         = static::ROOT_BLOCK_SELECTOR === $selector;
    	$media_query              = $block_metadata['media_query'] ?? null;
    	$responsive_media_queries = static::get_viewport_media_queries( $settings['viewport'] ?? null );

    	// Update text indent selector for paragraph blocks based on the textIndent setting.
    	$block_name           = $block_metadata['name'] ?? null;
    	$feature_declarations = static::update_paragraph_text_indent_selector( $feature_declarations, $settings, $block_name );
    	$block_elements       = $block_metadata['elements'] ?? array();

    	// Update button width declarations for percentage values to use calc() with block gap.
    	$feature_declarations = static::update_button_width_declarations( $feature_declarations, $settings );

    	// If there are style variations, generate the declarations for them, including any feature selectors the block may have.
    	$style_variation_declarations          = array();
    	$style_variation_custom_css            = array();
    	$style_variation_responsive_css        = array();
    	$style_variation_responsive_pseudo_css = array();
    	$style_variation_layout_metadata       = array();
    	if ( ! $media_query && ! empty( $block_metadata['variations'] ) ) {
    		foreach ( $block_metadata['variations'] as $style_variation ) {
    			$style_variation_node = _wp_array_get( $this->theme_json, $style_variation['path'], array() );

    			// Generate any feature/subfeature style declarations for the current style variation.
    			$variation_declarations = static::get_feature_declarations_for_node( $block_metadata, $style_variation_node );

    			// Update text indent selector for paragraph blocks based on the textIndent setting.
    			$variation_declarations = static::update_paragraph_text_indent_selector( $variation_declarations, $settings, $block_name );

    			// Update button width declarations for percentage values to use calc() with block gap.
    			$variation_declarations = static::update_button_width_declarations( $variation_declarations, $settings );

    			// Combine selectors with style variation's selector and add to overall style variation declarations.
    			foreach ( $variation_declarations as $current_selector => $new_declarations ) {
    				$combined_selectors = static::get_block_style_variation_feature_selector( $style_variation, $current_selector );

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

    			// Process pseudo-selectors for this variation (e.g., :hover, :focus)
    			if ( isset( $block_metadata['name'] ) ) {
    				$block_name = $block_metadata['name'];
    			} elseif ( in_array( 'blocks', $block_metadata['path'], true ) && count( $block_metadata['path'] ) >= 3 ) {
    				$block_name = static::get_block_name_from_metadata_path( $block_metadata );
    			} else {
    				$block_name = null;
    			}
    			$variation_pseudo_declarations = $this->process_pseudo_selectors( $style_variation_node, $style_variation['selector'], $settings, $block_name, $block_metadata, $style_variation );
    			$style_variation_declarations  = array_merge( $style_variation_declarations, $variation_pseudo_declarations );

    			// Store custom CSS for the style variation.
    			if ( isset( $style_variation_node['css'] ) ) {
    				$style_variation_custom_css[ $style_variation['selector'] ] = $this->process_blocks_custom_css( $style_variation_node['css'], $style_variation['selector'] );
    			}

    			// Store variation metadata and node for layout styles generation.
    			// Only store if the variation has blockGap defined.
    			if ( isset( $style_variation_node['spacing']['blockGap'] ) ) {
    				// Append block selector to the variation selector for proper targeting.
    				$variation_metadata_with_selector                                = $style_variation;
    				$variation_metadata_with_selector['selector']                    = $style_variation['selector'] . $block_metadata['css'];
    				$style_variation_layout_metadata[ $style_variation['selector'] ] = array(
    					'metadata' => $variation_metadata_with_selector,
    					'node'     => $style_variation_node,
    				);
    			}

    			// Store responsive breakpoint CSS for the style variation.
    			// This includes both base properties and feature-level selectors.
    			$variation_responsive_css        = '';
    			$variation_responsive_pseudo_css = '';

    			foreach ( array_keys( $responsive_media_queries ) as $breakpoint ) {
    				if ( ! isset( $style_variation_node[ $breakpoint ] ) ) {
    					continue;
    				}

    				$breakpoint_node  = $style_variation_node[ $breakpoint ];
    				$breakpoint_media = $responsive_media_queries[ $breakpoint ];
    				// Process feature-level declarations for this breakpoint.
    				$breakpoint_feature_declarations = static::get_feature_declarations_for_node( $block_metadata, $breakpoint_node );
    				$breakpoint_feature_declarations = static::update_paragraph_text_indent_selector( $breakpoint_feature_declarations, $settings, $block_name );
    				$breakpoint_feature_declarations = static::update_button_width_declarations( $breakpoint_feature_declarations, $settings );
    				foreach ( $breakpoint_feature_declarations as $feature_selector => $feature_decl ) {
    					$combined_selectors = static::get_block_style_variation_feature_selector( $style_variation, $feature_selector );

    					$feature_ruleset           = static::to_ruleset( ':root :where(' . $combined_selectors . ')', $feature_decl );
    					$variation_responsive_css .= $breakpoint_media . '{' . $feature_ruleset . '}';
    				}

    				// Process base properties for this breakpoint.
    				$breakpoint_declarations = static::compute_style_properties( $breakpoint_node, $settings, null, $this->theme_json );
    				if ( ! empty( $breakpoint_declarations ) ) {
    					$base_ruleset              = static::to_ruleset( ':root :where(' . $style_variation['selector'] . ')', $breakpoint_declarations );
    					$variation_responsive_css .= $breakpoint_media . '{' . $base_ruleset . '}';
    				}

    				$breakpoint_pseudo_declarations = $this->process_pseudo_selectors( $breakpoint_node, $style_variation['selector'], $settings, $block_name, $block_metadata, $style_variation );
    				foreach ( $breakpoint_pseudo_declarations as $pseudo_selector => $pseudo_declarations ) {
    					if ( empty( $pseudo_declarations ) ) {
    						continue;
    					}
    					$pseudo_ruleset                   = static::to_ruleset( ':root :where(' . $pseudo_selector . ')', $pseudo_declarations );
    					$variation_responsive_pseudo_css .= $breakpoint_media . '{' . $pseudo_ruleset . '}';
    				}

    				// Process custom CSS for this breakpoint.
    				if ( isset( $breakpoint_node['css'] ) ) {
    					$breakpoint_custom_css     = static::process_blocks_custom_css( $breakpoint_node['css'], $style_variation['selector'] );
    					$variation_responsive_css .= $breakpoint_media . '{' . $breakpoint_custom_css . '}';
    				}

    				// Process blockGap responsive layout styles for this variation.
    				if ( isset( $breakpoint_node['spacing']['blockGap'] ) ) {
    					$variation_layout_metadata             = $style_variation;
    					$variation_layout_metadata['selector'] = $style_variation['selector'] . $block_metadata['css'];
    					$variation_responsive_css             .= $this->get_layout_styles(
    						$variation_layout_metadata,
    						array(
    							'node'        => $breakpoint_node,
    							'media_query' => $breakpoint_media,
    						)
    					);
    				}

    				// Process nested element styles for this breakpoint state.
    				if ( isset( $breakpoint_node['elements'] ) && ! empty( $block_elements ) ) {
    					foreach ( $breakpoint_node['elements'] as $element_name => $element_node ) {
    						if ( ! isset( $block_elements[ $element_name ] ) ) {
    							continue;
    						}

    						$variation_element_selector = static::get_block_style_variation_feature_selector( $style_variation, $block_elements[ $element_name ] );

    						$element_declarations = static::compute_style_properties( $element_node, $settings, null, $this->theme_json );
    						if ( ! empty( $element_declarations ) ) {
    							$element_ruleset           = static::to_ruleset( ':root :where(' . $variation_element_selector . ')', $element_declarations );
    							$variation_responsive_css .= $breakpoint_media . '{' . $element_ruleset . '}';
    						}

    						if ( isset( $element_node['css'] ) ) {
    							$element_custom_css        = static::process_blocks_custom_css( $element_node['css'], $variation_element_selector );
    							$variation_responsive_css .= $breakpoint_media . '{' . $element_custom_css . '}';
    						}

    						if ( isset( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] ) ) {
    							foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ] as $pseudo_selector ) {
    								if ( ! isset( $element_node[ $pseudo_selector ] ) ) {
    									continue;
    								}

    								$pseudo_declarations = static::compute_style_properties( $element_node[ $pseudo_selector ], $settings, null, $this->theme_json );
    								if ( empty( $pseudo_declarations ) ) {
    									continue;
    								}

    								$pseudo_selector_ruleset          = static::to_ruleset( ':root :where(' . static::append_to_selector( $variation_element_selector, $pseudo_selector ) . ')', $pseudo_declarations );
    								$variation_responsive_pseudo_css .= $breakpoint_media . '{' . $pseudo_selector_ruleset . '}';
    							}
    						}
    					}
    				}
    			}

    			if ( ! empty( $variation_responsive_css ) ) {
    				$style_variation_responsive_css[ $style_variation['selector'] ] = $variation_responsive_css;
    			}
    			if ( ! empty( $variation_responsive_pseudo_css ) ) {
    				$style_variation_responsive_pseudo_css[ $style_variation['selector'] ] = $variation_responsive_pseudo_css;
    			}
    		}
    	}
    	/*
    	 * 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 ? array_last( $block_metadata['path'] ) : null;

    	$element_pseudo_allowed = array();

    	if ( isset( $current_element, 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 ) {
    				/*
    				 * Check if the pseudo selector is in the current selector,
    				 * ensuring it is not followed by a dash (e.g., :focus should not match :focus-visible).
    				 */
    				return preg_match( '/' . preg_quote( $pseudo_selector, '/' ) . '(?!-)/', $selector ) === 1;
    			}
    		)
    	);

    	$pseudo_selector = $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 {
    		/*
    		 * For block pseudo-selector nodes (e.g. ':hover'), $node has already had any
    		 * feature-selector properties (e.g. writingMode) removed by get_feature_declarations_for_node,
    		 * so those properties are not output twice.
    		 */
    		$declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
    	}

    	$block_rules = '';

    	/*
    	 * 1. Bespoke declaration modifiers:
    	 * - 'filter': Separate the declarations that use the general selector
    	 * from the ones using the duotone selector.
    	 * - 'background|background-image': set the html min-height to 100%
    	 * to ensure the background covers the entire viewport.
    	 */
    	$declarations_duotone       = array();
    	$should_set_root_min_height = false;

    	foreach ( $declarations as $index => $declaration ) {
    		if ( 'filter' === $declaration['name'] ) {
    			/*
    			 * 'unset' filters happen when a filter is unset
    			 * in the site-editor UI. Because the 'unset' value
    			 * in the user origin overrides the value in the
    			 * theme origin, we can skip rendering anything
    			 * here as no filter needs to be applied anymore.
    			 * So only add declarations to with values other
    			 * than 'unset'.
    			 */
    			if ( 'unset' !== $declaration['value'] ) {
    				$declarations_duotone[] = $declaration;
    			}
    			unset( $declarations[ $index ] );
    		}

    		if ( $is_root_selector && ( 'background-image' === $declaration['name'] || 'background' === $declaration['name'] ) ) {
    			$should_set_root_min_height = true;
    		}
    	}

    	/*
    	 * If root styles has a background-image or a background (gradient) set,
    	 * set the min-height to '100%'. Minus `--wp-admin--admin-bar--height` for logged-in view.
    	 * Setting the CSS rule on the HTML tag ensures background gradients and images behave similarly,
    	 * and matches the behavior of the site editor.
    	 */
    	if ( $should_set_root_min_height ) {
    		$block_rules .= static::to_ruleset(
    			'html',
    			array(
    				array(
    					'name'  => 'min-height',
    					'value' => 'calc(100% - var(--wp-admin--admin-bar--height, 0px))',
    				),
    			)
    		);
    	}

    	// Update declarations if there are separators with only background color defined.
    	if ( '.wp-block-separator' === $selector ) {
    		$declarations = static::update_separator_declarations( $declarations );
    	}

    	/*
    	 * Root selector (body) styles should not be wrapped in `:root where()` to keep
    	 * specificity at (0,0,1) and maintain backwards compatibility.
    	 *
    	 * Top-level element styles using element-only specificity selectors should
    	 * not get wrapped in `:root :where()` to maintain backwards compatibility.
    	 *
    	 * Pseudo classes, e.g. :hover, :focus etc., are a class-level selector so
    	 * still need to be wrapped in `:root :where` to cap specificity for nested
    	 * variations etc. Pseudo selectors won't match the ELEMENTS selector exactly.
    	 */
    	$element_only_selector = $is_root_selector || (
    		$current_element &&
    		isset( static::ELEMENTS[ $current_element ] ) &&
    		// buttons, captions etc. still need `:root :where()` as they are class based selectors.
    		! isset( static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $current_element ] ) &&
    		static::ELEMENTS[ $current_element ] === $selector
    	);

    	// 2. Generate and append the rules that use the general selector.
    	$general_selector = $element_only_selector ? $selector : ":root :where($selector)";
    	$block_rules     .= static::to_ruleset( $general_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 (
    		! $is_root_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( ":root :where($feature_selector)", $individual_feature_declarations );
    	}

    	// 6. Generate and append the style variation rulesets.
    	foreach ( $style_variation_declarations as $style_variation_selector => $individual_style_variation_declarations ) {
    		$block_rules .= static::to_ruleset( ":root :where($style_variation_selector)", $individual_style_variation_declarations );
    		if ( isset( $style_variation_layout_metadata[ $style_variation_selector ] ) ) {
    			$variation_data = $style_variation_layout_metadata[ $style_variation_selector ];
    			$block_rules   .= $this->get_layout_styles( $variation_data['metadata'], array( 'node' => $variation_data['node'] ) );
    		}
    		if ( isset( $style_variation_custom_css[ $style_variation_selector ] ) ) {
    			$block_rules .= $style_variation_custom_css[ $style_variation_selector ];
    		}
    		if ( isset( $style_variation_responsive_css[ $style_variation_selector ] ) ) {
    			$block_rules .= $style_variation_responsive_css[ $style_variation_selector ];
    		}
    	}
    	/*
    	 * Responsive pseudo styles must be output after default pseudo styles
    	 * so viewport state styles win in the cascade.
    	 */
    	foreach ( $style_variation_responsive_pseudo_css as $responsive_pseudo_css ) {
    		$block_rules .= $responsive_pseudo_css;
    	}

    	// 7. Generate and append any custom CSS rules.
    	if ( isset( $node['css'] ) && ! $is_root_selector ) {
    		$css_feature_selector = $block_metadata['selectors']['css'] ?? null;
    		if ( is_array( $css_feature_selector ) ) {
    			$css_feature_selector = $css_feature_selector['root'] ?? null;
    		}
    		$css_selector = is_string( $css_feature_selector ) ? $css_feature_selector : $selector;
    		$block_rules .= $this->process_blocks_custom_css( $node['css'], $css_selector );
    	}

    	// 8. Wrap the entire block output in a media query if this is a responsive node.
    	// Responsive nodes are created by get_block_nodes() for each breakpoint and carry
    	// a 'media_query' key.
    	if ( $media_query && ! empty( $block_rules ) ) {
    		$block_rules = $media_query . '{' . $block_rules . '}';
    	}

    	return $block_rules;
    }
    ```

[View all references](https://developer.wordpress.org/reference/files/wp-includes/class-wp-theme-json.php/)
[View on Trac](https://core.trac.wordpress.org/browser/tags/7.1/src/wp-includes/class-wp-theme-json.php#L3815)
[View on GitHub](https://github.com/WordPress/wordpress-develop/blob/7.1/src/wp-includes/class-wp-theme-json.php#L3815-L4188)

## 󠀁[Related](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#related)󠁿

| Uses | Description | 
| [WP_Theme_JSON::process_pseudo_selectors()](https://developer.wordpress.org/reference/classes/wp_theme_json/process_pseudo_selectors/)`wp-includes/class-wp-theme-json.php` |

Processes pseudo-selectors for any node (block or variation).

  | 
| [WP_Theme_JSON::process_blocks_custom_css()](https://developer.wordpress.org/reference/classes/wp_theme_json/process_blocks_custom_css/)`wp-includes/class-wp-theme-json.php` |

Processes the CSS, to apply nesting.

  | 
| [WP_Theme_JSON::get_layout_styles()](https://developer.wordpress.org/reference/classes/wp_theme_json/get_layout_styles/)`wp-includes/class-wp-theme-json.php` |

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

  | 
| [_wp_array_get()](https://developer.wordpress.org/reference/functions/_wp_array_get/)`wp-includes/functions.php` |

Accesses an array in depth based on a path of keys.

  |

## 󠀁[Changelog](https://developer.wordpress.org/reference/classes/wp_theme_json/get_styles_for_block/?output_format=md#changelog)󠁿

| Version | Description | 
| [6.6.0](https://developer.wordpress.org/reference/since/6.6.0/) | Setting a min-height of HTML when root styles have a background gradient or image.
 Updated general global styles specificity to 0-1-0. Fixed custom CSS output in block style variations. | 
| [6.1.0](https://developer.wordpress.org/reference/since/6.1.0/) | Introduced. |

## User Contributed Notes

You must [log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fdeveloper.wordpress.org%2Freference%2Fclasses%2Fwp_theme_json%2Fget_styles_for_block%2F)
before being able to contribute a note or feedback.