Custom aspect-ratio within theme.json not working

[marcwieland95]

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

https://github.com/user-attachments/assets/2bbc36dc-757f-4fc3-b798-131e063b63bb

Environment info

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

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

• [x] Yes

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

• [x] Yes

[github-actions[bot]]

Hi, This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps. Thanks for helping out.

[marcwieland95]

I was just testing it with WordPress 6.7 and the latest Gutenberg plugin version. Still the same NaN error in the console on custom aspect ratio.

[Infinite-Null]

Hi @marcwieland95,

Thank you for highlighting this issue. I attempted to reproduce it but was unable to do so. Below are the details of my setup and the steps I followed:

WordPress Version

I am currently using WordPress 6.7.

Folder Structure for Themes

Here is my folder structure for themes:

Child Theme Details

File: themes/twentytwentyfourchild/style.css:

/*
Theme Name: Twenty Twenty Four Child
Template: twentytwentyfour
Description: A child theme for Twenty Twenty Four theme
*/

File: themes/twentytwentyfourchild/theme.json:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 3,
    "settings": {
        "blocks": {
            "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"
                        }
                    ]
                }
            }
        }
    }
}

Video Demonstration

video demonstrating the output:

https://github.com/user-attachments/assets/d12baca3-d418-412a-9a4d-6433575d132a

[stian-overasen]

The issue is with the aspect ratio option in the Image Block cropping tool @Infinite-Null, not the sidebar selector. Have a look at Marc's video.

[Infinite-Null]

Hi @stian-overasen Thank you for clarifying this! I attempted the same with the image block, and while the issue occurs, I couldn’t find any errors in the console. Here is video for same:

https://github.com/user-attachments/assets/6577479d-b448-45a2-a17e-b97b5af33c4c

[stian-overasen]

I found the bug @Infinite-Null @marcwieland95

In the AspectRatioDropdown component all default aspect ratios are presented as decimal numbers, e.g. 16:9 is converted to 1.7777 and 4:3 is converted to 1.333. The theme ratios however is never converted in the same way, resulting in a calculation error when trying to calculate the image height using width and ratio.

Luckily this a easy fix by changing line 114 in aspect-ratio-dropdown.js from:

aspectRatios={ themeRatios }

to:

aspectRatios={ themeRatios.map( presetRatioAsNumber ) }

I'll do a PR.

Video showing the bug when selecting a theme ratio:

https://github.com/user-attachments/assets/2a6d7603-034c-481e-93ec-d468a772ab98

[Mamaduka]

@fabiankaegy, do you mind having a look at the proposed solution?