post-featured-image.php in Gutenberg 23.2.0, at build/scripts/block-library/post-featured-image.php

268 lines 9.1 KB Raw Download Zip

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 gutenberg_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 = gutenberg_get_block_core_post_featured_image_border_attributes( $attributes );
27	$overlay_markup = gutenberg_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 = gutenberg_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	*/
144	function gutenberg_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 = gutenberg_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	$class_names[] = 'has-background-dim';
170	$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
171
172	if ( $has_solid_overlay ) {
173	$class_names[] = "has-{$attributes['overlayColor']}-background-color";
174	}
175
176	if ( $has_gradient \|\| $has_custom_gradient ) {
177	$class_names[] = 'has-background-gradient';
178	}
179
180	if ( $has_gradient ) {
181	$class_names[] = "has-{$attributes['gradient']}-gradient-background";
182	}
183
184	// Apply background styles.
185	if ( $has_custom_gradient ) {
186	$styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] );
187	}
188
189	if ( $has_custom_overlay ) {
190	$styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] );
191	}
192
193	return sprintf(
194	'<span class="%s" style="%s" aria-hidden="true"></span>',
195	esc_attr( implode( ' ', $class_names ) ),
196	esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) )
197	);
198	}
199
200	/**
201	* Generates class names and styles to apply the border support styles for
202	* the Post Featured Image block.
203	*
204	* @since 6.1.0
205	*
206	* @param array $attributes The block attributes.
207	* @return array The border-related classnames and styles for the block.
208	*/
209	function gutenberg_get_block_core_post_featured_image_border_attributes( $attributes ) {
210	$border_styles = array();
211	$sides = array( 'top', 'right', 'bottom', 'left' );
212
213	// Border radius.
214	if ( isset( $attributes['style']['border']['radius'] ) ) {
215	$border_styles['radius'] = $attributes['style']['border']['radius'];
216	}
217
218	// Border style.
219	if ( isset( $attributes['style']['border']['style'] ) ) {
220	$border_styles['style'] = $attributes['style']['border']['style'];
221	}
222
223	// Border width.
224	if ( isset( $attributes['style']['border']['width'] ) ) {
225	$border_styles['width'] = $attributes['style']['border']['width'];
226	}
227
228	// Border color.
229	$preset_color = array_key_exists( 'borderColor', $attributes ) ? "var:preset\|color\|{$attributes['borderColor']}" : null;
230	$custom_color = $attributes['style']['border']['color'] ?? null;
231	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
232
233	// Individual border styles e.g. top, left etc.
234	foreach ( $sides as $side ) {
235	$border = $attributes['style']['border'][ $side ] ?? null;
236	$border_styles[ $side ] = array(
237	'color' => $border['color'] ?? null,
238	'style' => $border['style'] ?? null,
239	'width' => $border['width'] ?? null,
240	);
241	}
242
243	$styles = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
244	$attributes = array();
245	if ( ! empty( $styles['classnames'] ) ) {
246	$attributes['class'] = $styles['classnames'];
247	}
248	if ( ! empty( $styles['css'] ) ) {
249	$attributes['style'] = $styles['css'];
250	}
251	return $attributes;
252	}
253
254	/**
255	* Registers the `core/post-featured-image` block on the server.
256	*
257	* @since 5.8.0
258	*/
259	function gutenberg_register_block_core_post_featured_image() {
260	register_block_type_from_metadata(
261	__DIR__ . '/post-featured-image',
262	array(
263	'render_callback' => 'gutenberg_render_block_core_post_featured_image',
264	)
265	);
266	}
267	add_action( 'init', 'gutenberg_register_block_core_post_featured_image', 20 );
268