AspectRatioDropdown: List theme aspect ratios as decimal values

[stian-overasen]

What?

This PR fixes the bug with custom theme aspect ratios (Issue #66077) in the image cropper tool by mapping the theme ratios as decimal values in the AspectRatioDropdown component (Same as is already done for the default aspect ratios)

Why?

Fixes #66077

How?

Map theme aspect ratios as calculated decimal values (16:9 = 1.777) the same way that is already done for default aspect ratios.

Testing Instructions

1. Add a custom aspect ratio to your theme.json. Example below.
2. Open a post or page.
3. Insert Image block and select a image.
4. Open the cropping tool.
5. Open the Aspect Ratio dropdown and observe your custom theme ratio in the list.
6. Select the custom ratio.
7. Observe that the crop area changes to reflect your selection.

Example of custom theme aspect ratio in theme.json:

"dimensions": {
  "aspectRatios": [
    {
      "name": "Ultra Wide - 21:9",
      "slug": "21-9",
      "ratio": "21/9"
    }
  ]
},

Screencast before fix:

before.mp4

Screencast after fix:

after.mp4

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Required label: Any label starting with [Type].
• Labels found: .

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: stian-overasen <soverasen@git.wordpress.org>
Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: mawiswiss <marcwieland95@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @stian-overasen! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[stian-overasen]

Retrying this bugfix after my last PR was ignored. This problem is very much still an issue and should be fixed.

[stian-overasen]

This patch is currently fixing the issue in both unminified and minified block-editor.js while we wait for a fix:

#!/usr/bin/env bash
#
# WordPress Core Patches
# This script applies necessary patches to WordPress core files after composer updates
#

set -e

SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
PROJECT_ROOT="$(dirname "$SCRIPT_DIR")"
WP_INCLUDES="$PROJECT_ROOT/public/wp/wp-includes"

echo "Applying WordPress core patches..."

# Patch 1: Fix aspect ratio bug in block-editor.js
# Bug: themeRatios needs .map(presetRatioAsNumber) transformation
# Affects: WordPress core block editor aspect ratio selector
echo "  → Patching block-editor.js aspect ratio bug..."

# Patch unminified version
UNMINIFIED="$WP_INCLUDES/js/dist/block-editor.js"
if [ -f "$UNMINIFIED" ] && grep -q 'aspectRatios: themeRatios$' "$UNMINIFIED"; then
    # Create backup
    cp "$UNMINIFIED" "$UNMINIFIED.bak"
    # Apply patch - replace the line that ends with themeRatios
    sed -i.tmp 's/aspectRatios: themeRatios$/aspectRatios: themeRatios.map(presetRatioAsNumber)/g' "$UNMINIFIED"
    rm -f "$UNMINIFIED.tmp"
    echo "    ✓ Fixed block-editor.js (unminified)"
elif [ ! -f "$UNMINIFIED" ]; then
    echo "    ⚠ File not found: block-editor.js"
else
    echo "    ℹ Already patched: block-editor.js"
fi

# Patch minified version
MINIFIED="$WP_INCLUDES/js/dist/block-editor.min.js"
if [ -f "$MINIFIED" ] && grep -q 'aspectRatios:s[,}]' "$MINIFIED"; then
    # Create backup
    cp "$MINIFIED" "$MINIFIED.bak"
    # Apply patch - replace aspectRatios:s} or aspectRatios:s,
    sed -i.tmp 's/aspectRatios:s\([,}]\)/aspectRatios:s.map(RP)\1/g' "$MINIFIED"
    rm -f "$MINIFIED.tmp"
    echo "    ✓ Fixed block-editor.min.js (minified)"
elif [ ! -f "$MINIFIED" ]; then
    echo "    ⚠ File not found: block-editor.min.js"
else
    echo "    ℹ Already patched: block-editor.min.js"
fi

echo ""
echo "✓ WordPress core patches applied successfully"
echo ""
echo "Patches applied:"
echo "  1. Block editor aspect ratio transformation bug"
echo ""