From fa0b753979bbe2bd88ab1cacb3951afc9a2e7202 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 25 May 2022 15:28:56 +1000
Subject: [PATCH] Add img to Elements API and leverage for image block

---
 lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php | 1 +
 packages/block-library/src/image/editor.scss         | 8 ++++++++
 packages/block-library/src/image/style.scss          | 1 +
 3 files changed, 10 insertions(+)

diff --git a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php b/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
index 0331616fb1b9e..4fbb2fa0f0a1b 100644
--- a/lib/compat/wordpress-6.1/class-wp-theme-json-6-1.php
+++ b/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.
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 6c6648632399a..28808b9b63bd7 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/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 {
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 0365b0a2a6748..b0031e6d83315 100644
--- a/packages/block-library/src/image/style.scss
+++ b/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) {