post-featured-image.php 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  1. <?php
  2. /**
  3. * Server-side rendering of the `core/post-featured-image` block.
  4. *
  5. * @package WordPress
  6. */
  7. /**
  8. * Renders the `core/post-featured-image` block on the server.
  9. *
  10. * @param array $attributes Block attributes.
  11. * @param string $content Block default content.
  12. * @param WP_Block $block Block instance.
  13. * @return string Returns the featured image for the current post.
  14. */
  15. function render_block_core_post_featured_image( $attributes, $content, $block ) {
  16. if ( ! isset( $block->context['postId'] ) ) {
  17. return '';
  18. }
  19. $post_ID = $block->context['postId'];
  20. $is_link = isset( $attributes['isLink'] ) && $attributes['isLink'];
  21. $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
  22. $post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
  23. $attr = get_block_core_post_featured_image_border_attributes( $attributes );
  24. $overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
  25. if ( $is_link ) {
  26. $attr['alt'] = $post_title;
  27. }
  28. if ( ! empty( $attributes['height'] ) ) {
  29. $extra_styles = "height:{$attributes['height']};";
  30. if ( ! empty( $attributes['scale'] ) ) {
  31. $extra_styles .= "object-fit:{$attributes['scale']};";
  32. }
  33. $attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
  34. }
  35. $featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
  36. if ( ! $featured_image ) {
  37. return '';
  38. }
  39. if ( $is_link ) {
  40. $link_target = $attributes['linkTarget'];
  41. $rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
  42. $featured_image = sprintf(
  43. '<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
  44. get_the_permalink( $post_ID ),
  45. esc_attr( $link_target ),
  46. $rel,
  47. $featured_image,
  48. $overlay_markup
  49. );
  50. } else {
  51. $featured_image = $featured_image . $overlay_markup;
  52. }
  53. $wrapper_attributes = empty( $attributes['width'] )
  54. ? get_block_wrapper_attributes()
  55. : get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
  56. return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
  57. }
  58. /**
  59. * Generate markup for the HTML element that will be used for the overlay.
  60. *
  61. * @param array $attributes Block attributes.
  62. *
  63. * @return string HTML markup in string format.
  64. */
  65. function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
  66. $has_dim_background = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
  67. $has_gradient = isset( $attributes['gradient'] ) && $attributes['gradient'];
  68. $has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
  69. $has_solid_overlay = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
  70. $has_custom_overlay = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
  71. $class_names = array( 'wp-block-post-featured-image__overlay' );
  72. $styles = array();
  73. if ( ! $has_dim_background ) {
  74. return '';
  75. }
  76. // Apply border classes and styles.
  77. $border_attributes = get_block_core_post_featured_image_border_attributes( $attributes );
  78. if ( ! empty( $border_attributes['class'] ) ) {
  79. $class_names[] = $border_attributes['class'];
  80. }
  81. if ( ! empty( $border_attributes['style'] ) ) {
  82. $styles[] = $border_attributes['style'];
  83. }
  84. // Apply overlay and gradient classes.
  85. if ( $has_dim_background ) {
  86. $class_names[] = 'has-background-dim';
  87. $class_names[] = "has-background-dim-{$attributes['dimRatio']}";
  88. }
  89. if ( $has_solid_overlay ) {
  90. $class_names[] = "has-{$attributes['overlayColor']}-background-color";
  91. }
  92. if ( $has_gradient || $has_custom_gradient ) {
  93. $class_names[] = 'has-background-gradient';
  94. }
  95. if ( $has_gradient ) {
  96. $class_names[] = "has-{$attributes['gradient']}-gradient-background";
  97. }
  98. // Apply background styles.
  99. if ( $has_custom_gradient ) {
  100. $styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
  101. }
  102. if ( $has_custom_overlay ) {
  103. $styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
  104. }
  105. return sprintf(
  106. '<span class="%s" style="%s" aria-hidden="true"></span>',
  107. esc_attr( implode( ' ', $class_names ) ),
  108. esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
  109. );
  110. }
  111. /**
  112. * Generates class names and styles to apply the border support styles for
  113. * the Post Featured Image block.
  114. *
  115. * @param array $attributes The block attributes.
  116. * @return array The border-related classnames and styles for the block.
  117. */
  118. function get_block_core_post_featured_image_border_attributes( $attributes ) {
  119. $border_styles = array();
  120. $sides = array( 'top', 'right', 'bottom', 'left' );
  121. // Border radius.
  122. if ( isset( $attributes['style']['border']['radius'] ) ) {
  123. $border_styles['radius'] = $attributes['style']['border']['radius'];
  124. }
  125. // Border style.
  126. if ( isset( $attributes['style']['border']['style'] ) ) {
  127. $border_styles['style'] = $attributes['style']['border']['style'];
  128. }
  129. // Border width.
  130. if ( isset( $attributes['style']['border']['width'] ) ) {
  131. $border_styles['width'] = $attributes['style']['border']['width'];
  132. }
  133. // Border color.
  134. $preset_color = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
  135. $custom_color = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
  136. $border_styles['color'] = $preset_color ? $preset_color : $custom_color;
  137. // Individual border styles e.g. top, left etc.
  138. foreach ( $sides as $side ) {
  139. $border = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
  140. $border_styles[ $side ] = array(
  141. 'color' => isset( $border['color'] ) ? $border['color'] : null,
  142. 'style' => isset( $border['style'] ) ? $border['style'] : null,
  143. 'width' => isset( $border['width'] ) ? $border['width'] : null,
  144. );
  145. }
  146. $styles = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
  147. $attributes = array();
  148. if ( ! empty( $styles['classnames'] ) ) {
  149. $attributes['class'] = $styles['classnames'];
  150. }
  151. if ( ! empty( $styles['css'] ) ) {
  152. $attributes['style'] = $styles['css'];
  153. }
  154. return $attributes;
  155. }
  156. /**
  157. * Registers the `core/post-featured-image` block on the server.
  158. */
  159. function register_block_core_post_featured_image() {
  160. register_block_type_from_metadata(
  161. __DIR__ . '/post-featured-image',
  162. array(
  163. 'render_callback' => 'render_block_core_post_featured_image',
  164. )
  165. );
  166. }
  167. add_action( 'init', 'register_block_core_post_featured_image' );