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