Image block box-shadows conflict with border-radius

[kaelansmith]

Description

I'm using the relatively new "shadows" option in theme.json, created some shadow presets, and tried applying a default shadow to image blocks via theme.json > styles > blocks > core/image > shadow, where I also specify a default border-radius, and found that the shadow gets applied to the wrapping figure element, while the border-radius gets applied to the nested img element, which causes a visual issue where the shadow isn't "in sync" with the border radius -- screenshot (most noticeable on bottom corners):

Code:

{
  ...
  "styles": {
    "blocks": {
      "core/image": {
        "border": {
          "radius": "var(--wp--custom--border-radius--lg)"
        },
        "shadow": "var(--wp--preset--shadow--md)",
      }
    }
  }
}

Work-around:

{
  ...
  "styles": {
    "blocks": {
      "core/image": {
        "border": {
          "radius": "var(--wp--custom--border-radius--lg)"
        },
        "css": "& img{box-shadow:var(--wp--preset--shadow--md);}"
      }
    }
  }
}

Step-by-step reproduction instructions

1. apply provided code example in your own theme.json

Screenshots, screen recording, code snippet

No response

Environment info

WP v6.4.2, not using Gutenberg plugin

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[colinduwe]

I tested this and confirmed the issue when not using the Gutenberg plugin. Installing and activating the Gutenberg 17.8.2 resolves the issue.

[madhusudhand]

Thank you @colinduwe for testing. I can also confirm that it is no longer an issue.

Closing the issue. If you still observe the issue, please re-open.