diff --git a/src/js/_enqueues/lib/image-edit.js b/src/js/_enqueues/lib/image-edit.js
index d076b41b1534c..7734687b5106a 100644
--- a/src/js/_enqueues/lib/image-edit.js
+++ b/src/js/_enqueues/lib/image-edit.js
@@ -1520,4 +1520,134 @@
 		}
 	}
 };
+
+	/**
+	 * Returns the post ID and nonce of the image editor containing an element.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param {HTMLElement} el An element inside the image editor.
+	 *
+	 * @return {Object} The post ID and the nonce of the editor.
+	 */
+	function getEditorContext( el ) {
+		var postid = parseInt( $( el ).closest( '.imgedit-wrap' ).data( 'postid' ), 10 );
+
+		return {
+			postid: postid,
+			nonce: $( '#imgedit-nonce-' + postid ).val()
+		};
+	}
+
+	/**
+	 * Runs the initialization of a server-rendered preview image once it has loaded.
+	 *
+	 * The attribute is removed first so that the image is initialized only once,
+	 * whether the load event or the check on DOM ready runs first.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param {HTMLImageElement} img The preview image.
+	 *
+	 * @return {void}
+	 */
+	function previewLoaded( img ) {
+		if ( ! img.hasAttribute( 'data-imgedit-preview' ) ) {
+			return;
+		}
+
+		img.removeAttribute( 'data-imgedit-preview' );
+		imageEdit.imgLoaded( getEditorContext( img ).postid );
+	}
+
+	/*
+	 * The image editor markup carries no inline event handlers, so it keeps working
+	 * under a Content Security Policy without 'unsafe-inline'. Its controls are
+	 * bound here with delegated listeners instead.
+	 */
+	$( document )
+		.on( 'click', '[data-imgedit-open]', function() {
+			imageEdit.open( $( this ).data( 'postid' ), $( this ).attr( 'data-nonce' ) );
+		} )
+		.on( 'click', '.imgedit-wrap [data-imgedit-action]', function() {
+			var context = getEditorContext( this ),
+				value = $( this ).data( 'imgedit-value' );
+
+			switch ( $( this ).data( 'imgedit-action' ) ) {
+				case 'toggleCropTool':
+					imageEdit.toggleCropTool( context.postid, context.nonce, this );
+					break;
+				case 'handleCropToolClick':
+					imageEdit.handleCropToolClick( context.postid, context.nonce, this );
+					break;
+				case 'toggleControls':
+					imageEdit.toggleControls( this );
+					break;
+				case 'togglePopup':
+					imageEdit.togglePopup( this );
+					break;
+				case 'toggleHelp':
+					imageEdit.toggleHelp( this );
+					break;
+				case 'rotate':
+					imageEdit.rotate( value, context.postid, context.nonce, this );
+					break;
+				case 'flip':
+					imageEdit.flip( value, context.postid, context.nonce, this );
+					break;
+				case 'undo':
+					imageEdit.undo( context.postid, context.nonce, this );
+					break;
+				case 'redo':
+					imageEdit.redo( context.postid, context.nonce, this );
+					break;
+				case 'close':
+					imageEdit.close( context.postid, 1 );
+					break;
+				case 'save':
+					imageEdit.save( context.postid, context.nonce );
+					break;
+				case 'action':
+					imageEdit.action( context.postid, context.nonce, value );
+					break;
+			}
+		} )
+		.on( 'keydown', '.imgedit-wrap .imgedit-popup-menu button', function( event ) {
+			imageEdit.browsePopup( event, this );
+		} )
+		.on( 'blur', '.imgedit-wrap .imgedit-rotate, .imgedit-wrap .imgedit-popup-menu button', function() {
+			imageEdit.monitorPopup();
+		} )
+		.on( 'keyup blur', '.imgedit-wrap [data-imgedit-input]', function() {
+			var postid = getEditorContext( this ).postid,
+				value = $( this ).data( 'imgedit-value' );
+
+			switch ( $( this ).data( 'imgedit-input' ) ) {
+				case 'scale':
+					imageEdit.scaleChanged( postid, value, this );
+					break;
+				case 'ratio':
+					imageEdit.setRatioSelection( postid, value, this );
+					break;
+				case 'selection':
+					imageEdit.setNumSelection( postid, this );
+					break;
+			}
+		} );
+
+	// The load event does not bubble, so listen for it in the capture phase.
+	document.addEventListener( 'load', function( event ) {
+		if ( event.target instanceof HTMLImageElement ) {
+			previewLoaded( event.target );
+		}
+	}, true );
+
+	// A preview printed with the page may have loaded before this script ran.
+	$( function() {
+		$( 'img[data-imgedit-preview]' ).each( function() {
+			if ( this.complete && this.naturalWidth ) {
+				previewLoaded( this );
+			}
+		} );
+	} );
 })(jQuery);
diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
index 2f6bc25740e2d..a7e2a791dd203 100644
--- a/src/wp-admin/includes/image-edit.php
+++ b/src/wp-admin/includes/image-edit.php
@@ -55,15 +55,15 @@ function wp_image_editor( $post_id, $msg = false ) {
 	$edit_thumbnails_separately = (bool) apply_filters( 'image_edit_thumbnails_separately', false );
 
 	?>
-	<div class="imgedit-wrap wp-clearfix">
+	<div class="imgedit-wrap wp-clearfix" data-postid="<?php echo $post_id; ?>">
 	<div id="imgedit-panel-<?php echo $post_id; ?>">
 	<?php echo $note; ?>
 	<div class="imgedit-panel-content imgedit-panel-tools wp-clearfix">
 		<div class="imgedit-menu wp-clearfix">
-			<button type="button" onclick="imageEdit.toggleCropTool( <?php echo "$post_id, '$nonce'"; ?>, this );" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
-			<button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php echo esc_html_x( 'Scale', 'verb' ); ?></button>
+			<button type="button" data-imgedit-action="toggleCropTool" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
+			<button type="button" class="imgedit-scale button" data-imgedit-action="toggleControls" aria-expanded="false" aria-controls="imgedit-scale"><?php echo esc_html_x( 'Scale', 'verb' ); ?></button>
 			<div class="imgedit-rotate-menu-container">
-				<button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" onclick="imageEdit.togglePopup(this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Image Rotation' ); ?></button>
+				<button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" aria-expanded="false" data-imgedit-action="togglePopup"><?php esc_html_e( 'Image Rotation' ); ?></button>
 				<div id="imgedit-rotate-menu" class="imgedit-popup-menu">
 			<?php
 			// On some setups GD library does not provide imagerotate() - Ticket #11536.
@@ -75,9 +75,9 @@ function wp_image_editor( $post_id, $msg = false ) {
 			) ) {
 				$note_no_rotate = '';
 				?>
-					<button type="button" class="imgedit-rleft button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
-					<button type="button" class="imgedit-rright button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
-					<button type="button" class="imgedit-rfull button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
+					<button type="button" class="imgedit-rleft button" data-imgedit-action="rotate" data-imgedit-value="90"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
+					<button type="button" class="imgedit-rright button" data-imgedit-action="rotate" data-imgedit-value="-90"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
+					<button type="button" class="imgedit-rfull button" data-imgedit-action="rotate" data-imgedit-value="180"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
 				<?php
 			} else {
 				$note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
@@ -88,17 +88,17 @@ function wp_image_editor( $post_id, $msg = false ) {
 			}
 			?>
 					<hr />
-					<button type="button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
-					<button type="button" onkeydown="imageEdit.browsePopup(event, this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" onblur="imageEdit.monitorPopup()" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
+					<button type="button" data-imgedit-action="flip" data-imgedit-value="1" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
+					<button type="button" data-imgedit-action="flip" data-imgedit-value="2" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
 					<?php echo $note_no_rotate; ?>
 				</div>
 			</div>
 		</div>
 		<div class="imgedit-submit imgedit-menu">
-			<button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
-			<button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
-			<button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
-			<button type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save Edits' ); ?></button>
+			<button type="button" id="image-undo-<?php echo $post_id; ?>" data-imgedit-action="undo" class="imgedit-undo button disabled" disabled><?php esc_html_e( 'Undo' ); ?></button>
+			<button type="button" id="image-redo-<?php echo $post_id; ?>" data-imgedit-action="redo" class="imgedit-redo button disabled" disabled><?php esc_html_e( 'Redo' ); ?></button>
+			<button type="button" data-imgedit-action="close" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
+			<button type="button" data-imgedit-action="save" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save Edits' ); ?></button>
 		</div>
 	</div>
 
@@ -114,7 +114,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 
 			<div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
 			<div class="imgedit-crop-grid"></div>
-			<img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
+			<img id="image-preview-<?php echo $post_id; ?>" data-imgedit-preview
 				src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
 			</div>
 		</div>
@@ -124,7 +124,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 				<div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
 					<div class="imgedit-group-top">
 						<h2><?php _e( 'Scale Image' ); ?></h2>
-						<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
+						<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" data-imgedit-action="toggleHelp" aria-expanded="false"><span class="screen-reader-text">
 						<?php
 						/* translators: Hidden accessibility text. */
 						esc_html_e( 'Scale Image Help' );
@@ -154,7 +154,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 							_e( 'Width' );
 							?>
 							</label>
-							<input type="number" step="1" min="0" max="<?php echo $meta['width'] ?? ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>"  id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo $meta['width'] ?? 0; ?>" />
+							<input type="number" step="1" min="0" max="<?php echo $meta['width'] ?? ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>"  id="imgedit-scale-width-<?php echo $post_id; ?>" data-imgedit-input="scale" data-imgedit-value="1" value="<?php echo $meta['width'] ?? 0; ?>" />
 							<span class="imgedit-separator" aria-hidden="true">&times;</span>
 							<label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
 							<?php
@@ -162,8 +162,8 @@ function wp_image_editor( $post_id, $msg = false ) {
 							_e( 'Height' );
 							?>
 							</label>
-							<input type="number" step="1" min="0" max="<?php echo $meta['height'] ?? ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo $meta['height'] ?? 0; ?>" />
-							<button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php echo esc_html_x( 'Scale', 'verb' ); ?></button>
+							<input type="number" step="1" min="0" max="<?php echo $meta['height'] ?? ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" data-imgedit-input="scale" data-imgedit-value="0" value="<?php echo $meta['height'] ?? 0; ?>" />
+							<button id="imgedit-scale-button" type="button" data-imgedit-action="action" data-imgedit-value="scale" class="button button-primary"><?php echo esc_html_x( 'Scale', 'verb' ); ?></button>
 							</div>
 							<span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
 						</fieldset>
@@ -175,7 +175,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 		<?php if ( $can_restore ) { ?>
 				<div class="imgedit-group">
 				<div class="imgedit-group-top">
-					<h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
+					<h2><button type="button" data-imgedit-action="toggleHelp" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
 					<div class="imgedit-help imgedit-restore">
 					<p>
 					<?php
@@ -186,7 +186,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					?>
 					</p>
 					<div class="imgedit-submit">
-						<input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
+						<input type="button" data-imgedit-action="action" data-imgedit-value="restore" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
 					</div>
 				</div>
 			</div>
@@ -196,7 +196,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 				<div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
 				<div class="imgedit-group-top">
 					<h2><?php _e( 'Crop Image' ); ?></h2>
-					<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
+					<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" data-imgedit-action="toggleHelp" aria-expanded="false"><span class="screen-reader-text">
 					<?php
 					/* translators: Hidden accessibility text. */
 					_e( 'Image Crop Help' );
@@ -220,7 +220,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'crop ratio width' );
 					?>
 					</label>
-					<input type="number" step="1" min="1" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
+					<input type="number" step="1" min="1" id="imgedit-crop-width-<?php echo $post_id; ?>" data-imgedit-input="ratio" data-imgedit-value="0" />
 					<span class="imgedit-separator" aria-hidden="true">:</span>
 					<label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
 					<?php
@@ -228,7 +228,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'crop ratio height' );
 					?>
 					</label>
-					<input  type="number" step="1" min="0" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
+					<input  type="number" step="1" min="0" id="imgedit-crop-height-<?php echo $post_id; ?>" data-imgedit-input="ratio" data-imgedit-value="1" />
 					</div>
 				</fieldset>
 				<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
@@ -240,7 +240,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'selection width' );
 					?>
 					</label>
-					<input  type="number" step="1" min="0" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
+					<input  type="number" step="1" min="0" id="imgedit-sel-width-<?php echo $post_id; ?>" data-imgedit-input="selection" />
 					<span class="imgedit-separator" aria-hidden="true">&times;</span>
 					<label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
 					<?php
@@ -248,7 +248,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'selection height' );
 					?>
 					</label>
-					<input  type="number" step="1" min="0" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
+					<input  type="number" step="1" min="0" id="imgedit-sel-height-<?php echo $post_id; ?>" data-imgedit-input="selection" />
 					</div>
 				</fieldset>
 				<fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
@@ -260,7 +260,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'horizontal start position' );
 					?>
 					</label>
-					<input  type="number" step="1" min="0" id="imgedit-start-x-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
+					<input  type="number" step="1" min="0" id="imgedit-start-x-<?php echo $post_id; ?>" data-imgedit-input="selection" value="0" />
 					<span class="imgedit-separator" aria-hidden="true">&times;</span>
 					<label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
 					<?php
@@ -268,11 +268,11 @@ function wp_image_editor( $post_id, $msg = false ) {
 					_e( 'vertical start position' );
 					?>
 					</label>
-					<input  type="number" step="1" min="0" id="imgedit-start-y-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
+					<input  type="number" step="1" min="0" id="imgedit-start-y-<?php echo $post_id; ?>" data-imgedit-input="selection" value="0" />
 					</div>
 				</fieldset>
 				<div class="imgedit-crop-apply imgedit-menu container">
-					<button class="button button-primary" type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
+					<button class="button button-primary" type="button" data-imgedit-action="handleCropToolClick" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" data-imgedit-action="handleCropToolClick" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
 				</div>
 			</div>
 		</div>
@@ -286,7 +286,7 @@ function wp_image_editor( $post_id, $msg = false ) {
 	<div class="imgedit-group imgedit-applyto">
 		<div class="imgedit-group-top">
 			<h2><?php _e( 'Thumbnail Settings' ); ?></h2>
-			<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
+			<button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" data-imgedit-action="toggleHelp" aria-expanded="false"><span class="screen-reader-text">
 			<?php
 			/* translators: Hidden accessibility text. */
 			esc_html_e( 'Thumbnail Settings Help' );
diff --git a/src/wp-admin/includes/media.php b/src/wp-admin/includes/media.php
index ee4c2add91e65..ed1204d7e873d 100644
--- a/src/wp-admin/includes/media.php
+++ b/src/wp-admin/includes/media.php
@@ -1747,7 +1747,7 @@ function get_media_item( $attachment_id, $args = null ) {
 
 	if ( wp_attachment_is_image( $post->ID ) && wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
 		$nonce             = wp_create_nonce( "image_editor-$post->ID" );
-		$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
+		$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' data-imgedit-open data-postid='$post->ID' data-nonce='$nonce' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
 	}
 
 	$attachment_url = get_permalink( $attachment_id );
@@ -3237,7 +3237,7 @@ function edit_form_image_editor( $post ) {
 		$image_edit_button = '';
 		if ( wp_image_editor_supports( array( 'mime_type' => $post->post_mime_type ) ) ) {
 			$nonce             = wp_create_nonce( "image_editor-$post->ID" );
-			$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' onclick='imageEdit.open( $post->ID, \"$nonce\" )' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
+			$image_edit_button = "<input type='button' id='imgedit-open-btn-$post->ID' data-imgedit-open data-postid='$post->ID' data-nonce='$nonce' class='button' value='" . esc_attr__( 'Edit Image' ) . "' /> <span class='spinner'></span>";
 		}
 
 		$open_style     = '';
diff --git a/tests/phpunit/tests/admin/includesImageEdit.php b/tests/phpunit/tests/admin/includesImageEdit.php
new file mode 100644
index 0000000000000..ab3774ce87d90
--- /dev/null
+++ b/tests/phpunit/tests/admin/includesImageEdit.php
@@ -0,0 +1,129 @@
+<?php
+
+/**
+ * Tests that the image editor markup can run under a Content Security Policy
+ * that does not allow inline event handlers.
+ *
+ * @group media
+ * @group admin
+ */
+class Tests_Admin_IncludesImageEdit extends WP_UnitTestCase {
+
+	/**
+	 * @var int
+	 */
+	private $attachment_id;
+
+	public function set_up() {
+		parent::set_up();
+
+		require_once ABSPATH . 'wp-admin/includes/image-edit.php';
+		require_once ABSPATH . 'wp-admin/includes/media.php';
+
+		wp_set_current_user( self::factory()->user->create( array( 'role' => 'administrator' ) ) );
+
+		$this->attachment_id = self::factory()->attachment->create_upload_object( DIR_TESTDATA . '/images/canola.jpg' );
+	}
+
+	public function tear_down() {
+		$this->remove_added_uploads();
+
+		parent::tear_down();
+	}
+
+	/**
+	 * Returns the names of all event handler attributes in the given HTML.
+	 *
+	 * @param string $html The HTML to scan.
+	 * @return string[] The tag and attribute names, for example `BUTTON[onclick]`.
+	 */
+	private function get_event_handler_attributes( $html ) {
+		$found     = array();
+		$processor = new WP_HTML_Tag_Processor( $html );
+
+		while ( $processor->next_tag() ) {
+			foreach ( (array) $processor->get_attribute_names_with_prefix( 'on' ) as $name ) {
+				$found[] = $processor->get_tag() . '[' . $name . ']';
+			}
+		}
+
+		return $found;
+	}
+
+	/**
+	 * @ticket 59446
+	 *
+	 * @covers ::wp_image_editor
+	 */
+	public function test_wp_image_editor_has_no_inline_event_handlers() {
+		$html = get_echo( 'wp_image_editor', array( $this->attachment_id ) );
+
+		$this->assertStringContainsString( 'imgedit-wrap', $html, 'The image editor was not rendered.' );
+		$this->assertSame( array(), $this->get_event_handler_attributes( $html ) );
+	}
+
+	/**
+	 * Tests that every control of the image editor is bound through a data attribute
+	 * and that the editor exposes its post ID and nonce for the delegated listeners.
+	 *
+	 * @ticket 59446
+	 *
+	 * @covers ::wp_image_editor
+	 */
+	public function test_wp_image_editor_exposes_context_for_delegated_listeners() {
+		$html      = get_echo( 'wp_image_editor', array( $this->attachment_id ) );
+		$processor = new WP_HTML_Tag_Processor( $html );
+
+		$this->assertTrue( $processor->next_tag( array( 'class_name' => 'imgedit-wrap' ) ) );
+		$this->assertSame( (string) $this->attachment_id, $processor->get_attribute( 'data-postid' ) );
+
+		$this->assertTrue( $processor->next_tag( array( 'tag_name' => 'INPUT' ) ) );
+		$this->assertSame( 'imgedit-nonce-' . $this->attachment_id, $processor->get_attribute( 'id' ) );
+		$this->assertSame( 1, wp_verify_nonce( $processor->get_attribute( 'value' ), "image_editor-{$this->attachment_id}" ) );
+
+		$actions   = array();
+		$processor = new WP_HTML_Tag_Processor( $html );
+		while ( $processor->next_tag() ) {
+			$action = $processor->get_attribute( 'data-imgedit-action' );
+			if ( is_string( $action ) ) {
+				$actions[] = $action . ( null === $processor->get_attribute( 'data-imgedit-value' ) ? '' : ':' . $processor->get_attribute( 'data-imgedit-value' ) );
+			}
+		}
+
+		$expected = array(
+			'toggleCropTool',
+			'toggleControls',
+			'togglePopup',
+			'flip:1',
+			'flip:2',
+			'undo',
+			'redo',
+			'close',
+			'save',
+			'action:scale',
+			'handleCropToolClick',
+			'handleCropToolClick',
+			'toggleHelp',
+		);
+		foreach ( $expected as $action ) {
+			$this->assertContains( $action, $actions );
+		}
+	}
+
+	/**
+	 * @ticket 59446
+	 *
+	 * @covers ::edit_form_image_editor
+	 */
+	public function test_edit_form_image_editor_open_button_has_no_inline_event_handler() {
+		$html      = get_echo( 'edit_form_image_editor', array( get_post( $this->attachment_id ) ) );
+		$processor = new WP_HTML_Tag_Processor( $html );
+
+		$this->assertSame( array(), $this->get_event_handler_attributes( $html ) );
+		$this->assertTrue( $processor->next_tag( array( 'class_name' => 'button' ) ), 'The Edit Image button was not rendered.' );
+		$this->assertSame( 'imgedit-open-btn-' . $this->attachment_id, $processor->get_attribute( 'id' ) );
+		$this->assertTrue( $processor->get_attribute( 'data-imgedit-open' ) );
+		$this->assertSame( (string) $this->attachment_id, $processor->get_attribute( 'data-postid' ) );
+		$this->assertSame( 1, wp_verify_nonce( $processor->get_attribute( 'data-nonce' ), "image_editor-{$this->attachment_id}" ) );
+	}
+}