diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 7909e928911943..0c230ab7b2a868 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -528,7 +528,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:** height, isLink, scale, width
+- **Attributes:** height, isLink, scale, sizeSlug, 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 251185bd9851b8..982ba9ac68e8b1 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -20,6 +20,9 @@
"scale": {
"type": "string",
"default": "cover"
+ },
+ "sizeSlug": {
+ "type": "string"
}
},
"usesContext": [ "postId", "postType", "queryId" ],
diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
index 424001efb50db3..9d0b11a6318d26 100644
--- a/packages/block-library/src/post-featured-image/dimension-controls.js
+++ b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -3,6 +3,7 @@
*/
import { __, _x } from '@wordpress/i18n';
import {
+ SelectControl,
__experimentalUnitControl as UnitControl,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -32,6 +33,7 @@ const SCALE_OPTIONS = (
);
const DEFAULT_SCALE = 'cover';
+const DEFAULT_SIZE = 'full';
const scaleHelp = {
cover: __(
@@ -47,8 +49,9 @@ const scaleHelp = {
const DimensionControls = ( {
clientId,
- attributes: { width, height, scale },
+ attributes: { width, height, scale, sizeSlug },
setAttributes,
+ imageSizeOptions = [],
} ) => {
const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];
const units = useCustomUnits( {
@@ -143,6 +146,30 @@ const DimensionControls = ( {
) }
+ { !! imageSizeOptions.length && (
+ !! sizeSlug }
+ label={ __( 'Image size' ) }
+ onDeselect={ () =>
+ setAttributes( { sizeSlug: undefined } )
+ }
+ resetAllFilter={ () => ( {
+ sizeSlug: undefined,
+ } ) }
+ isShownByDefault={ false }
+ panelId={ clientId }
+ >
+
+ setAttributes( { sizeSlug: nextSizeSlug } )
+ }
+ help={ __( 'Select the size of the source image.' ) }
+ />
+
+ ) }
);
};
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index ed84d7b95a1804..bd8fc61d2a7c4e 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -16,6 +16,7 @@ import {
MediaPlaceholder,
MediaReplaceFlow,
useBlockProps,
+ store as blockEditorStore,
} from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { upload } from '@wordpress/icons';
@@ -46,6 +47,12 @@ const placeholderChip = (
);
+function getMediaSourceUrlBySizeSlug( media, slug ) {
+ return (
+ media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
+ );
+}
+
function PostFeaturedImageDisplay( {
clientId,
attributes,
@@ -53,7 +60,7 @@ function PostFeaturedImageDisplay( {
context: { postId, postType, queryId },
} ) {
const isDescendentOfQueryLoop = Number.isFinite( queryId );
- const { isLink, height, width, scale } = attributes;
+ const { isLink, height, width, scale, sizeSlug } = attributes;
const [ featuredImage, setFeaturedImage ] = useEntityProp(
'postType',
postType,
@@ -67,6 +74,20 @@ function PostFeaturedImageDisplay( {
select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
[ featuredImage ]
);
+ const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
+
+ const imageSizes = useSelect(
+ ( select ) => select( blockEditorStore ).getSettings().imageSizes,
+ []
+ );
+ const imageSizeOptions = imageSizes
+ .filter( ( { slug } ) => {
+ return media?.media_details?.sizes?.[ slug ]?.source_url;
+ } )
+ .map( ( { name, slug } ) => ( {
+ value: slug,
+ label: name,
+ } ) );
const blockProps = useBlockProps( {
style: { width, height },
@@ -98,6 +119,7 @@ function PostFeaturedImageDisplay( {
clientId={ clientId }
attributes={ attributes }
setAttributes={ setAttributes }
+ imageSizeOptions={ imageSizeOptions }
/>
@@ -156,7 +178,7 @@ function PostFeaturedImageDisplay( {
placeholderChip
) : (
@@ -170,7 +192,7 @@ function PostFeaturedImageDisplay( {
context['postId'];
- $featured_image = get_the_post_thumbnail( $post_ID );
+ $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+ $featured_image = get_the_post_thumbnail( $post_ID, $size_slug );
if ( ! $featured_image ) {
return '';
}