Add circle-crop variation to Image block. #16475
Conversation
Props @phpbits for the technical implementation. This PR adds a variation to the Image block, "Circle Crop". What that means is you can choose a style variation for the image, which rounds all 4 corners. When this is appliedto a square image, that means a perfect circle. When it is applied to a rectangle, it means a pill-shape. In past attempts to fix this, it was either an oval crop, or it required a large refactor to be able to make a rectangular image into a square, in CSS only. But with @phpbits clever trick — using a pixel value for the border radius — the we can actually implement this in a simple way that is still visually appealing even for rectangles.
jasmussen
requested review from
ajitbohra,
gziolo,
jorgefilipecosta,
Soean,
talldan and
youknowriad
as code owners
|
Fixes #16130. |
|
Here's an updated GIF, now that c6e56ca is included.
I wonder if we should call this "Circle Mask" instead of "Circle Crop"? |
|
I dig that. The floating resize handle actually sort of addresses the margin thing. I wonder if we should include the And yes, "Circle Mask" is better! |
I think we should keep it simple and just introduce the circle for now.
Updated in 7418ec2 |
|
I'm digging it! Thanks for taking this over Kjell! I would suspect this is ready for review? |
Yep! This should be ready for review. |
|
Nice, @youknowriad and @mapk can you take a final look? |
|
There's a very small issue when resizing as the resizing handles can appear a bit far from the circle. The other probably more concerning issue is the fact that the size of the image container doesn't adapt properly which means there's a lot of extra whitespace. It feels bad especially for vertical images or when you left/right align the image. |
|
That was the reason for the pill shape initially in the pr, that way the handles stay attached. But then it's not a circle. I have a slight preference for that, for this reason, but not a strong one. The circle crop is clever though. |
|
isn't there a way to "crop" the figure maybe (container of the image) to be a square once the circle is applied? |
|
I tried very hard to do that back in the day in an old branch, try/circle-crop. I just couldn't get it to work reliably. However as mentioned in this pr, you can choose a square crop from the sidebar. |
|
Anyway, I don't feel like these concerns are strong enough to block this PR. Let's merge and see the feedback we'll have. |
|
Thanks for the ping, @jasmussen. I just tested this and ran into a little issue. It might be beyond this PR though and related to this one: #17174 If I want to change the styling after resizing the image, I have to click the Image block again to return focus, and then also open the "Styles" accordion panel in the sidebar again. Everytime the Image block loses focus that panel closes. Can we keep it open? Should we?
|
This is now fixed #17175, since everyone is all set with this PR, I will give it a last check before finally merging it. |
* Add circle-crop variation to Image block. Props @phpbits for the technical implementation. This PR adds a variation to the Image block, "Circle Crop". What that means is you can choose a style variation for the image, which rounds all 4 corners. When this is appliedto a square image, that means a perfect circle. When it is applied to a rectangle, it means a pill-shape. In past attempts to fix this, it was either an oval crop, or it required a large refactor to be able to make a rectangular image into a square, in CSS only. But with @phpbits clever trick — using a pixel value for the border radius — the we can actually implement this in a simple way that is still visually appealing even for rectangles. * If the browser supports it, use the mask CSS property to create this effect. * Rename to "Circle Mask" * Remove unintentional code comment.
* Add circle-crop variation to Image block. Props @phpbits for the technical implementation. This PR adds a variation to the Image block, "Circle Crop". What that means is you can choose a style variation for the image, which rounds all 4 corners. When this is appliedto a square image, that means a perfect circle. When it is applied to a rectangle, it means a pill-shape. In past attempts to fix this, it was either an oval crop, or it required a large refactor to be able to make a rectangular image into a square, in CSS only. But with @phpbits clever trick — using a pixel value for the border radius — the we can actually implement this in a simple way that is still visually appealing even for rectangles. * If the browser supports it, use the mask CSS property to create this effect. * Rename to "Circle Mask" * Remove unintentional code comment.
* Add circle-crop variation to Image block. Props @phpbits for the technical implementation. This PR adds a variation to the Image block, "Circle Crop". What that means is you can choose a style variation for the image, which rounds all 4 corners. When this is appliedto a square image, that means a perfect circle. When it is applied to a rectangle, it means a pill-shape. In past attempts to fix this, it was either an oval crop, or it required a large refactor to be able to make a rectangular image into a square, in CSS only. But with @phpbits clever trick — using a pixel value for the border radius — the we can actually implement this in a simple way that is still visually appealing even for rectangles. * If the browser supports it, use the mask CSS property to create this effect. * Rename to "Circle Mask" * Remove unintentional code comment.
Props @phpbits for the technical implementation.
This PR adds a variation to the Image block, "Circle Crop". What that means is you can choose a style variation for the image, which rounds all 4 corners. When this is appliedto a square image, that means a perfect circle. When it is applied to a rectangle, it means a pill-shape.
In past attempts to fix this, it was either an oval crop, or it required a large refactor to be able to make a rectangular image into a square, in CSS only. But with @phpbits clever trick — using a pixel value for the border radius — the we can actually implement this in a simple way that is still visually appealing even for rectangles.
GIF:
On a separate note, I did look into sort of a "hack" to create perfect circles from rectangular images. Since you can manually type in the dimensions of an image in the block inspector, you can force a square image even from a rectangle. If you combine that with
object-fit: cover;, it means that the image won't be stretched.However, every modern WordPress theme has the following CSS bundled along, to make images responsive:
This reminded me that unless the width of the image is fluid, it won't scale to mobile. So the hack unfortunately won't work.