Image Block: Add border radius support (#27667)

* Add border radius support to image block * Update theme-json docs with border radius addition
WordPress · Jan 25, 2021 · b58732d · b58732d
1 parent cdf61b8
commit b58732d
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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
@@ -7,6 +7,10 @@
 		max-width: 100%;
 	}
 
+	&:not(.is-style-rounded) img {
+		border-radius: inherit;
+	}
+
 	&.aligncenter {
 		text-align: center;
 	}