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 1 commit 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

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @stian-overasen.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: stian-overasen.


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
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