Description

I'm adding a custom aspect ratio on ann image block within the theme.json of my child theme. It gets added in Gutenberg but breaks things in the editor (see video below).

In the console the following error is thrown after selecting a custom aspect ratio:

react-dom.js?ver=18:1 Warning: `NaN` is an invalid value for the `height` css style property.

Step-by-step reproduction instructions

theme.json (I'm adjusting the config of the theme.json in the child-theme)

"core/image": {
  "dimensions": {
      "aspectRatios": [
          {
              "name": "Extra Wide - 2:1",
              "ratio": "2/1",
              "slug": "2-1"
          },
          {
              "name": "Cinema - 21:9",
              "ratio": "21/9",
              "slug": "21-9"
          }
      ]
  }
}

I am then trying to set the new aspect ratio in Gutenberg. The default can be set and the view is adjusted. The theme aspect ratio falls back to the full image and breaks further adjustments in the other options (can't set the focus area of the image for example).

Screenshots, screen recording, code snippet

Environment info

• WordPress 6.6
• Using a child theme of Twenty Twenty-Four

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