Image Block: Revert circle mask, add "rounded" #19028
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
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.
jasmussen added [Type] Bug jasmussen requested review from ajitbohra, jorgefilipecosta, Soean and talldan as code owners
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. |
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. |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Add this suggestion to a batch that can be applied as a single commit. This suggestion is invalid because no changes were made to the code. Suggestions cannot be applied while the pull request is closed. Suggestions cannot be applied while viewing a subset of changes. Only one suggestion per line can be applied in a batch. Add this suggestion to a batch that can be applied as a single commit. Applying suggestions on deleted lines is not supported. You must change the existing code in this line in order to create a valid suggestion. Outdated suggestions cannot be applied. This suggestion has been applied or marked resolved. Suggestions cannot be applied from pending reviews. Suggestions cannot be applied on multi-line comments. Suggestions cannot be applied while the pull request is queued to merge. Suggestion cannot be applied right now. Please check back later.
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:
After: