diff --git a/docs/designers-developers/developers/themes/theme-json.md b/docs/designers-developers/developers/themes/theme-json.md index 093f11e485190..dad83773b1e3c 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 02cfd21dfd9cd..3952230ded6a3 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 563f68b9541c7..8e03e09dd6e9d 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 3771670675ed8..2a887ef489853 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; }