Image: Update Rich Image Icons (#22819)

* Replace rich-image icons with new ones * Remove inner scope crop variable * Remove unused icon file
WordPress · Jun 8, 2020 · 2f3ea7b · 2f3ea7b
1 parent 8c14843
commit 2f3ea7b
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 105 deletions.
diff --git a/packages/block-library/src/rich-image/rich-image/icon.js b/packages/block-library/src/rich-image/rich-image/icon.js
diff --git a/packages/block-library/src/rich-image/rich-image/index.js b/packages/block-library/src/rich-image/rich-image/index.js
@@ -14,6 +14,14 @@ import {
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
 import { Fragment, Component } from '@wordpress/element';
+import {
+	rotateLeft,
+	rotateRight,
+	flipHorizontal,
+	flipVertical,
+	crop,
+	aspectRatio,
+} from '@wordpress/icons';
 import {
 	ToolbarGroup,
 	ToolbarButton,
@@ -31,14 +39,6 @@ import { compose } from '@wordpress/compose';
  * Internal dependencies
  */
 import richImageRequest from './api';
-import {
-	RotateLeftIcon,
-	RotateRightIcon,
-	FlipHorizontalIcon,
-	FlipVerticalIcon,
-	CropIcon,
-	AspectIcon,
-} from './icon';
 
 const ROTATE_STEP = 90;
 const DEFAULT_CROP = {
@@ -102,13 +102,11 @@ class RichImage extends Component {
 	}
 
 	cropImage() {
-		const { crop } = this.state;
-
 		this.adjustImage( 'crop', {
-			cropX: crop.x,
-			cropY: crop.y,
-			cropWidth: crop.width,
-			cropHeight: crop.height,
+			cropX: this.state.crop.x,
+			cropY: this.state.crop.y,
+			cropWidth: this.state.crop.width,
+			cropHeight: this.state.crop.height,
 		} );
 	}
 
@@ -214,13 +212,13 @@ class RichImage extends Component {
 							<ToolbarItem>
 								{ ( toggleProps ) => (
 									<DropdownMenu
-										icon={ <RotateLeftIcon /> }
+										icon={ rotateLeft }
 										label={ __( 'Rotate' ) }
 										popoverProps={ POPOVER_PROPS }
 										toggleProps={ toggleProps }
 										controls={ [
 											{
-												icon: <RotateLeftIcon />,
+												icon: rotateLeft,
 												title: __( 'Rotate left' ),
 												isDisabled: inProgress,
 												onClick: () =>
@@ -232,7 +230,7 @@ class RichImage extends Component {
 													),
 											},
 											{
-												icon: <RotateRightIcon />,
+												icon: rotateRight,
 												title: __( 'Rotate right' ),
 												isDisabled: inProgress,
 												onClick: () =>
@@ -250,13 +248,13 @@ class RichImage extends Component {
 							<ToolbarItem>
 								{ ( toggleProps ) => (
 									<DropdownMenu
-										icon={ <FlipVerticalIcon /> }
+										icon={ flipVertical }
 										label={ __( 'Flip' ) }
 										popoverProps={ POPOVER_PROPS }
 										toggleProps={ toggleProps }
 										controls={ [
 											{
-												icon: <FlipVerticalIcon />,
+												icon: flipVertical,
 												title: __( 'Flip vertical' ),
 												isDisabled: inProgress,
 												onClick: () =>
@@ -265,7 +263,7 @@ class RichImage extends Component {
 													} ),
 											},
 											{
-												icon: <FlipHorizontalIcon />,
+												icon: flipHorizontal,
 												title: __( 'Flip horizontal' ),
 												isDisabled: inProgress,
 												onClick: () =>
@@ -279,7 +277,7 @@ class RichImage extends Component {
 							</ToolbarItem>
 							<ToolbarButton
 								disabled={ inProgress }
-								icon={ <CropIcon /> }
+								icon={ crop }
 								label={ __( 'Crop' ) }
 								onClick={ () =>
 									this.setState( {
@@ -296,14 +294,14 @@ class RichImage extends Component {
 					<BlockControls>
 						<ToolbarGroup>
 							<div className="richimage__crop-icon">
-								<Icon icon={ CropIcon } />
+								<Icon icon={ crop } />
 							</div>
 						</ToolbarGroup>
 						<ToolbarGroup>
 							<ToolbarItem>
 								{ ( toggleProps ) => (
 									<DropdownMenu
-										icon={ <AspectIcon /> }
+										icon={ aspectRatio }
 										label={ __( 'Aspect Ratio' ) }
 										popoverProps={ POPOVER_PROPS }
 										toggleProps={ toggleProps }