Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AspectRatioDropdown: List theme aspect ratios as decimal values #67302

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from

Conversation

stian-overasen
Copy link

@stian-overasen stian-overasen commented Nov 26, 2024

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?

Solved issue #66077.

How?

Map theme aspect ratios as calculated decimal values (16:9 = 1.777) the same was 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

Copy link

github-actions bot commented Nov 26, 2024

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 <[email protected]>

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

@github-actions github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 26, 2024
Copy link

👋 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 stian-overasen changed the title Present theme aspect ratios as decimal values in AspectRatioDropdown AspectRatioDropdown: Present theme aspect ratios as decimal values Nov 26, 2024
@stian-overasen stian-overasen changed the title AspectRatioDropdown: Present theme aspect ratios as decimal values AspectRatioDropdown: List theme aspect ratios as decimal values Nov 26, 2024
@carolinan carolinan added the [Type] Bug An existing feature does not function as intended label Nov 28, 2024
@stian-overasen
Copy link
Author

Any update on this issue @ellatrix @carolinan? Seems like low-hanging fruit.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants