[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Server-side rendering of the `core/post-featured-image` block.
   4   *
   5   * @package WordPress
   6   */
   7  
   8  /**
   9   * Renders the `core/post-featured-image` block on the server.
  10   *
  11   * @param array    $attributes Block attributes.
  12   * @param string   $content    Block default content.
  13   * @param WP_Block $block      Block instance.
  14   * @return string Returns the featured image for the current post.
  15   */
  16  function render_block_core_post_featured_image( $attributes, $content, $block ) {
  17      if ( ! isset( $block->context['postId'] ) ) {
  18          return '';
  19      }
  20      $post_ID = $block->context['postId'];
  21  
  22      $is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
  23      $size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
  24      $attr           = get_block_core_post_featured_image_border_attributes( $attributes );
  25      $overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
  26  
  27      if ( $is_link ) {
  28          if ( get_the_title( $post_ID ) ) {
  29              $attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) );
  30          } else {
  31              $attr['alt'] = sprintf(
  32                  // translators: %d is the post ID.
  33                  __( 'Untitled post %d' ),
  34                  $post_ID
  35              );
  36          }
  37      }
  38  
  39      $extra_styles = '';
  40  
  41      // Aspect ratio with a height set needs to override the default width/height.
  42      if ( ! empty( $attributes['aspectRatio'] ) ) {
  43          $extra_styles .= 'width:100%;height:100%;';
  44      } elseif ( ! empty( $attributes['height'] ) ) {
  45          $extra_styles .= "height:{$attributes['height']};";
  46      }
  47  
  48      if ( ! empty( $attributes['scale'] ) ) {
  49          $extra_styles .= "object-fit:{$attributes['scale']};";
  50      }
  51  
  52      if ( ! empty( $extra_styles ) ) {
  53          $attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
  54      }
  55  
  56      $featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
  57  
  58      // Get the first image from the post.
  59      if ( $attributes['useFirstImageFromPost'] && ! $featured_image ) {
  60          $content_post = get_post( $post_ID );
  61          $content      = $content_post->post_content;
  62          $processor    = new WP_HTML_Tag_Processor( $content );
  63  
  64          /*
  65           * Transfer the image tag from the post into a new text snippet.
  66           * Because the HTML API doesn't currently expose a way to extract
  67           * HTML substrings this is necessary as a workaround. Of note, this
  68           * is different than directly extracting the IMG tag:
  69           * - If there are duplicate attributes in the source there will only be one in the output.
  70           * - If there are single-quoted or unquoted attributes they will be double-quoted in the output.
  71           * - If there are named character references in the attribute values they may be replaced with their direct code points. E.g. `&hellip;` becomes `…`.
  72           * In the future there will likely be a mechanism to copy snippets of HTML from
  73           * one document into another, via the HTML Processor's `get_outer_html()` or
  74           * equivalent. When that happens it would be appropriate to replace this custom
  75           * code with that canonical code.
  76           */
  77          if ( $processor->next_tag( 'img' ) ) {
  78              $tag_html = new WP_HTML_Tag_Processor( '<img>' );
  79              $tag_html->next_tag();
  80              foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) {
  81                  $tag_html->set_attribute( $name, $processor->get_attribute( $name ) );
  82              }
  83              $featured_image = $tag_html->get_updated_html();
  84          }
  85      }
  86  
  87      if ( ! $featured_image ) {
  88          return '';
  89      }
  90  
  91      if ( $is_link ) {
  92          $link_target    = $attributes['linkTarget'];
  93          $rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
  94          $height         = ! empty( $attributes['height'] ) ? 'style="' . esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . '"' : '';
  95          $featured_image = sprintf(
  96              '<a href="%1$s" target="%2$s" %3$s %4$s>%5$s%6$s</a>',
  97              get_the_permalink( $post_ID ),
  98              esc_attr( $link_target ),
  99              $rel,
 100              $height,
 101              $featured_image,
 102              $overlay_markup
 103          );
 104      } else {
 105          $featured_image = $featured_image . $overlay_markup;
 106      }
 107  
 108      $aspect_ratio = ! empty( $attributes['aspectRatio'] )
 109          ? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
 110          : '';
 111      $width        = ! empty( $attributes['width'] )
 112          ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
 113          : '';
 114      $height       = ! empty( $attributes['height'] )
 115          ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
 116          : '';
 117      if ( ! $height && ! $width && ! $aspect_ratio ) {
 118          $wrapper_attributes = get_block_wrapper_attributes();
 119      } else {
 120          $wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 121      }
 122      return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 123  }
 124  
 125  /**
 126   * Generate markup for the HTML element that will be used for the overlay.
 127   *
 128   * @param array $attributes Block attributes.
 129   *
 130   * @return string HTML markup in string format.
 131   */
 132  function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
 133      $has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
 134      $has_gradient        = isset( $attributes['gradient'] ) && $attributes['gradient'];
 135      $has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
 136      $has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
 137      $has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
 138      $class_names         = array( 'wp-block-post-featured-image__overlay' );
 139      $styles              = array();
 140  
 141      if ( ! $has_dim_background ) {
 142          return '';
 143      }
 144  
 145      // Apply border classes and styles.
 146      $border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
 147  
 148      if ( ! empty( $border_attributes['class'] ) ) {
 149          $class_names[] = $border_attributes['class'];
 150      }
 151  
 152      if ( ! empty( $border_attributes['style'] ) ) {
 153          $styles[] = $border_attributes['style'];
 154      }
 155  
 156      // Apply overlay and gradient classes.
 157      if ( $has_dim_background ) {
 158          $class_names[] = 'has-background-dim';
 159          $class_names[] = "has-background-dim-{$attributes['dimRatio']}";
 160      }
 161  
 162      if ( $has_solid_overlay ) {
 163          $class_names[] = "has-{$attributes['overlayColor']}-background-color";
 164      }
 165  
 166      if ( $has_gradient || $has_custom_gradient ) {
 167          $class_names[] = 'has-background-gradient';
 168      }
 169  
 170      if ( $has_gradient ) {
 171          $class_names[] = "has-{$attributes['gradient']}-gradient-background";
 172      }
 173  
 174      // Apply background styles.
 175      if ( $has_custom_gradient ) {
 176          $styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
 177      }
 178  
 179      if ( $has_custom_overlay ) {
 180          $styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
 181      }
 182  
 183      return sprintf(
 184          '<span class="%s" style="%s" aria-hidden="true"></span>',
 185          esc_attr( implode( ' ', $class_names ) ),
 186          esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
 187      );
 188  }
 189  
 190  /**
 191   * Generates class names and styles to apply the border support styles for
 192   * the Post Featured Image block.
 193   *
 194   * @param array $attributes The block attributes.
 195   * @return array The border-related classnames and styles for the block.
 196   */
 197  function get_block_core_post_featured_image_border_attributes( $attributes ) {
 198      $border_styles = array();
 199      $sides         = array( 'top', 'right', 'bottom', 'left' );
 200  
 201      // Border radius.
 202      if ( isset( $attributes['style']['border']['radius'] ) ) {
 203          $border_styles['radius'] = $attributes['style']['border']['radius'];
 204      }
 205  
 206      // Border style.
 207      if ( isset( $attributes['style']['border']['style'] ) ) {
 208          $border_styles['style'] = $attributes['style']['border']['style'];
 209      }
 210  
 211      // Border width.
 212      if ( isset( $attributes['style']['border']['width'] ) ) {
 213          $border_styles['width'] = $attributes['style']['border']['width'];
 214      }
 215  
 216      // Border color.
 217      $preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
 218      $custom_color           = $attributes['style']['border']['color'] ?? null;
 219      $border_styles['color'] = $preset_color ? $preset_color : $custom_color;
 220  
 221      // Individual border styles e.g. top, left etc.
 222      foreach ( $sides as $side ) {
 223          $border                 = $attributes['style']['border'][ $side ] ?? null;
 224          $border_styles[ $side ] = array(
 225              'color' => isset( $border['color'] ) ? $border['color'] : null,
 226              'style' => isset( $border['style'] ) ? $border['style'] : null,
 227              'width' => isset( $border['width'] ) ? $border['width'] : null,
 228          );
 229      }
 230  
 231      $styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
 232      $attributes = array();
 233      if ( ! empty( $styles['classnames'] ) ) {
 234          $attributes['class'] = $styles['classnames'];
 235      }
 236      if ( ! empty( $styles['css'] ) ) {
 237          $attributes['style'] = $styles['css'];
 238      }
 239      return $attributes;
 240  }
 241  
 242  /**
 243   * Registers the `core/post-featured-image` block on the server.
 244   */
 245  function register_block_core_post_featured_image() {
 246      register_block_type_from_metadata(
 247          __DIR__ . '/post-featured-image',
 248          array(
 249              'render_callback' => 'render_block_core_post_featured_image',
 250          )
 251      );
 252  }
 253  add_action( 'init', 'register_block_core_post_featured_image' );