diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json index bf363c7718f64..0eef67f6d8eb2 100644 --- 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 index 9e57a24591416..46ab5212b6ae3 100644 --- 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 } /> + + setAttributes( { + addLinkToFeaturedImage: value, + } ) + } + /> ) } @@ -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 && ( + { + ); const needsReadMore = excerptLength < @@ -424,17 +450,18 @@ class LatestPostsEdit extends Component { return (
  • - { displayFeaturedImage && ( + { renderFeaturedImage && (
    - { imageSourceUrl && ( - + { addLinkToFeaturedImage ? ( + + { featuredImage } + + ) : ( + featuredImage ) }
    ) } @@ -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 index 6aedf67c335db..8486b05b6bab3 100644 --- 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 .= '
  • '; @@ -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( + '%2$s', + $post_link, + $featured_image + ); + } $list_items_markup .= sprintf( '
    %2$s
    ', $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( '%2$s', - 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 index c818cd94def02..57e8522830ee8 100644 --- 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 index c2e863809699a..277eb6b63a38b 100644 --- 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 index 9bacfee38b723..9f9b5784eb74c 100644 --- 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": "" + } ]