From fb1e4c1325484cea4fb563abf47dd1f2a2ded568 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 4 Jan 2023 11:10:44 +0100 Subject: [PATCH 1/5] Try adding the title attribute --- docs/reference-guides/core-blocks.md | 2 +- .../src/post-featured-image/block.json | 7 +++++ .../src/post-featured-image/edit.js | 30 +++++++++++++++++-- .../src/post-featured-image/index.php | 5 ++++ 4 files changed, 41 insertions(+), 3 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 25fe5746a04122..8d8b6a921d1d85 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -555,7 +555,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:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width +- **Attributes:** 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 40f51cffa06e75..820b1b9769e316 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -48,6 +48,13 @@ }, "customGradient": { "type": "string" + }, + "title": { + "type": "string", + "source": "attribute", + "selector": "img", + "attribute": "title", + "__experimentalRole": "content" } }, "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 1cdc0d0fd32ebe..122b549a4d0883 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, @@ -50,7 +51,7 @@ function PostFeaturedImageDisplay( { context: { postId, postType: postTypeSlug, queryId }, } ) { const isDescendentOfQueryLoop = Number.isFinite( queryId ); - const { isLink, height, width, scale, sizeSlug, rel, linkTarget } = + const { isLink, height, width, scale, sizeSlug, rel, linkTarget, title } = attributes; const [ featuredImage, setFeaturedImage ] = useEntityProp( 'postType', @@ -74,7 +75,6 @@ function PostFeaturedImageDisplay( { [ featuredImage, postTypeSlug ] ); const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug ); - const imageSizes = useSelect( ( select ) => select( blockEditorStore ).getSettings().imageSizes, [] @@ -119,6 +119,12 @@ function PostFeaturedImageDisplay( { 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; @@ -232,6 +257,7 @@ function PostFeaturedImageDisplay( { : __( '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 dfb03c5a89065c..f727bc3e0560b9 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -29,6 +29,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) $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 = isset( $attributes['title'] ) && $attributes['title']; if ( $is_link ) { $attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) ); @@ -42,6 +43,10 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) $attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles; } + if ( $title ) { + $attr['title'] = trim( strip_tags( $title ) ); + } + $featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr ); if ( ! $featured_image ) { return ''; From 0b7f3b33d8164af112ceefb5b41c7710ffaa174f Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 4 Jan 2023 11:25:35 +0100 Subject: [PATCH 2/5] remove additional contexts from block.json --- packages/block-library/src/post-featured-image/block.json | 6 +----- packages/block-library/src/post-featured-image/index.php | 2 +- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json index 820b1b9769e316..2e1017fc784fe2 100644 --- a/packages/block-library/src/post-featured-image/block.json +++ b/packages/block-library/src/post-featured-image/block.json @@ -50,11 +50,7 @@ "type": "string" }, "title": { - "type": "string", - "source": "attribute", - "selector": "img", - "attribute": "title", - "__experimentalRole": "content" + "type": "string" } }, "usesContext": [ "postId", "postType", "queryId" ], diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index f727bc3e0560b9..6762c14fe7bf58 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -29,7 +29,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) $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 = isset( $attributes['title'] ) && $attributes['title']; + $title = isset( $attributes['title'] ) ? $attributes['title'] : ''; if ( $is_link ) { $attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) ); From 834c0cf026ea82d3bebf5fc6992063bcf7cfbbf6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Wed, 4 Jan 2023 12:02:04 +0100 Subject: [PATCH 3/5] Update index.php --- .../src/post-featured-image/index.php | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index 6762c14fe7bf58..e47ba78ee9216d 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -25,11 +25,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) the_post(); } - $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 = isset( $attributes['title'] ) ? $attributes['title'] : ''; + $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 ) { $attr['alt'] = trim( strip_tags( get_the_title( $post_ID ) ) ); @@ -43,8 +43,15 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) $attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles; } - if ( $title ) { - $attr['title'] = trim( strip_tags( $title ) ); + /* + * 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 ); From e3e7977fea12fe8d46eac6e6c3768d8b4845973c Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 24 Feb 2023 10:55:20 +0100 Subject: [PATCH 4/5] Update spacing in edit.js --- packages/block-library/src/post-featured-image/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js index bdde602aea2e5e..fbff14234ee813 100644 --- a/packages/block-library/src/post-featured-image/edit.js +++ b/packages/block-library/src/post-featured-image/edit.js @@ -60,7 +60,7 @@ export default function PostFeaturedImageEdit( { sizeSlug, rel, linkTarget, - title, + title, } = attributes; const [ featuredImage, setFeaturedImage ] = useEntityProp( From 68b7f0eabbf04fed4499e8891d349a3eb24344c6 Mon Sep 17 00:00:00 2001 From: Carolina Nymark Date: Fri, 13 Oct 2023 12:27:02 +0200 Subject: [PATCH 5/5] Fix PHP issue after merging updates from trunk. --- packages/block-library/src/post-featured-image/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php index beb1043dfd6593..f9a8a17934e542 100644 --- a/packages/block-library/src/post-featured-image/index.php +++ b/packages/block-library/src/post-featured-image/index.php @@ -17,7 +17,7 @@ function render_block_core_post_featured_image( $attributes, $content, $block ) if ( ! isset( $block->context['postId'] ) ) { return ''; } - $post_ID. = $block->context['postId']; + $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 );