From b58732d66593e4ec8b3d76a18bcd1b71a87994c4 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 25 Jan 2021 15:29:52 +1000
Subject: [PATCH] Image Block: Add border radius support (#27667)

* Add border radius support to image block
* Update theme-json docs with border radius addition
---
 docs/designers-developers/developers/themes/theme-json.md | 1 +
 packages/block-library/src/image/block.json               | 5 ++++-
 packages/block-library/src/image/editor.scss              | 4 ++++
 packages/block-library/src/image/style.scss               | 4 ++++
 4 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md
index 093f11e4851901..dad83773b1e3cd 100644
--- a/docs/designers-developers/developers/themes/theme-json.md
+++ b/docs/designers-developers/developers/themes/theme-json.md
@@ -322,6 +322,7 @@ h4 {
 | Context | Radius |
 | --- | --- |
 | Group | Yes |
+| Image | Yes |
 
 #### Color Properties
 
diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json
index 02cfd21dfd9cd5..3952230ded6a31 100644
--- a/packages/block-library/src/image/block.json
+++ b/packages/block-library/src/image/block.json
@@ -71,7 +71,10 @@
 		}
 	},
 	"supports": {
-		"anchor": true
+		"anchor": true,
+		"__experimentalBorder": {
+			"radius": true
+		}
 	},
 	"editorStyle": "wp-block-image-editor",
 	"style": "wp-block-image"
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 563f68b9541c70..8e03e09dd6e9d0 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -22,6 +22,10 @@ figure.wp-block-image:not(.wp-block) {
 		margin-top: -9px;
 		margin-left: -9px;
 	}
+
+	&:not(.is-style-rounded) > div {
+		border-radius: inherit;
+	}
 }
 
 // This is necessary for the editor resize handles to accurately work on a non-floated, non-resized, small image.
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss
index 3771670675ed8f..2a887ef4898539 100644
--- a/packages/block-library/src/image/style.scss
+++ b/packages/block-library/src/image/style.scss
@@ -7,6 +7,10 @@
 		max-width: 100%;
 	}
 
+	&:not(.is-style-rounded) img {
+		border-radius: inherit;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}