Image editing: add original aspect to dropdown (#23659)

WordPress · Jul 3, 2020 · 9f2ca8b · 9f2ca8b
1 parent 55d7f85
commit 9f2ca8b
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/packages/block-library/src/image/image-editor.js b/packages/block-library/src/image/image-editor.js
@@ -14,6 +14,7 @@ import { useState } from '@wordpress/element';
 import {
 	Icon,
 	search,
+	check,
 	rotateRight as rotateRightIcon,
 	aspectRatio as aspectRatioIcon,
 } from '@wordpress/icons';
@@ -37,7 +38,7 @@ const POPOVER_PROPS = {
 	isAlternate: true,
 };
 
-function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
+function AspectGroup( { aspectRatios, isDisabled, label, onClick, value } ) {
 	return (
 		<MenuGroup label={ label }>
 			{ aspectRatios.map( ( { title, aspect } ) => (
@@ -47,6 +48,9 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
 					onClick={ () => {
 						onClick( aspect );
 					} }
+					role="menuitemradio"
+					isSelected={ aspect === value }
+					icon={ aspect === value ? check : undefined }
 				>
 					{ title }
 				</MenuItem>
@@ -55,7 +59,7 @@ function AspectGroup( { aspectRatios, isDisabled, label, onClick } ) {
 	);
 }
 
-function AspectMenu( { isDisabled, onClick } ) {
+function AspectMenu( { isDisabled, onClick, value, defaultValue } ) {
 	return (
 		<DropdownMenu
 			icon={ aspectRatioIcon }
@@ -65,13 +69,32 @@ function AspectMenu( { isDisabled, onClick } ) {
 		>
 			{ ( { onClose } ) => (
 				<>
+					<AspectGroup
+						isDisabled={ isDisabled }
+						onClick={ ( aspect ) => {
+							onClick( aspect );
+							onClose();
+						} }
+						value={ value }
+						aspectRatios={ [
+							{
+								title: __( 'Original' ),
+								aspect: defaultValue,
+							},
+							{
+								title: __( 'Square' ),
+								aspect: 1,
+							},
+						] }
+					/>
 					<AspectGroup
 						label={ __( 'Landscape' ) }
 						isDisabled={ isDisabled }
 						onClick={ ( aspect ) => {
 							onClick( aspect );
 							onClose();
 						} }
+						value={ value }
 						aspectRatios={ [
 							{
 								title: __( '16:10' ),
@@ -98,6 +121,7 @@ function AspectMenu( { isDisabled, onClick } ) {
 							onClick( aspect );
 							onClose();
 						} }
+						value={ value }
 						aspectRatios={ [
 							{
 								title: __( '10:16' ),
@@ -117,19 +141,6 @@ function AspectMenu( { isDisabled, onClick } ) {
 							},
 						] }
 					/>
-					<AspectGroup
-						isDisabled={ isDisabled }
-						onClick={ ( aspect ) => {
-							onClick( aspect );
-							onClose();
-						} }
-						aspectRatios={ [
-							{
-								title: __( 'Square' ),
-								aspect: 1,
-							},
-						] }
-					/>
 				</>
 			) }
 		</DropdownMenu>
@@ -286,6 +297,8 @@ export default function ImageEditor( {
 					<AspectMenu
 						isDisabled={ inProgress }
 						onClick={ setAspect }
+						value={ aspect }
+						defaultValue={ naturalWidth / naturalHeight }
 					/>
 				</div>
 			) }