[Block Library - Post Featured Image]: Add basic dimension controls

packages/block-library/src/post-featured-image/block.json

@@ -9,6 +9,16 @@
 		"isLink": {
 			"type": "boolean",
 			"default": false
+		},
+		"width": {
+			"type": "string"
+		},
+		"height": {
+			"type": "string"
+		},
+		"scale": {
+			"type": "string",
+			"default": "cover"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

packages/block-library/src/post-featured-image/dimension-controls.js

@@ -0,0 +1,117 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	PanelBody,
+	__experimentalUnitControl as UnitControl,
+	BaseControl,
+	Flex,
+	FlexItem,
+	__experimentalSegmentedControl as SegmentedControl,
+	__experimentalSegmentedControlOption as SegmentedControlOption,
+	__experimentalUseCustomUnits as useCustomUnits,
+} from '@wordpress/components';
+import { useSetting } from '@wordpress/block-editor';
+
+const SCALE_OPTIONS = (
+	<>
+		<SegmentedControlOption
+			value="cover"
+			label={ _x( 'Cover', 'Scale option for Image dimension control' ) }
+		/>
+		<SegmentedControlOption
+			value="contain"
+			label={ _x(
+				'Contain',
+				'Scale option for Image dimension control'
+			) }
+		/>
+		<SegmentedControlOption
+			value="fill"
+			label={ _x(
+				'Stretch',
+				'Scale option for Image dimension control'
+			) }
+		/>
+	</>
+);
+
+const DimensionControls = ( {
+	attributes: { width, height, scale },
+	setAttributes,
+} ) => {
+	const defaultUnits = [ 'px', '%', 'vw', 'em', 'rem' ];
+	const units = useCustomUnits( {
+		availableUnits: useSetting( 'spacing.units' ) || defaultUnits,
+	} );
+	const onDimensionChange = ( dimension, nextValue ) => {
+		const parsedValue = parseFloat( nextValue );
+		/**
+		 * If we have no value set and we change the unit,
+		 * we don't want to set the attribute, as it would
+		 * end up having the unit as value without any number.
+		 */
+		if ( isNaN( parsedValue ) && nextValue ) return;
+		setAttributes( {
+			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
+		} );
+	};
+	const scaleLabel = _x( 'Scale', 'Image scaling options' );
+	return (
+		<PanelBody title={ __( 'Dimensions' ) }>
+			<Flex justify="space-between">
+				<FlexItem>
+					<UnitControl
+						label={ __( 'Height' ) }
+						labelPosition="top"
+						value={ height || '' }
+						onChange={ ( nextHeight ) => {
+							onDimensionChange( 'height', nextHeight );
+						} }
+						units={ units }
+					/>
+				</FlexItem>
+				<FlexItem>
+					<UnitControl
+						label={ __( 'Width' ) }
+						labelPosition="top"
+						value={ width || '' }
+						onChange={ ( nextWidth ) => {
+							onDimensionChange( 'width', nextWidth );
+						} }
+						units={ units }
+					/>
+				</FlexItem>
+			</Flex>
+			{ !! height && (
+				<>
+					<BaseControl
+						aria-label={ scaleLabel }
+						className="block-library-post-featured-image-scale-controls"
+					>
+						<div>
+							<BaseControl.VisualLabel>
+								{ scaleLabel }
+							</BaseControl.VisualLabel>
+						</div>
+						<SegmentedControl
+							label={ scaleLabel }
+							value={ scale }
+							onChange={ ( value ) => {
+								setAttributes( {
+									scale: value,
+								} );
+							} }
+							isBlock
+						>
+							{ SCALE_OPTIONS }
+						</SegmentedControl>
+					</BaseControl>
+				</>
+			) }
+		</PanelBody>
+	);
+};
+
+export default DimensionControls;

packages/block-library/src/post-featured-image/edit.js

@@ -20,6 +20,11 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { postFeaturedImage } from '@wordpress/icons';
 
+/**
+ * Internal dependencies
+ */
+import DimensionControls from './dimension-controls';
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
 	<div className="post-featured-image_placeholder">
@@ -29,13 +34,14 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
-	attributes: { isLink },
+	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
 	noticeUI,
 	noticeOperations,
 } ) {
 	const isDescendentOfQueryLoop = !! queryId;
+	const { isLink, height, width, scale } = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postType,
@@ -47,7 +53,9 @@ function PostFeaturedImageDisplay( {
 			featuredImage && select( coreStore ).getMedia( featuredImage ),
 		[ featuredImage ]
 	);
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		style: { width },
+	} );
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
@@ -86,13 +94,18 @@ function PostFeaturedImageDisplay( {
 			<img
 				src={ media.source_url }
 				alt={ media.alt_text || __( 'Featured image' ) }
+				style={ { height, objectFit: height && scale } }
 			/>
 		);
 	}
 
 	return (
 		<>
 			<InspectorControls>
+				<DimensionControls
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ sprintf(

packages/block-library/src/post-featured-image/editor.scss

@@ -25,3 +25,15 @@ div[data-type="core/post-featured-image"] {
 		}
 	}
 }
+
+// TODO this is temp styles.
+.block-library-post-featured-image-scale-controls {
+	margin-top: $grid-unit-20;
+	.components-flex {
+		border: $border-width solid $gray-700;
+	}
+	button {
+		width: 100%;
+		display: block;
+	}
+}

packages/block-library/src/post-featured-image/index.php

@@ -23,14 +23,30 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( ! $featured_image ) {
 		return '';
 	}
-
+	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
 		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
 	}
 
-	$wrapper_attributes = get_block_wrapper_attributes();
+	$has_width  = ! empty( $attributes['width'] );
+	$has_height = ! empty( $attributes['height'] );
+	if ( ! $has_height && ! $has_width ) {
+		return "<figure $wrapper_attributes>$featured_image</figure>";
+	}
+
+	if ( $has_width ) {
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => "width:{$attributes['width']};" ) );
+	}
+
+	if ( $has_height ) {
+		$image_styles = "height:{$attributes['height']};";
+		if ( ! empty( $attributes['scale'] ) ) {
+			$image_styles .= "object-fit:{$attributes['scale']};";
+		}
+		$featured_image = str_replace( 'src=', "style='$image_styles' src=", $featured_image );
+	}
 
-	return '<figure ' . $wrapper_attributes . '>' . $featured_image . '</figure>';
+	return "<figure $wrapper_attributes>$featured_image</figure>";
 }
 
 /**

packages/block-library/src/post-featured-image/style.scss

@@ -6,6 +6,7 @@
 	}
 	img {
 		max-width: 100%;
+		width: 100%;
 		height: auto;
 	}
 

test/integration/fixtures/blocks/core__post-featured-image.json

@@ -4,7 +4,8 @@
 		"name": "core/post-featured-image",
 		"isValid": true,
 		"attributes": {
-			"isLink": false
+			"isLink": false,
+			"scale": "cover"
 		},
 		"innerBlocks": [],
 		"originalContent": ""