diff -r 7b1b88e27a20 -r 48c4eec2b7e6 wp/wp-includes/blocks/post-featured-image.php --- a/wp/wp-includes/blocks/post-featured-image.php Thu Sep 29 08:06:27 2022 +0200 +++ b/wp/wp-includes/blocks/post-featured-image.php Fri Sep 05 18:40:08 2025 +0200 @@ -8,6 +8,8 @@ /** * Renders the `core/post-featured-image` block on the server. * + * @since 5.8.0 + * * @param array $attributes Block attributes. * @param string $content Block default content. * @param WP_Block $block Block instance. @@ -19,40 +21,241 @@ } $post_ID = $block->context['postId']; + $is_link = isset( $attributes['isLink'] ) && $attributes['isLink']; $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail'; - $post_title = trim( strip_tags( get_the_title( $post_ID ) ) ); - $featured_image = get_the_post_thumbnail( $post_ID, $size_slug, array( 'alt' => $post_title ) ); + $attr = get_block_core_post_featured_image_border_attributes( $attributes ); + $overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes ); + + if ( $is_link ) { + if ( get_the_title( $post_ID ) ) { + $attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) ); + } else { + $attr['alt'] = sprintf( + // translators: %d is the post ID. + __( 'Untitled post %d' ), + $post_ID + ); + } + } + + $extra_styles = ''; + + // Aspect ratio with a height set needs to override the default width/height. + if ( ! empty( $attributes['aspectRatio'] ) ) { + $extra_styles .= 'width:100%;height:100%;'; + } elseif ( ! empty( $attributes['height'] ) ) { + $extra_styles .= "height:{$attributes['height']};"; + } + + if ( ! empty( $attributes['scale'] ) ) { + $extra_styles .= "object-fit:{$attributes['scale']};"; + } + if ( ! empty( $attributes['style']['shadow'] ) ) { + $shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) ); + + if ( ! empty( $shadow_styles['css'] ) ) { + $extra_styles .= $shadow_styles['css']; + } + } + + if ( ! empty( $extra_styles ) ) { + $attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles; + } + + $featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr ); + + // Get the first image from the post. + if ( $attributes['useFirstImageFromPost'] && ! $featured_image ) { + $content_post = get_post( $post_ID ); + $content = $content_post->post_content; + $processor = new WP_HTML_Tag_Processor( $content ); + + /* + * Transfer the image tag from the post into a new text snippet. + * Because the HTML API doesn't currently expose a way to extract + * HTML substrings this is necessary as a workaround. Of note, this + * is different than directly extracting the IMG tag: + * - If there are duplicate attributes in the source there will only be one in the output. + * - If there are single-quoted or unquoted attributes they will be double-quoted in the output. + * - If there are named character references in the attribute values they may be replaced with their direct code points. E.g. `…` becomes `…`. + * In the future there will likely be a mechanism to copy snippets of HTML from + * one document into another, via the HTML Processor's `get_outer_html()` or + * equivalent. When that happens it would be appropriate to replace this custom + * code with that canonical code. + */ + if ( $processor->next_tag( 'img' ) ) { + $tag_html = new WP_HTML_Tag_Processor( '' ); + $tag_html->next_tag(); + foreach ( $processor->get_attribute_names_with_prefix( '' ) as $name ) { + $tag_html->set_attribute( $name, $processor->get_attribute( $name ) ); + } + $featured_image = $tag_html->get_updated_html(); + } + } + if ( ! $featured_image ) { return ''; } - $wrapper_attributes = get_block_wrapper_attributes(); - if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) { - $featured_image = sprintf( '%2s', get_the_permalink( $post_ID ), $featured_image ); + + if ( $is_link ) { + $link_target = $attributes['linkTarget']; + $rel = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : ''; + $height = ! empty( $attributes['height'] ) ? 'style="' . esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . '"' : ''; + $featured_image = sprintf( + '%5$s%6$s', + get_the_permalink( $post_ID ), + esc_attr( $link_target ), + $rel, + $height, + $featured_image, + $overlay_markup + ); + } else { + $featured_image = $featured_image . $overlay_markup; } - $has_width = ! empty( $attributes['width'] ); - $has_height = ! empty( $attributes['height'] ); - if ( ! $has_height && ! $has_width ) { - return "
$featured_image
"; + $aspect_ratio = ! empty( $attributes['aspectRatio'] ) + ? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';' + : ''; + $width = ! empty( $attributes['width'] ) + ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';' + : ''; + $height = ! empty( $attributes['height'] ) + ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';' + : ''; + if ( ! $height && ! $width && ! $aspect_ratio ) { + $wrapper_attributes = get_block_wrapper_attributes(); + } else { + $wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) ); + } + return "
{$featured_image}
"; +} + +/** + * Generate markup for the HTML element that will be used for the overlay. + * + * @since 6.1.0 + * + * @param array $attributes Block attributes. + * + * @return string HTML markup in string format. + */ +function get_block_core_post_featured_image_overlay_element_markup( $attributes ) { + $has_dim_background = isset( $attributes['dimRatio'] ) && $attributes['dimRatio']; + $has_gradient = isset( $attributes['gradient'] ) && $attributes['gradient']; + $has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient']; + $has_solid_overlay = isset( $attributes['overlayColor'] ) && $attributes['overlayColor']; + $has_custom_overlay = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor']; + $class_names = array( 'wp-block-post-featured-image__overlay' ); + $styles = array(); + + if ( ! $has_dim_background ) { + return ''; + } + + // Apply border classes and styles. + $border_attributes = get_block_core_post_featured_image_border_attributes( $attributes ); + + if ( ! empty( $border_attributes['class'] ) ) { + $class_names[] = $border_attributes['class']; + } + + if ( ! empty( $border_attributes['style'] ) ) { + $styles[] = $border_attributes['style']; + } + + // Apply overlay and gradient classes. + if ( $has_dim_background ) { + $class_names[] = 'has-background-dim'; + $class_names[] = "has-background-dim-{$attributes['dimRatio']}"; } - if ( $has_width ) { - $wrapper_attributes = get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) ); + if ( $has_solid_overlay ) { + $class_names[] = "has-{$attributes['overlayColor']}-background-color"; + } + + if ( $has_gradient || $has_custom_gradient ) { + $class_names[] = 'has-background-gradient'; + } + + if ( $has_gradient ) { + $class_names[] = "has-{$attributes['gradient']}-gradient-background"; + } + + // Apply background styles. + if ( $has_custom_gradient ) { + $styles[] = sprintf( 'background-image: %s;', $attributes['customGradient'] ); + } + + if ( $has_custom_overlay ) { + $styles[] = sprintf( 'background-color: %s;', $attributes['customOverlayColor'] ); } - if ( $has_height ) { - $image_styles = "height:{$attributes['height']};"; - if ( ! empty( $attributes['scale'] ) ) { - $image_styles .= "object-fit:{$attributes['scale']};"; - } - $featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image ); + return sprintf( + '', + esc_attr( implode( ' ', $class_names ) ), + esc_attr( safecss_filter_attr( implode( ' ', $styles ) ) ) + ); +} + +/** + * Generates class names and styles to apply the border support styles for + * the Post Featured Image block. + * + * @since 6.1.0 + * + * @param array $attributes The block attributes. + * @return array The border-related classnames and styles for the block. + */ +function get_block_core_post_featured_image_border_attributes( $attributes ) { + $border_styles = array(); + $sides = array( 'top', 'right', 'bottom', 'left' ); + + // Border radius. + if ( isset( $attributes['style']['border']['radius'] ) ) { + $border_styles['radius'] = $attributes['style']['border']['radius']; + } + + // Border style. + if ( isset( $attributes['style']['border']['style'] ) ) { + $border_styles['style'] = $attributes['style']['border']['style']; } - return "
$featured_image
"; + // Border width. + if ( isset( $attributes['style']['border']['width'] ) ) { + $border_styles['width'] = $attributes['style']['border']['width']; + } + + // Border color. + $preset_color = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null; + $custom_color = $attributes['style']['border']['color'] ?? null; + $border_styles['color'] = $preset_color ? $preset_color : $custom_color; + + // Individual border styles e.g. top, left etc. + foreach ( $sides as $side ) { + $border = $attributes['style']['border'][ $side ] ?? null; + $border_styles[ $side ] = array( + 'color' => isset( $border['color'] ) ? $border['color'] : null, + 'style' => isset( $border['style'] ) ? $border['style'] : null, + 'width' => isset( $border['width'] ) ? $border['width'] : null, + ); + } + + $styles = wp_style_engine_get_styles( array( 'border' => $border_styles ) ); + $attributes = array(); + if ( ! empty( $styles['classnames'] ) ) { + $attributes['class'] = $styles['classnames']; + } + if ( ! empty( $styles['css'] ) ) { + $attributes['style'] = $styles['css']; + } + return $attributes; } /** * Registers the `core/post-featured-image` block on the server. + * + * @since 5.8.0 */ function register_block_core_post_featured_image() { register_block_type_from_metadata(