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