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