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

Image Block: Revert circle mask, add "rounded" #19028

Merged
merged 2 commits into from Dec 16, 2019
Merged

Image Block: Revert circle mask, add "rounded" #19028

merged 2 commits into from Dec 16, 2019

Conversation

@jasmussen
Copy link
Contributor

jasmussen commented Dec 10, 2019

Fixes #16130, notably a followup to the issue outlined in #16130 (comment).

The "circle mask" variation has the benefit of creating a perfect circle out of any shape image. However it doesn't change the dimensions of the image, so the tradeoff is that the image footprint is still large, and resize handles now float in air.

This PR changes it to a "rounded" style, which sets a very high border radius ensuring that the smallest sides on a rectangular image are perfectly rounded, creating a pill-shape. When the image is perfectly square, the variation will be perfectly circular. This ensures that the variation is useful both when images are rectangular, it ensures the resize handles are appropriately placed, it fixes an issue where Microsoft Edge did not render the mask properly, and it indicates to the user that if they want a perfect circle, they can upload a square image, or change the dimensions in the sidebar.

Before:

Screenshot 2019-12-10 at 09 39 53

After:

Screenshot 2019-12-10 at 09 35 25

jasmussen added 2 commits Dec 10, 2019
Fixes #16130, notably a followup to the issue outlined in #16130 (comment).

The "circle mask" variation has the benefit of creating a perfect circle out of any shape image. However it doesn't change the dimensions of the image, so the tradeoff is that the image footprint is still large, and resize handles now float in air.

This PR changes it to a "rounded" style, which sets a very high border radius ensuring that the smallest sides on a rectangular image are perfectly rounded, creating a pill-shape. When the image is perfectly square, the variation will be perfectly circular. This ensures that the variation is useful both when images are rectangular, it ensures the resize handles are appropriately placed, it fixes an issue where Microsoft Edge did not render the mask properly, and it indicates to the user that if they want a perfect circle, they can upload a square image, or change the dimensions in the sidebar.
@melchoyce

This comment has been minimized.

Copy link
Contributor

melchoyce commented Dec 13, 2019

I find this kind of frustrating because it changes the intent of the style, but my frustration is entirely with WordPress's media library and how hard it is to quickly crop an image, especially using specific proportions. This is probably a better approach in the long run, even thought it makes more work for users.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

jasmussen commented Dec 15, 2019

but my frustration is entirely with WordPress's media library and how hard it is to quickly crop an image

I think that's the aspect to focus on. The problem with the current mask is that you can't align multiple next to each other with controlled margins, because their original dimensions still exist and are uncropped.

Copy link
Member

karmatosed left a comment

I agree with Mel, my frustration isn't the issue here it's the media library problem. With that in mind, let's merge this. Thanks and doing code review and test this also works 👍

@karmatosed karmatosed merged commit 3a9dc7b into master Dec 16, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@karmatosed karmatosed deleted the fix/circle-shape branch Dec 16, 2019
@youknowriad youknowriad added this to the Gutenberg 7.2 milestone Jan 6, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.