Post featured image: Add title attribute

docs/reference-guides/core-blocks.md

@@ -630,7 +630,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
 -	**Name:** core/post-featured-image
 -	**Category:** theme
 -	**Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, title, width
 
 ## Post Navigation Link
 

packages/block-library/src/post-featured-image/block.json

@@ -51,6 +51,9 @@
 		},
 		"customGradient": {
 			"type": "string"
+		},
+		"title": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

packages/block-library/src/post-featured-image/edit.js

@@ -15,6 +15,7 @@ import {
 	Placeholder,
 	Button,
 	TextControl,
+	ExternalLink,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -64,7 +65,9 @@ export default function PostFeaturedImageEdit( {
 		sizeSlug,
 		rel,
 		linkTarget,
+		title,
 	} = attributes;
+
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -94,7 +97,6 @@ export default function PostFeaturedImageEdit( {
 	);
 
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
-
 	const imageSizes = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().imageSizes,
 		[]
@@ -143,6 +145,12 @@ export default function PostFeaturedImageEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	};
 
+	function onSetTitle( value ) {
+		// This is the HTML title attribute, separate from the media object
+		// title.
+		setAttributes( { title: value } );
+	}
+
 	const controls = (
 		<>
 			<DimensionControls
@@ -191,6 +199,25 @@ export default function PostFeaturedImageEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					label={ __( 'Title attribute' ) }
+					value={ title || '' }
+					onChange={ onSetTitle }
+					help={
+						<>
+							{ __(
+								'Describe the role of this image on the page.'
+							) }
+							<ExternalLink href="https://www.w3.org/TR/html52/dom.html#the-title-attribute">
+								{ __(
+									'(Note: many devices and browsers do not display this text.)'
+								) }
+							</ExternalLink>
+						</>
+					}
+				/>
+			</InspectorControls>
 		</>
 	);
 	let image;
@@ -287,6 +314,7 @@ export default function PostFeaturedImageEdit( {
 						: __( 'Featured image' )
 				}
 				style={ imageStyles }
+				title={ title }
 			/>
 		);
 	}

packages/block-library/src/post-featured-image/index.php

@@ -17,12 +17,12 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! isset( $block->context['postId'] ) ) {
 		return '';
 	}
-	$post_ID = $block->context['postId'];
-
-	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
-	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
+	$post_ID         = $block->context['postId'];
+	$is_link         = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug       = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$attr            = get_block_core_post_featured_image_border_attributes( $attributes );
+	$overlay_markup  = get_block_core_post_featured_image_overlay_element_markup( $attributes );
+	$title_attribute = isset( $attributes['title'] ) ? $attributes['title'] : '';
 
 	if ( $is_link ) {
 		if ( get_the_title( $post_ID ) ) {
@@ -53,6 +53,17 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
+	/*
+	 * If the image is linked and the target has a post title,
+	 * keep the post title as the link text in the alt attribute,
+	 * and do not output the title attribute.
+	 * This is because the post title describes the link target,
+	 * while the image title attribute describes the role of the image.
+	*/
+	if ( $title_attribute && ! ( $is_link && get_the_title( $post_ID ) ) ) {
+		$attr['title'] = trim( strip_tags( $title_attribute ) );
+	}
+
 	$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
 	if ( ! $featured_image ) {
 		return '';