[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Elements styles block support.
   4   *
   5   * @package WordPress
   6   * @since 5.8.0
   7   */
   8  
   9  /**
  10   * Get the elements class names.
  11   *
  12   * @since 6.0.0
  13   * @access private
  14   *
  15   * @param array $block Block object.
  16   * @return string      The unique class name.
  17   */
  18  function wp_get_elements_class_name( $block ) {
  19      return 'wp-elements-' . md5( serialize( $block ) );
  20  }
  21  
  22  /**
  23   * Update the block content with elements class names.
  24   *
  25   * @since 5.8.0
  26   * @access private
  27   *
  28   * @param string $block_content Rendered block content.
  29   * @param array  $block         Block object.
  30   * @return string Filtered block content.
  31   */
  32  function wp_render_elements_support( $block_content, $block ) {
  33      if ( ! $block_content ) {
  34          return $block_content;
  35      }
  36  
  37      $block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
  38      $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
  39  
  40      if ( $skip_link_color_serialization ) {
  41          return $block_content;
  42      }
  43  
  44      $link_color = null;
  45      if ( ! empty( $block['attrs'] ) ) {
  46          $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
  47      }
  48  
  49      /*
  50       * For now we only care about link color.
  51       * This code in the future when we have a public API
  52       * should take advantage of WP_Theme_JSON::compute_style_properties
  53       * and work for any element and style.
  54       */
  55      if ( null === $link_color ) {
  56          return $block_content;
  57      }
  58  
  59      $class_name = wp_get_elements_class_name( $block );
  60  
  61      // Like the layout hook this assumes the hook only applies to blocks with a single wrapper.
  62      // Retrieve the opening tag of the first HTML element.
  63      $html_element_matches = array();
  64      preg_match( '/<[^>]+>/', $block_content, $html_element_matches, PREG_OFFSET_CAPTURE );
  65      $first_element = $html_element_matches[0][0];
  66      // If the first HTML element has a class attribute just add the new class
  67      // as we do on layout and duotone.
  68      if ( strpos( $first_element, 'class="' ) !== false ) {
  69          $content = preg_replace(
  70              '/' . preg_quote( 'class="', '/' ) . '/',
  71              'class="' . $class_name . ' ',
  72              $block_content,
  73              1
  74          );
  75      } else {
  76          // If the first HTML element has no class attribute we should inject the attribute before the attribute at the end.
  77          $first_element_offset = $html_element_matches[0][1];
  78          $content              = substr_replace( $block_content, ' class="' . $class_name . '"', $first_element_offset + strlen( $first_element ) - 1, 0 );
  79      }
  80  
  81      return $content;
  82  }
  83  
  84  /**
  85   * Render the elements stylesheet.
  86   *
  87   * In the case of nested blocks we want the parent element styles to be rendered before their descendants.
  88   * This solves the issue of an element (e.g.: link color) being styled in both the parent and a descendant:
  89   * we want the descendant style to take priority, and this is done by loading it after, in DOM order.
  90   *
  91   * @since 6.0.0
  92   * @access private
  93   *
  94   * @param string|null $pre_render   The pre-rendered content. Default null.
  95   * @param array       $block        The block being rendered.
  96   *
  97   * @return null
  98   */
  99  function wp_render_elements_support_styles( $pre_render, $block ) {
 100      $block_type                    = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
 101      $skip_link_color_serialization = wp_should_skip_block_supports_serialization( $block_type, 'color', 'link' );
 102      if ( $skip_link_color_serialization ) {
 103          return null;
 104      }
 105  
 106      $link_color = null;
 107      if ( ! empty( $block['attrs'] ) ) {
 108          $link_color = _wp_array_get( $block['attrs'], array( 'style', 'elements', 'link', 'color', 'text' ), null );
 109      }
 110  
 111      /*
 112      * For now we only care about link color.
 113      * This code in the future when we have a public API
 114      * should take advantage of WP_Theme_JSON::compute_style_properties
 115      * and work for any element and style.
 116      */
 117      if ( null === $link_color ) {
 118          return null;
 119      }
 120  
 121      $class_name = wp_get_elements_class_name( $block );
 122  
 123      if ( strpos( $link_color, 'var:preset|color|' ) !== false ) {
 124          // Get the name from the string and add proper styles.
 125          $index_to_splice = strrpos( $link_color, '|' ) + 1;
 126          $link_color_name = substr( $link_color, $index_to_splice );
 127          $link_color      = "var(--wp--preset--color--$link_color_name)";
 128      }
 129      $link_color_declaration = esc_html( safecss_filter_attr( "color: $link_color" ) );
 130  
 131      $style = ".$class_name a{" . $link_color_declaration . ';}';
 132  
 133      wp_enqueue_block_support_styles( $style );
 134  
 135      return null;
 136  }
 137  
 138  add_filter( 'render_block', 'wp_render_elements_support', 10, 2 );
 139  add_filter( 'pre_render_block', 'wp_render_elements_support_styles', 10, 2 );