Add img to Elements API and leverage for image block

lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php

@@ -26,6 +26,7 @@ class WP_Theme_JSON_6_1 extends WP_Theme_JSON_6_0 {
 		'h5'     => 'h5',
 		'h6'     => 'h6',
 		'button' => '.wp-element-button, .wp-block-button__link', // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
+		'img'    => '.wp-block-image__crop-area, img', // Until we can access global styles in block editor we need to be able to apply the same styles on image croppers.
 	);
 	/**
 	 * Returns the metadata for each block.

packages/block-library/src/image/editor.scss

@@ -91,6 +91,14 @@ figure.wp-block-image:not(.wp-block) {
 	max-width: 100%;
 	width: 100%;
 	overflow: hidden;
+	box-sizing: border-box;
+
+	// Strip image of border styles while within the cropper.
+	// We don't yet have access to merged global styles in the block editor
+	// to reapply them to the image cropper.
+	.reactEasyCrop_Container > .reactEasyCrop_Image {
+		border: none;
+	}
 }
 
 .wp-block-image__crop-icon {

packages/block-library/src/image/style.scss

@@ -5,6 +5,7 @@
 		height: auto;
 		max-width: 100%;
 		vertical-align: bottom;
+		box-sizing: border-box;
 	}
 
 	&:not(.is-style-rounded) {