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

Add circle-crop variation to Image block. #16475

Merged
merged 4 commits into from Aug 25, 2019

Conversation

@jasmussen
Copy link
Contributor

commented Jul 9, 2019

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:

circle crop


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:

img {
	max-width: 100%;
	height: auto;
}

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.

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.
@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Jul 9, 2019

Fixes #16130.

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 9, 2019

Here's an updated GIF, now that c6e56ca is included.

circle

I wonder if we should call this "Circle Mask" instead of "Circle Crop"?

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Jul 10, 2019

I dig that. The floating resize handle actually sort of addresses the margin thing.

I wonder if we should include the border-radius: 9999px version as a "Rounded" variation also? Or does that get messy?

And yes, "Circle Mask" is better!

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented on packages/block-library/src/image/style.scss in c6e56ca Jul 10, 2019

👌

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

I wonder if we should include the border-radius: 9999px version as a "Rounded" variation also? Or does that get messy?

I think we should keep it simple and just introduce the circle for now.

And yes, "Circle Mask" is better!

Updated in 7418ec2

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Jul 10, 2019

I'm digging it! Thanks for taking this over Kjell! I would suspect this is ready for review?

@kjellr

This comment has been minimized.

Copy link
Contributor

commented Jul 10, 2019

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.

@senadir
Copy link
Contributor

left a comment

LGTM, I don't see a reason to block this.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Aug 16, 2019

Nice, @youknowriad and @mapk can you take a final look?

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

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.

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Aug 16, 2019

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.

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

isn't there a way to "crop" the figure maybe (container of the image) to be a square once the circle is applied?

@jasmussen

This comment has been minimized.

Copy link
Contributor Author

commented Aug 16, 2019

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.

@youknowriad

This comment has been minimized.

Copy link
Contributor

commented Aug 16, 2019

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.

@mapk

This comment has been minimized.

Copy link
Contributor

commented Aug 23, 2019

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?

imageblock

@senadir

This comment has been minimized.

Copy link
Contributor

commented Aug 25, 2019

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.

@senadir senadir merged commit 61b133b into master Aug 25, 2019

1 of 2 checks passed

Filter merged Filter merged
Details
Travis CI - Pull Request Build Passed
Details

@senadir senadir deleted the try/circle-crop branch Aug 25, 2019

@senadir senadir added this to the Gutenberg 6.4 milestone Aug 25, 2019

donmhico added a commit to donmhico/gutenberg that referenced this pull request Aug 27, 2019
Add circle-crop variation to Image block. (WordPress#16475)
* 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.
dratwas added a commit to callstack/gutenberg that referenced this pull request Aug 28, 2019
Add circle-crop variation to Image block. (WordPress#16475)
* 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.
gziolo added a commit that referenced this pull request Aug 29, 2019
Add circle-crop variation to Image block. (#16475)
* 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.
gziolo added a commit that referenced this pull request Aug 29, 2019
Add circle-crop variation to Image block. (#16475)
* 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.
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.