Add border radius support to image block

WordPress · Dec 11, 2020 · 01f3319 · 01f3319
1 parent 37163dc
commit 01f3319
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
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;
 	}