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