diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 9f25ad0a594b89..5cfea305e6c384 100644 --- a/docs/reference-guides/core-blocks.md +++ b/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 diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 34e3bd6b2325fa..bf49bd3a650019 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -51,6 +51,9 @@ }, "customGradient": { "type": "string" + }, + "title": { + "type": "string" } }, "usesContext": [ "postId", "postType", "queryId" ], diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index 843f1cf66cdfcd..dec813180935cf 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/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 = ( <> + + + { __( + 'Describe the role of this image on the page.' + ) } + + { __( + '(Note: many devices and browsers do not display this text.)' + ) } + + + } + /> + ); let image; @@ -287,6 +314,7 @@ export default function PostFeaturedImageEdit( { : __( 'Featured image' ) } style={ imageStyles } + title={ title } /> ); } diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 4a7aa2f3d8ab94..f9a8a17934e542 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/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 '';