Add aspect-ratio to post featured image block (#47854)

WordPress · Feb 10, 2023 · 156edf7 · 156edf7 · github-actions · Feb 10, 2023
1 parent bbf1e85
commit 156edf7
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 18 deletions.
diff --git 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), anchor, color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
--	**Attributes:** customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
+-	**Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, width
 
 ## Post Navigation Link
 

diff --git a/lib/compat/wordpress-6.2/blocks.php b/lib/compat/wordpress-6.2/blocks.php
@@ -21,6 +21,7 @@ function gutenberg_safe_style_attrs_6_2( $attrs ) {
 	$attrs[] = 'left';
 	$attrs[] = 'z-index';
 	$attrs[] = 'box-shadow';
+	$attrs[] = 'aspect-ratio';
 
 	return $attrs;
 }

diff --git a/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js b/packages/block-editor/src/components/image-editor/aspect-ratio-dropdown.js
@@ -54,6 +54,7 @@ export default function AspectRatioDropdown( { toggleProps } ) {
 						} }
 						value={ aspect }
 						aspectRatios={ [
+							// All ratios should be mirrored in PostFeaturedImage in @wordpress/block-library
 							{
 								title: __( 'Original' ),
 								aspect: defaultAspect,

diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
@@ -11,6 +11,9 @@
 			"type": "boolean",
 			"default": false
 		},
+		"aspectRatio": {
+			"type": "string"
+		},
 		"width": {
 			"type": "string"
 		},

diff --git a/packages/block-library/src/post-featured-image/dimension-controls.js b/packages/block-library/src/post-featured-image/dimension-controls.js
@@ -49,7 +49,7 @@ const scaleHelp = {
 
 const DimensionControls = ( {
 	clientId,
-	attributes: { width, height, scale, sizeSlug },
+	attributes: { aspectRatio, width, height, scale, sizeSlug },
 	setAttributes,
 	imageSizeOptions = [],
 } ) => {
@@ -72,6 +72,68 @@ const DimensionControls = ( {
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
 		<InspectorControls group="dimensions">
+			<ToolsPanelItem
+				hasValue={ () => !! aspectRatio }
+				label={ __( 'Aspect ratio' ) }
+				onDeselect={ () => setAttributes( { aspectRatio: undefined } ) }
+				resetAllFilter={ () => ( {
+					aspectRatio: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<SelectControl
+					__nextHasNoMarginBottom
+					label={ __( 'Aspect ratio' ) }
+					value={ aspectRatio }
+					options={ [
+						// These should use the same values as AspectRatioDropdown in @wordpress/block-editor
+						{
+							label: __( 'Original' ),
+							value: 'auto',
+						},
+						{
+							label: __( 'Square' ),
+							value: '1',
+						},
+						{
+							label: __( '16:10' ),
+							value: '16/10',
+						},
+						{
+							label: __( '16:9' ),
+							value: '16/9',
+						},
+						{
+							label: __( '4:3' ),
+							value: '4/3',
+						},
+						{
+							label: __( '3:2' ),
+							value: '3/2',
+						},
+						{
+							label: __( '10:16' ),
+							value: '10/16',
+						},
+						{
+							label: __( '9:16' ),
+							value: '9/16',
+						},
+						{
+							label: __( '3:4' ),
+							value: '3/4',
+						},
+						{
+							label: __( '2:3' ),
+							value: '2/3',
+						},
+					] }
+					onChange={ ( nextAspectRatio ) =>
+						setAttributes( { aspectRatio: nextAspectRatio } )
+					}
+				/>
+			</ToolsPanelItem>
 			<ToolsPanelItem
 				className="single-column"
 				hasValue={ () => !! height }
@@ -116,7 +178,7 @@ const DimensionControls = ( {
 					units={ units }
 				/>
 			</ToolsPanelItem>
-			{ !! height && (
+			{ ( height || aspectRatio ) && (
 				<ToolsPanelItem
 					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }

diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
@@ -50,8 +50,16 @@ export default function PostFeaturedImageEdit( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
-		attributes;
+	const {
+		isLink,
+		aspectRatio,
+		height,
+		width,
+		scale,
+		sizeSlug,
+		rel,
+		linkTarget,
+	} = attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -89,7 +97,7 @@ export default function PostFeaturedImageEdit( {
 		} ) );
 
 	const blockProps = useBlockProps( {
-		style: { width, height },
+		style: { width, height, aspectRatio },
 	} );
 	const borderProps = useBorderProps( attributes );
 
@@ -101,7 +109,10 @@ export default function PostFeaturedImageEdit( {
 					borderProps.className
 				) }
 				withIllustration={ true }
-				style={ borderProps.style }
+				style={ {
+					...blockProps.style,
+					...borderProps.style,
+				} }
 			>
 				{ content }
 			</Placeholder>
@@ -218,8 +229,9 @@ export default function PostFeaturedImageEdit( {
 	const label = __( 'Add a featured image' );
 	const imageStyles = {
 		...borderProps.style,
-		height,
-		objectFit: height && scale,
+		height: ( !! aspectRatio && '100%' ) || height,
+		width: !! aspectRatio && '100%',
+		objectFit: !! ( height || aspectRatio ) && scale,
 	};
 
 	/**

diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
@@ -42,11 +42,20 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		}
 	}
 
-	if ( ! empty( $attributes['height'] ) ) {
-		$extra_styles = "height:{$attributes['height']};";
-		if ( ! empty( $attributes['scale'] ) ) {
-			$extra_styles .= "object-fit:{$attributes['scale']};";
-		}
+	$extra_styles = '';
+
+	// Aspect ratio with a height set needs to override the default width/height.
+	if ( ! empty( $attributes['aspectRatio'] ) ) {
+		$extra_styles .= 'width:100%;height:100%;';
+	} elseif ( ! empty( $attributes['height'] ) ) {
+		$extra_styles .= "height:{$attributes['height']};";
+	}
+
+	if ( ! empty( $attributes['scale'] ) ) {
+		$extra_styles .= "object-fit:{$attributes['scale']};";
+	}
+
+	if ( ! empty( $extra_styles ) ) {
 		$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
 	}
 
@@ -71,12 +80,19 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = $featured_image . $overlay_markup;
 	}
 
-	$width  = ! empty( $attributes['width'] ) ? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';' : '';
-	$height = ! empty( $attributes['height'] ) ? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';' : '';
-	if ( ! $height && ! $width ) {
+	$aspect_ratio = ! empty( $attributes['aspectRatio'] )
+		? esc_attr( safecss_filter_attr( 'aspect-ratio:' . $attributes['aspectRatio'] ) ) . ';'
+		: '';
+	$width        = ! empty( $attributes['width'] )
+		? esc_attr( safecss_filter_attr( 'width:' . $attributes['width'] ) ) . ';'
+		: '';
+	$height       = ! empty( $attributes['height'] )
+		? esc_attr( safecss_filter_attr( 'height:' . $attributes['height'] ) ) . ';'
+		: '';
+	if ( ! $height && ! $width && ! $aspect_ratio ) {
 		$wrapper_attributes = get_block_wrapper_attributes();
 	} else {
-		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $width . $height ) );
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'style' => $aspect_ratio . $width . $height ) );
 	}
 	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 }