Add alt toolbar for image crop mode

packages/block-editor/src/components/block-controls/groups.js

@@ -8,13 +8,15 @@ const BlockControlsBlock = createSlotFill( 'BlockControlsBlock' );
 const BlockControlsInline = createSlotFill( 'BlockFormatControls' );
 const BlockControlsOther = createSlotFill( 'BlockControlsOther' );
 const BlockControlsParent = createSlotFill( 'BlockControlsParent' );
+const BlockControlsAlt = createSlotFill( 'BlockControlsParent' );
 
 const groups = {
 	default: BlockControlsDefault,
 	block: BlockControlsBlock,
 	inline: BlockControlsInline,
 	other: BlockControlsOther,
 	parent: BlockControlsParent,
+	alt: BlockControlsAlt,
 };
 
 export default groups;

packages/block-editor/src/components/block-toolbar/index.js

@@ -32,6 +32,7 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		hasReducedUI,
 		isValid,
 		isVisual,
+		isAltMode,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -61,6 +62,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 			isVisual: selectedBlockClientIds.every(
 				( id ) => getBlockMode( id ) === 'visual'
 			),
+			isAltMode: selectedBlockClientIds.every(
+				( id ) => getBlockMode( id ) === 'alt'
+			),
 		};
 	}, [] );
 
@@ -105,6 +109,17 @@ export default function BlockToolbar( { hideDragHandle } ) {
 		shouldShowMovers && 'is-showing-movers'
 	);
 
+	if ( isAltMode ) {
+		return (
+			<div className={ classes }>
+				<BlockControls.Slot
+					group="alt"
+					className="block-editor-block-toolbar__slot"
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div className={ classes }>
 			{ ! isMultiToolbar && ! displayHeaderToolbar && (

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
@@ -31,7 +33,10 @@ export default function ImageEditor( {
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 			/>
-			<BlockControls>
+			<BlockControls group="alt">
+				<div className="image-editor__crop-toolbar-icon">
+					<Icon icon={ crop } label={ __( 'Crop' ) } />
+				</div>
 				<ToolbarGroup>
 					<ZoomDropdown />
 					<ToolbarItem>

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;
+    }
+}

packages/block-editor/src/store/actions.js

@@ -896,6 +896,22 @@ export function toggleBlockMode( clientId ) {
 	};
 }
 
+/**
+ * Returns an action object used to set alternate editing modes.
+ *
+ * @param {string} clientId Block client ID.
+ * @param {string} mode     Block editing mode.
+ *
+ * @return {Object} Action object.
+ */
+export function setBlockMode( clientId, mode ) {
+	return {
+		type: 'SET_BLOCK_MODE',
+		clientId,
+		mode,
+	};
+}
+
 /**
  * Returns an action object used in signalling that the user has begun to type.
  *

packages/block-editor/src/store/reducer.js

@@ -1390,15 +1390,22 @@ export function initialPosition( state = null, action ) {
 }
 
 export function blocksMode( state = {}, action ) {
-	if ( action.type === 'TOGGLE_BLOCK_MODE' ) {
-		const { clientId } = action;
-		return {
-			...state,
-			[ clientId ]:
-				state[ clientId ] && state[ clientId ] === 'html'
-					? 'visual'
-					: 'html',
-		};
+	const { clientId } = action;
+
+	switch ( action.type ) {
+		case 'TOGGLE_BLOCK_MODE':
+			return {
+				...state,
+				[ clientId ]:
+					state[ clientId ] && state[ clientId ] === 'html'
+						? 'visual'
+						: 'html',
+			};
+		case 'SET_BLOCK_MODE':
+			return {
+				...state,
+				[ clientId ]: action.mode,
+			};
 	}
 
 	return state;

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";

packages/block-library/src/image/image.js

@@ -50,6 +50,8 @@ import { isExternalImage } from './edit';
  */
 import { MIN_SIZE, ALLOWED_MEDIA_TYPES } from './constants';
 
+const IMAGE_EDITING_BLOCK_MODE = 'alt';
+
 export default function Image( {
 	temporaryURL,
 	attributes: {
@@ -110,12 +112,14 @@ export default function Image( {
 		imageSizes,
 		maxWidth,
 		mediaUpload,
+		isEditingImage,
 	} = useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
 				getSettings,
 				canInsertBlockType,
+				getBlockMode,
 			} = select( blockEditorStore );
 
 			const rootClientId = getBlockRootClientId( clientId );
@@ -132,11 +136,15 @@ export default function Image( {
 					'core/cover',
 					rootClientId
 				),
+				isEditingImage:
+					getBlockMode( clientId ) === IMAGE_EDITING_BLOCK_MODE,
 			};
 		},
 		[ clientId ]
 	);
-	const { replaceBlocks, toggleSelection } = useDispatch( blockEditorStore );
+	const { replaceBlocks, toggleSelection, setBlockMode } = useDispatch(
+		blockEditorStore
+	);
 	const { createErrorNotice, createSuccessNotice } = useDispatch(
 		noticesStore
 	);
@@ -146,7 +154,6 @@ export default function Image( {
 		{ loadedNaturalWidth, loadedNaturalHeight },
 		setLoadedNaturalSize,
 	] = useState( {} );
-	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const [ externalBlob, setExternalBlob ] = useState();
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isResizable = allowResize && ! ( isWideAligned && isLargeViewport );
@@ -156,6 +163,11 @@ export default function Image( {
 		),
 		( { name, slug } ) => ( { value: slug, label: name } )
 	);
+	const setIsEditingImage = ( isEditing ) =>
+		setBlockMode(
+			clientId,
+			isEditing ? IMAGE_EDITING_BLOCK_MODE : 'visual'
+		);
 
 	// If an image is externally hosted, try to fetch the image data. This may
 	// fail if the image host doesn't allow CORS with the domain. If it works,