[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Block state support for frontend CSS generation.
   4   *
   5   * Generates scoped CSS for per-instance state styles declared in block attributes,
   6   * including pseudo-states (e.g., `style[':hover']`) and responsive states
   7   * (e.g., `style['@mobile']` and `style['@mobile'][':hover']`).
   8   *
   9   * @package WordPress
  10   * @since 7.1.0
  11   */
  12  
  13  /**
  14   * Converts internal preset references to CSS custom property references.
  15   *
  16   * State styles are emitted as CSS rules and cannot rely on preset classnames.
  17   * Converting `var:preset|color|contrast` to
  18   * `var(--wp--preset--color--contrast)` ensures preset values are emitted as
  19   * declarations by the style engine.
  20   *
  21   * @since 7.1.0
  22   *
  23   * @param mixed $value Style value to normalize.
  24   * @return mixed Normalized style value.
  25   */
  26  function wp_normalize_state_preset_vars( $value ) {
  27      if ( is_array( $value ) ) {
  28          foreach ( $value as $key => $nested_value ) {
  29              $value[ $key ] = wp_normalize_state_preset_vars( $nested_value );
  30          }
  31          return $value;
  32      }
  33  
  34      if ( ! is_string( $value ) || ! str_starts_with( $value, 'var:preset|' ) ) {
  35          return $value;
  36      }
  37  
  38      $parts = explode( '|', substr( $value, strlen( 'var:' ) ) );
  39  
  40      /*
  41       * The slug is kebab-cased when the preset's custom property is generated,
  42       * so a reference has to be converted the same way or it points at a
  43       * property that does not exist (`--wp--preset--font-size--3xl` for a preset
  44       * generated as `--wp--preset--font-size--3-xl`). Mirrors
  45       * `WP_Theme_JSON::convert_custom_properties()` and the JavaScript style
  46       * engine's `getCSSValueFromRawStyle()`.
  47       */
  48      if ( 3 === count( $parts ) ) {
  49          $parts[2] = _wp_to_kebab_case( $parts[2] );
  50      }
  51  
  52      return 'var(--wp--' . implode( '--', $parts ) . ')';
  53  }
  54  
  55  /**
  56   * Normalizes a state style object before generating CSS declarations.
  57   *
  58   * @since 7.1.0
  59   *
  60   * @param array $style State style object.
  61   * @return array Normalized state style object.
  62   */
  63  function wp_normalize_state_style_for_css_output( $style ) {
  64      // Layout is processed separately by wp_render_layout_support_flag(), so we remove it before declaration generation.
  65      unset( $style['layout'] );
  66      $style = wp_normalize_state_preset_vars( $style );
  67      return $style;
  68  }
  69  
  70  /**
  71   * Adds fallback border-style declarations for visible border declarations.
  72   *
  73   * CSS does not render border color or width unless a border style is also set.
  74   * State styles are emitted as stylesheet rules rather than inline styles, so
  75   * they cannot rely on the block-library inline-style attribute fallback rules.
  76   *
  77   * @since 7.1.0
  78   *
  79   * @param array $declarations CSS declarations generated by the style engine.
  80   * @return array CSS declarations with fallback border styles applied where needed.
  81   */
  82  function wp_get_state_declarations_with_fallback_border_styles( $declarations ) {
  83      if ( ! is_array( $declarations ) ) {
  84          return $declarations;
  85      }
  86  
  87      $has_border_style = isset( $declarations['border-style'] ) && '' !== $declarations['border-style'];
  88      $has_border_color = isset( $declarations['border-color'] ) && '' !== $declarations['border-color'];
  89      $has_border_width = isset( $declarations['border-width'] ) && '' !== $declarations['border-width'];
  90  
  91      if ( ! $has_border_style && ( $has_border_color || $has_border_width ) ) {
  92          $declarations['border-style'] = 'solid';
  93      }
  94  
  95      $sides = array( 'top', 'right', 'bottom', 'left' );
  96      foreach ( $sides as $side ) {
  97          $side_style_property = "border-$side-style";
  98          $side_color_property = "border-$side-color";
  99          $side_width_property = "border-$side-width";
 100  
 101          $has_side_style = isset( $declarations[ $side_style_property ] ) && '' !== $declarations[ $side_style_property ];
 102          $has_side_color = isset( $declarations[ $side_color_property ] ) && '' !== $declarations[ $side_color_property ];
 103          $has_side_width = isset( $declarations[ $side_width_property ] ) && '' !== $declarations[ $side_width_property ];
 104  
 105          if ( ! $has_border_style && ! $has_side_style && ( $has_side_color || $has_side_width ) ) {
 106              $declarations[ $side_style_property ] = 'solid';
 107          }
 108      }
 109  
 110      return $declarations;
 111  }
 112  
 113  /**
 114   * Adds background reset declarations to prevent gradient/solid color conflicts.
 115   *
 116   * When a state sets a solid background-color, any gradient applied to the
 117   * default state (via `background` shorthand or `background-image`) must be
 118   * explicitly cleared. Without this, the gradient image layer remains visible
 119   * on top of the solid hover color even when `!important` is used, because
 120   * `background-color` and `background-image` are separate CSS properties.
 121   *
 122   * @since 7.1.0
 123   *
 124   * @param array $declarations CSS declarations generated by the style engine.
 125   * @return array CSS declarations with background resets applied where needed.
 126   */
 127  function wp_get_state_declarations_with_background_resets( $declarations ) {
 128      if ( ! is_array( $declarations ) ) {
 129          return $declarations;
 130      }
 131  
 132      $has_background_color = isset( $declarations['background-color'] ) && '' !== $declarations['background-color'];
 133      $has_background       = isset( $declarations['background'] ) && '' !== $declarations['background'];
 134      $has_background_image = isset( $declarations['background-image'] ) && '' !== $declarations['background-image'];
 135  
 136      /*
 137       * When the state sets a solid background-color but no gradient of its own,
 138       * emit `background-image: unset` to clear any gradient (whether stored as
 139       * the `background` shorthand or as `background-image`) that was applied to
 140       * the default / normal state via an inline style attribute. The declaration
 141       * is marked important when the state rule is registered with the style engine.
 142       */
 143      if ( $has_background_color && ! $has_background && ! $has_background_image ) {
 144          $declarations['background-image'] = 'unset';
 145      }
 146  
 147      return $declarations;
 148  }
 149  
 150  /**
 151   * Adds fallback dimension styles for aspectRatio and height block-support values.
 152   *
 153   * @since 7.1.0
 154   *
 155   * @param array $state_style State style object.
 156   * @return array State style object with fallback dimension styles applied where needed.
 157   */
 158  function wp_get_state_style_with_fallback_dimension_styles( $state_style ) {
 159      if ( ! is_array( $state_style ) ) {
 160          return $state_style;
 161      }
 162  
 163      $dimensions = isset( $state_style['dimensions'] ) && is_array( $state_style['dimensions'] )
 164          ? $state_style['dimensions']
 165          : array();
 166  
 167      if ( empty( $dimensions ) ) {
 168          return $state_style;
 169      }
 170  
 171      if ( wp_is_explicit_aspect_ratio_value( $dimensions['aspectRatio'] ?? null ) ) {
 172          return array_replace_recursive(
 173              $state_style,
 174              array(
 175                  'dimensions' => array(
 176                      'minHeight' => 'unset',
 177                      'height'    => 'unset',
 178                  ),
 179              )
 180          );
 181      }
 182  
 183      $has_min_height = isset( $dimensions['minHeight'] ) && ( is_string( $dimensions['minHeight'] ) || is_numeric( $dimensions['minHeight'] ) ) && '' !== trim( (string) $dimensions['minHeight'] );
 184      $has_height     = isset( $dimensions['height'] ) && ( is_string( $dimensions['height'] ) || is_numeric( $dimensions['height'] ) ) && '' !== trim( (string) $dimensions['height'] );
 185  
 186      if ( $has_min_height || $has_height ) {
 187          return array_replace_recursive(
 188              $state_style,
 189              array(
 190                  'dimensions' => array(
 191                      'aspectRatio' => 'unset',
 192                  ),
 193              )
 194          );
 195      }
 196  
 197      return $state_style;
 198  }
 199  
 200  /**
 201   * Adds a style fragment to a selector-keyed state style group.
 202   *
 203   * @since 7.1.0
 204   *
 205   * @param array       $groups   Selector-keyed style groups.
 206   * @param string|null $selector Block or feature selector.
 207   * @param array       $style    Style fragment.
 208   */
 209  function wp_add_state_style_group( &$groups, $selector, $style ) {
 210      $key = is_string( $selector ) ? $selector : '';
 211  
 212      if ( ! isset( $groups[ $key ] ) ) {
 213          $groups[ $key ] = array(
 214              'selector' => $selector,
 215              'style'    => array(),
 216          );
 217      }
 218  
 219      $groups[ $key ]['style'] = array_replace_recursive( $groups[ $key ]['style'], $style );
 220  }
 221  
 222  /**
 223   * Splits a state style object into groups based on block feature selectors.
 224   *
 225   * @since 7.1.0
 226   *
 227   * @param array $state_style     State style object.
 228   * @param array $block_selectors Block selectors metadata.
 229   * @return array[] Selector/style groups.
 230   */
 231  function wp_get_state_style_groups( $state_style, $block_selectors ) {
 232      $groups = array();
 233  
 234      foreach ( $state_style as $feature => $feature_styles ) {
 235          $feature_selectors = $block_selectors[ $feature ] ?? null;
 236  
 237          if ( is_string( $feature_selectors ) ) {
 238              wp_add_state_style_group(
 239                  $groups,
 240                  $feature_selectors,
 241                  array( $feature => $feature_styles )
 242              );
 243              continue;
 244          }
 245  
 246          if ( is_array( $feature_selectors ) && is_array( $feature_styles ) ) {
 247              $remaining_styles = $feature_styles;
 248  
 249              foreach ( $feature_selectors as $subfeature => $subfeature_selector ) {
 250                  if (
 251                      'root' === $subfeature ||
 252                      ! is_string( $subfeature_selector ) ||
 253                      ! array_key_exists( $subfeature, $feature_styles )
 254                  ) {
 255                      continue;
 256                  }
 257  
 258                  wp_add_state_style_group(
 259                      $groups,
 260                      $subfeature_selector,
 261                      array(
 262                          $feature => array(
 263                              $subfeature => $feature_styles[ $subfeature ],
 264                          ),
 265                      )
 266                  );
 267                  unset( $remaining_styles[ $subfeature ] );
 268              }
 269  
 270              if ( array() !== $remaining_styles ) {
 271                  wp_add_state_style_group(
 272                      $groups,
 273                      $feature_selectors['root'] ?? ( $block_selectors['root'] ?? null ),
 274                      array( $feature => $remaining_styles )
 275                  );
 276              }
 277              continue;
 278          }
 279  
 280          wp_add_state_style_group(
 281              $groups,
 282              $block_selectors['root'] ?? null,
 283              array( $feature => $feature_styles )
 284          );
 285      }
 286  
 287      return array_values( $groups );
 288  }
 289  
 290  /**
 291   * Returns a style object with nested state keys removed.
 292   *
 293   * @since 7.1.0
 294   *
 295   * @param array $state_style State style object.
 296   * @param array $nested_keys Keys to remove from the root style object.
 297   * @return array Root-only style object.
 298   */
 299  function wp_get_root_state_style( $state_style, $nested_keys ) {
 300      if ( ! is_array( $state_style ) ) {
 301          return $state_style;
 302      }
 303  
 304      $root_style = $state_style;
 305      foreach ( $nested_keys as $key ) {
 306          unset( $root_style[ $key ] );
 307      }
 308  
 309      return $root_style;
 310  }
 311  
 312  /**
 313   * Generates all element selectors for a block root selector.
 314   *
 315   * @since 7.1.0
 316   *
 317   * @param string $root_selector The block root CSS selector.
 318   * @return string[] Element selectors keyed by element name.
 319   */
 320  function wp_get_block_state_element_selectors( $root_selector ) {
 321      if ( ! is_string( $root_selector ) || '' === trim( $root_selector ) ) {
 322          return array();
 323      }
 324  
 325      $block_selectors   = wp_split_selector_list( $root_selector );
 326      $element_selectors = array();
 327  
 328      foreach ( WP_Theme_JSON::ELEMENTS as $element_name => $element_selector ) {
 329          $selectors = array();
 330  
 331          foreach ( $block_selectors as $block_selector ) {
 332              $block_selector = trim( $block_selector );
 333              if ( '' === $block_selector ) {
 334                  continue;
 335              }
 336  
 337              if ( $block_selector === $element_selector ) {
 338                  $selectors = array( $element_selector );
 339                  break;
 340              }
 341  
 342              $selector_prefix = "$block_selector ";
 343              if ( ! str_contains( $element_selector, ',' ) ) {
 344                  $selectors[] = $selector_prefix . $element_selector;
 345                  continue;
 346              }
 347  
 348              $prepended_selectors = array();
 349              foreach ( wp_split_selector_list( $element_selector ) as $selector ) {
 350                  $prepended_selectors[] = $selector_prefix . $selector;
 351              }
 352              $selectors[] = implode( ',', $prepended_selectors );
 353          }
 354  
 355          if ( ! empty( $selectors ) ) {
 356              $element_selectors[ $element_name ] = implode( ',', $selectors );
 357          }
 358      }
 359  
 360      return $element_selectors;
 361  }
 362  
 363  /**
 364   * Adds a compiled state style rule to a rule list.
 365   *
 366   * @since 7.1.0
 367   *
 368   * @param array       $css_rules   Style rules.
 369   * @param string      $state       Pseudo-state selector.
 370   * @param string|null $selector    Block, feature, or element selector.
 371   * @param array       $style       Style object.
 372   * @param string|null $rules_group Optional CSS grouping rule, e.g. a media query.
 373   */
 374  function wp_add_block_state_style_rule( &$css_rules, $state, $selector, $style, $rules_group = null ) {
 375      if ( empty( $style ) || ! is_array( $style ) ) {
 376          return;
 377      }
 378  
 379      $compiled     = wp_style_engine_get_styles(
 380          wp_normalize_state_style_for_css_output( $style )
 381      );
 382      $declarations = $compiled['declarations'] ?? array();
 383      $text_align   = $style['typography']['textAlign'] ?? null;
 384      // Base text alignment is class-based, so state styles need a declaration.
 385      if ( is_string( $text_align ) && '' !== trim( $text_align ) ) {
 386          $declarations['text-align'] = $text_align;
 387      }
 388  
 389      if ( empty( $declarations ) ) {
 390          return;
 391      }
 392  
 393      $css_rules[] = array(
 394          'state'        => $state,
 395          'selector'     => $selector,
 396          'declarations' => $declarations,
 397      );
 398      if ( ! empty( $rules_group ) ) {
 399          $css_rules[ count( $css_rules ) - 1 ]['rules_group'] = $rules_group;
 400      }
 401  }
 402  
 403  /**
 404   * Builds compiled state style rules, preserving the selector each rule targets.
 405   *
 406   * @since 7.1.0
 407   *
 408   * @param array         $state_styles Map of state to style array.
 409   * @param WP_Block_Type $block_type   Block type.
 410   * @param string|null   $rules_group  Optional CSS grouping rule, e.g. a media query.
 411   * @return array[] State style rules.
 412   */
 413  function wp_get_block_state_style_rules( $state_styles, $block_type, $rules_group = null ) {
 414      $css_rules       = array();
 415      $block_selectors = is_array( $block_type->selectors )
 416          ? $block_type->selectors
 417          : array();
 418  
 419      foreach ( $state_styles as $state => $state_style ) {
 420          if ( empty( $state_style ) || ! is_array( $state_style ) ) {
 421              continue;
 422          }
 423  
 424          foreach ( wp_get_state_style_groups( $state_style, $block_selectors ) as $group ) {
 425              wp_add_block_state_style_rule(
 426                  $css_rules,
 427                  $state,
 428                  $group['selector'],
 429                  $group['style'],
 430                  $rules_group
 431              );
 432          }
 433      }
 434  
 435      return $css_rules;
 436  }
 437  
 438  /**
 439   * Returns a unique class for a set of state style rules.
 440   *
 441   * @since 7.1.0
 442   *
 443   * @param string $block_name Block name.
 444   * @param array  $css_rules  State style rules.
 445   * @return string Unique class name.
 446   */
 447  function wp_get_block_state_unique_class( $block_name, $css_rules ) {
 448      return 'wp-states-' . substr(
 449          md5(
 450              wp_json_encode(
 451                  array(
 452                      'blockName' => $block_name,
 453                      'rules'     => $css_rules,
 454                  )
 455              )
 456          ),
 457          0,
 458          8
 459      );
 460  }
 461  
 462  /**
 463   * Splits a selector list by top-level commas.
 464   *
 465   * @since 7.1.0
 466   *
 467   * @param string $selector CSS selector list.
 468   * @return string[] Selectors.
 469   */
 470  function wp_split_selector_list( $selector ) {
 471      if ( ! str_contains( $selector, ',' ) ) {
 472          return array( $selector );
 473      }
 474  
 475      $selectors         = array();
 476      $current_selector  = '';
 477      $parentheses_depth = 0;
 478      $selector_length   = strlen( $selector );
 479  
 480      for ( $i = 0; $i < $selector_length; $i++ ) {
 481          $char = $selector[ $i ];
 482  
 483          if ( '(' === $char ) {
 484              ++$parentheses_depth;
 485          } elseif ( ')' === $char && $parentheses_depth > 0 ) {
 486              --$parentheses_depth;
 487          } elseif ( ',' === $char && 0 === $parentheses_depth ) {
 488              $selectors[]      = $current_selector;
 489              $current_selector = '';
 490              continue;
 491          }
 492  
 493          $current_selector .= $char;
 494      }
 495  
 496      $selectors[] = $current_selector;
 497  
 498      return $selectors;
 499  }
 500  
 501  /**
 502   * Builds a scoped selector from a block selector and optional pseudo-state.
 503   *
 504   * @since 7.1.0
 505   *
 506   * @param string      $base_selector  Block-instance scoping selector.
 507   * @param string|null $block_selector Block or feature selector from metadata.
 508   * @param string      $state          Pseudo-state selector.
 509   * @return string Scoped selector.
 510   */
 511  function wp_build_state_selector( $base_selector, $block_selector, $state ) {
 512      if ( ! is_string( $block_selector ) || '' === trim( $block_selector ) ) {
 513          return $base_selector . $state;
 514      }
 515  
 516      $selectors        = wp_split_selector_list( $block_selector );
 517      $scoped_selectors = array();
 518  
 519      foreach ( $selectors as $selector ) {
 520          $selector = trim( $selector );
 521          if ( '' === $selector ) {
 522              continue;
 523          }
 524  
 525          /*
 526           * Replace only the leading block selector part (e.g. class name,
 527           * attribute selector, ID, or tag name) with the block instance selector.
 528           * Preserve anything after that prefix, including modifier classes on the
 529           * same element and combinators without spaces.
 530           */
 531          if ( preg_match( '/^([.#]?[-_a-zA-Z0-9]+|\[[^\]]+\])/', $selector, $matches ) ) {
 532              $scoped_selectors[] = $base_selector . substr( $selector, strlen( $matches[0] ) ) . $state;
 533              continue;
 534          }
 535  
 536          $scoped_selectors[] = $base_selector . $state;
 537      }
 538  
 539      return empty( $scoped_selectors )
 540          ? $base_selector . $state
 541          : implode( ', ', $scoped_selectors );
 542  }
 543  
 544  /**
 545   * Renders per-instance state styles on the frontend.
 546   *
 547   * @since 7.1.0
 548   *
 549   * @param string $block_content The block's rendered HTML.
 550   * @param array  $block         The block data including blockName and attrs.
 551   * @return string Modified block content with injected state styles.
 552   */
 553  function wp_render_block_states_support( $block_content, $block ) {
 554      if ( empty( $block['blockName'] ) || empty( $block_content ) ) {
 555          return $block_content;
 556      }
 557  
 558      /*
 559       * Every CSS rule this function can produce is keyed off the block's `style`
 560       * attribute. Without it there is nothing to generate, so bail before doing
 561       * any of the lookups below — this runs for every block on every request.
 562       */
 563      $style = $block['attrs']['style'] ?? array();
 564      if ( empty( $style ) || ! is_array( $style ) ) {
 565          return $block_content;
 566      }
 567  
 568      $block_name = $block['blockName'];
 569      $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
 570      if ( ! $block_type ) {
 571          return $block_content;
 572      }
 573  
 574      $supported_pseudo_states  = WP_Theme_JSON::VALID_BLOCK_PSEUDO_SELECTORS[ $block_name ] ?? array();
 575      $css_rules                = array();
 576      $viewport_settings        = wp_get_global_settings( array( 'viewport' ) );
 577      $responsive_media_queries = WP_Theme_JSON::get_viewport_media_queries( $viewport_settings );
 578  
 579      foreach ( $supported_pseudo_states as $pseudo_state ) {
 580          if ( empty( $style[ $pseudo_state ] ) || ! is_array( $style[ $pseudo_state ] ) ) {
 581              continue;
 582          }
 583  
 584          $css_rules = array_merge(
 585              $css_rules,
 586              wp_get_block_state_style_rules(
 587                  array( $pseudo_state => $style[ $pseudo_state ] ),
 588                  $block_type
 589              )
 590          );
 591      }
 592  
 593      foreach ( $responsive_media_queries as $breakpoint => $media_query ) {
 594          if ( empty( $style[ $breakpoint ] ) || ! is_array( $style[ $breakpoint ] ) ) {
 595              continue;
 596          }
 597  
 598          $root_state_style = wp_get_root_state_style(
 599              $style[ $breakpoint ],
 600              array_merge( array( 'elements' ), $supported_pseudo_states )
 601          );
 602  
 603          if ( ! empty( $root_state_style ) ) {
 604              $css_rules = array_merge(
 605                  $css_rules,
 606                  wp_get_block_state_style_rules(
 607                      array( '' => $root_state_style ),
 608                      $block_type,
 609                      $media_query
 610                  )
 611              );
 612          }
 613  
 614          if (
 615              ! empty( $style[ $breakpoint ]['elements'] ) &&
 616              is_array( $style[ $breakpoint ]['elements'] )
 617          ) {
 618              $element_selectors = wp_get_block_state_element_selectors(
 619                  wp_get_block_css_selector( $block_type )
 620              );
 621  
 622              foreach ( $style[ $breakpoint ]['elements'] as $element_name => $element_style ) {
 623                  if (
 624                      empty( $element_style ) ||
 625                      ! is_array( $element_style ) ||
 626                      empty( $element_selectors[ $element_name ] )
 627                  ) {
 628                      continue;
 629                  }
 630  
 631                  $element_pseudo_states = WP_Theme_JSON::VALID_ELEMENT_PSEUDO_SELECTORS[ $element_name ]
 632                      ?? array();
 633                  $root_element_style    = wp_get_root_state_style(
 634                      $element_style,
 635                      $element_pseudo_states
 636                  );
 637  
 638                  wp_add_block_state_style_rule(
 639                      $css_rules,
 640                      '',
 641                      $element_selectors[ $element_name ],
 642                      $root_element_style,
 643                      $media_query
 644                  );
 645  
 646                  foreach ( $element_pseudo_states as $pseudo_state ) {
 647                      if (
 648                          empty( $element_style[ $pseudo_state ] ) ||
 649                          ! is_array( $element_style[ $pseudo_state ] )
 650                      ) {
 651                          continue;
 652                      }
 653  
 654                      wp_add_block_state_style_rule(
 655                          $css_rules,
 656                          $pseudo_state,
 657                          $element_selectors[ $element_name ],
 658                          $element_style[ $pseudo_state ],
 659                          $media_query
 660                      );
 661                  }
 662              }
 663          }
 664  
 665          foreach ( $supported_pseudo_states as $pseudo_state ) {
 666              if ( empty( $style[ $breakpoint ][ $pseudo_state ] ) || ! is_array( $style[ $breakpoint ][ $pseudo_state ] ) ) {
 667                  continue;
 668              }
 669  
 670              $css_rules = array_merge(
 671                  $css_rules,
 672                  wp_get_block_state_style_rules(
 673                      array( $pseudo_state => $style[ $breakpoint ][ $pseudo_state ] ),
 674                      $block_type,
 675                      $media_query
 676                  )
 677              );
 678          }
 679      }
 680  
 681      if ( empty( $css_rules ) ) {
 682          return $block_content;
 683      }
 684  
 685      $unique_class = wp_get_block_state_unique_class( $block_name, $css_rules );
 686  
 687      /*
 688       * Register each state's CSS rules with the block-supports style engine store.
 689       * The store deduplicates rules by selector — two block instances with identical
 690       * state styles share the same hash class and therefore the same selector,
 691       * so only one CSS rule is emitted. The store is flushed to the page by
 692       * wp_enqueue_stored_styles() rather than injected inline here.
 693       *
 694       * State declarations need !important to apply reliably over inline styles and
 695       * preset utility classes such as .has-accent-3-background-color.
 696       *
 697       * Layout-driven state styles (responsive layout, blockGap, child layout) are
 698       * handled by wp_render_layout_support_flag() so they share a selector with
 699       * the base layout and target the correct (inner) wrapper element.
 700       */
 701      $style_rules = array();
 702      foreach ( $css_rules as $rule ) {
 703          $declarations                 = $rule['declarations'];
 704          $important_declaration_values = wp_get_state_declarations_with_background_resets( $declarations );
 705          $important_declarations       = new WP_Style_Engine_CSS_Declarations();
 706          foreach ( $important_declaration_values as $property => $value ) {
 707              $important_declarations->add_declaration(
 708                  $property,
 709                  $value,
 710                  array(
 711                      'important' => true,
 712                  )
 713              );
 714          }
 715          $selector             = wp_build_state_selector(
 716              ".$unique_class",
 717              $rule['selector'],
 718              $rule['state']
 719          );
 720          $important_style_rule = array(
 721              'selector'     => $selector,
 722              'declarations' => $important_declarations,
 723          );
 724          if ( ! empty( $rule['rules_group'] ) ) {
 725              $important_style_rule['rules_group'] = $rule['rules_group'];
 726          }
 727          $style_rules[] = $important_style_rule;
 728  
 729          $fallback_declarations = wp_get_state_declarations_with_fallback_border_styles( $declarations );
 730          foreach ( array_keys( $declarations ) as $property ) {
 731              unset( $fallback_declarations[ $property ] );
 732          }
 733  
 734          if ( empty( $fallback_declarations ) ) {
 735              continue;
 736          }
 737  
 738          $fallback_style_rule = array(
 739              'selector'     => $selector,
 740              'declarations' => $fallback_declarations,
 741          );
 742          if ( ! empty( $rule['rules_group'] ) ) {
 743              $fallback_style_rule['rules_group'] = $rule['rules_group'];
 744          }
 745          $style_rules[] = $fallback_style_rule;
 746      }
 747  
 748      wp_style_engine_get_stylesheet_from_css_rules(
 749          $style_rules,
 750          array(
 751              'context'  => 'block-supports',
 752              'prettify' => false,
 753          )
 754      );
 755  
 756      $processor = new WP_HTML_Tag_Processor( $block_content );
 757      if ( $processor->next_tag() ) {
 758          $processor->add_class( $unique_class );
 759      }
 760      return $processor->get_updated_html();
 761  }
 762  add_filter( 'render_block', 'wp_render_block_states_support', 10, 2 );