Add option for adding link in featured image [ Latest Posts block ] (#…

…24548) * add option for adding link in featured image * rename variable * fix php lint errors * change spaces to tabs * add alt text in featured image (editor)
WordPress · Aug 18, 2020 · ba2d60a · ba2d60a
1 parent 10e25f6
commit ba2d60a
Show file tree

Hide file tree

Showing 6 changed files with 132 additions and 83 deletions.
diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json
@@ -74,6 +74,10 @@
 		"featuredImageSizeHeight": {
 			"type": "number",
 			"default": null
+		},
+		"addLinkToFeaturedImage": {
+			"type": "boolean",
+			"default": false
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
@@ -122,6 +122,7 @@ class LatestPostsEdit extends Component {
 			featuredImageSizeSlug,
 			featuredImageSizeWidth,
 			featuredImageSizeHeight,
+			addLinkToFeaturedImage,
 		} = attributes;
 		const categorySuggestions = categoriesList.reduce(
 			( accumulator, category ) => ( {
@@ -264,6 +265,15 @@ class LatestPostsEdit extends Component {
 									isCollapsed={ false }
 								/>
 							</BaseControl>
+							<ToggleControl
+								label={ __( 'Add link to featured image' ) }
+								checked={ addLinkToFeaturedImage }
+								onChange={ ( value ) =>
+									setAttributes( {
+										addLinkToFeaturedImage: value,
+									} )
+								}
+							/>
 						</>
 					) }
 				</PanelBody>
@@ -390,12 +400,28 @@ class LatestPostsEdit extends Component {
 							excerptElement.innerText ||
 							'';
 
-						const imageSourceUrl = post.featuredImageSourceUrl;
-
+						const {
+							featuredImageInfo: {
+								url: imageSourceUrl,
+								alt: featuredImageAlt,
+							} = {},
+						} = post;
 						const imageClasses = classnames( {
 							'wp-block-latest-posts__featured-image': true,
 							[ `align${ featuredImageAlign }` ]: !! featuredImageAlign,
 						} );
+						const renderFeaturedImage =
+							displayFeaturedImage && imageSourceUrl;
+						const featuredImage = renderFeaturedImage && (
+							<img
+								src={ imageSourceUrl }
+								alt={ featuredImageAlt }
+								style={ {
+									maxWidth: featuredImageSizeWidth,
+									maxHeight: featuredImageSizeHeight,
+								} }
+							/>
+						);
 
 						const needsReadMore =
 							excerptLength <
@@ -424,17 +450,18 @@ class LatestPostsEdit extends Component {
 
 						return (
 							<li key={ i }>
-								{ displayFeaturedImage && (
+								{ renderFeaturedImage && (
 									<div className={ imageClasses }>
-										{ imageSourceUrl && (
-											<img
-												src={ imageSourceUrl }
-												alt=""
-												style={ {
-													maxWidth: featuredImageSizeWidth,
-													maxHeight: featuredImageSizeHeight,
-												} }
-											/>
+										{ addLinkToFeaturedImage ? (
+											<a
+												href={ post.link }
+												target="_blank"
+												rel="noreferrer noopener"
+											>
+												{ featuredImage }
+											</a>
+										) : (
+											featuredImage
 										) }
 									</div>
 								) }
@@ -542,24 +569,28 @@ export default withSelect( ( select, props ) => {
 		latestPosts: ! Array.isArray( posts )
 			? posts
 			: posts.map( ( post ) => {
-					if ( post.featured_media ) {
-						const image = getMedia( post.featured_media );
-						let url = get(
-							image,
-							[
-								'media_details',
-								'sizes',
-								featuredImageSizeSlug,
-								'source_url',
-							],
-							null
-						);
-						if ( ! url ) {
-							url = get( image, 'source_url', null );
-						}
-						return { ...post, featuredImageSourceUrl: url };
+					if ( ! post.featured_media ) return post;
+
+					const image = getMedia( post.featured_media );
+					let url = get(
+						image,
+						[
+							'media_details',
+							'sizes',
+							featuredImageSizeSlug,
+							'source_url',
+						],
+						null
+					);
+					if ( ! url ) {
+						url = get( image, 'source_url', null );
 					}
-					return post;
+					const featuredImageInfo = {
+						url,
+						// eslint-disable-next-line camelcase
+						alt: image?.alt_text,
+					};
+					return { ...post, featuredImageInfo };
 			  } ),
 	};
 } )( LatestPostsEdit );
diff --git a/packages/block-library/src/latest-posts/index.php b/packages/block-library/src/latest-posts/index.php
@@ -58,6 +58,7 @@ function render_block_core_latest_posts( $attributes ) {
 	$list_items_markup = '';
 
 	foreach ( $recent_posts as $post ) {
+		$post_link = esc_url( get_permalink( $post ) );
 
 		$list_items_markup .= '<li>';
 
@@ -75,16 +76,24 @@ function render_block_core_latest_posts( $attributes ) {
 				$image_classes .= ' align' . $attributes['featuredImageAlign'];
 			}
 
+			$featured_image = get_the_post_thumbnail(
+				$post,
+				$attributes['featuredImageSizeSlug'],
+				array(
+					'style' => $image_style,
+				)
+			);
+			if ( $attributes['addLinkToFeaturedImage'] ) {
+				$featured_image = sprintf(
+					'<a href="%1$s">%2$s</a>',
+					$post_link,
+					$featured_image
+				);
+			}
 			$list_items_markup .= sprintf(
 				'<div class="%1$s">%2$s</div>',
 				$image_classes,
-				get_the_post_thumbnail(
-					$post,
-					$attributes['featuredImageSizeSlug'],
-					array(
-						'style' => $image_style,
-					)
-				)
+				$featured_image
 			);
 		}
 
@@ -94,7 +103,7 @@ function render_block_core_latest_posts( $attributes ) {
 		}
 		$list_items_markup .= sprintf(
 			'<a href="%1$s">%2$s</a>',
-			esc_url( get_permalink( $post ) ),
+			$post_link,
 			$title
 		);
 

diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
@@ -47,6 +47,9 @@
 }
 
 .wp-block-latest-posts__featured-image {
+	a {
+		display: inline-block;
+	}
 	img {
 		height: auto;
 		width: auto;

diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts.json b/packages/e2e-tests/fixtures/blocks/core__latest-posts.json
@@ -1,25 +1,26 @@
 [
-    {
-        "clientId": "_clientId_0",
-        "name": "core/latest-posts",
-        "isValid": true,
-        "attributes": {
-            "postsToShow": 5,
-            "displayPostContent": false,
-            "displayPostContentRadio": "excerpt",
-            "excerptLength": 55,
-            "displayAuthor": false,
-            "displayPostDate": false,
-            "postLayout": "list",
-            "columns": 3,
-            "order": "desc",
-            "orderBy": "date",
-            "displayFeaturedImage": false,
-            "featuredImageSizeSlug": "thumbnail",
-            "featuredImageSizeWidth": null,
-            "featuredImageSizeHeight": null
-        },
-        "innerBlocks": [],
-        "originalContent": ""
-    }
+	{
+		"clientId": "_clientId_0",
+		"name": "core/latest-posts",
+		"isValid": true,
+		"attributes": {
+			"postsToShow": 5,
+			"displayPostContent": false,
+			"displayPostContentRadio": "excerpt",
+			"excerptLength": 55,
+			"displayAuthor": false,
+			"displayPostDate": false,
+			"postLayout": "list",
+			"columns": 3,
+			"order": "desc",
+			"orderBy": "date",
+			"displayFeaturedImage": false,
+			"featuredImageSizeSlug": "thumbnail",
+			"featuredImageSizeWidth": null,
+			"featuredImageSizeHeight": null,
+			"addLinkToFeaturedImage": false
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
 ]
diff --git a/packages/e2e-tests/fixtures/blocks/core__latest-posts__displayPostDate.json b/packages/e2e-tests/fixtures/blocks/core__latest-posts__displayPostDate.json
@@ -1,25 +1,26 @@
 [
-    {
-        "clientId": "_clientId_0",
-        "name": "core/latest-posts",
-        "isValid": true,
-        "attributes": {
-            "postsToShow": 5,
-            "displayPostContent": false,
-            "displayPostContentRadio": "excerpt",
-            "excerptLength": 55,
-            "displayAuthor": false,
-            "displayPostDate": true,
-            "postLayout": "list",
-            "columns": 3,
-            "order": "desc",
-            "orderBy": "date",
-            "displayFeaturedImage": false,
-            "featuredImageSizeSlug": "thumbnail",
-            "featuredImageSizeWidth": null,
-            "featuredImageSizeHeight": null
-        },
-        "innerBlocks": [],
-        "originalContent": ""
-    }
+	{
+		"clientId": "_clientId_0",
+		"name": "core/latest-posts",
+		"isValid": true,
+		"attributes": {
+			"postsToShow": 5,
+			"displayPostContent": false,
+			"displayPostContentRadio": "excerpt",
+			"excerptLength": 55,
+			"displayAuthor": false,
+			"displayPostDate": true,
+			"postLayout": "list",
+			"columns": 3,
+			"order": "desc",
+			"orderBy": "date",
+			"displayFeaturedImage": false,
+			"featuredImageSizeSlug": "thumbnail",
+			"featuredImageSizeWidth": null,
+			"featuredImageSizeHeight": null,
+			"addLinkToFeaturedImage": false
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
 ]