Add toolbar icon for crop mode

WordPress · Dec 14, 2021 · 8c30ffd · 8c30ffd
1 parent 2d0a4dc
commit 8c30ffd
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/packages/block-editor/src/components/image-editor/index.js b/packages/block-editor/src/components/image-editor/index.js
@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
+import { Icon, crop } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -32,6 +34,9 @@ export default function ImageEditor( {
 				naturalWidth={ naturalWidth }
 			/>
 			<BlockControls group="alt">
+				<div className="image-editor__crop-toolbar-icon">
+					<Icon icon={ crop } label={ __( 'Crop' ) } />
+				</div>
 				<ToolbarGroup>
 					<ZoomDropdown />
 					<ToolbarItem>

diff --git a/packages/block-editor/src/components/image-editor/style.scss b/packages/block-editor/src/components/image-editor/style.scss
@@ -0,0 +1,11 @@
+.image-editor__crop-toolbar-icon {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+	background-color: $gray-900;
+	color: $white;
+
+    svg {
+        fill: currentColor;
+    }
+}
diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss
@@ -32,6 +32,7 @@
 @import "./components/default-block-appender/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/image-editor/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";