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.

packages/block-library/src/image/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,6 +25,10 @@ export const settings = {
 		'img', // "img" is not translated as it is intended to reflect the HTML <img> tag.
 		__( 'photo' ),
 	],
+	styles: [
+		{ name: 'default', label: _x( 'Default', 'block style' ), isDefault: true },
+		{ name: 'circle-mask', label: _x( 'Circle Mask', 'block style' ) },
+	],
 	transforms,
 	getEditWrapperProps( attributes ) {
 		const { align, width } = attributes;

packages/block-library/src/image/style.scss

@@ -59,3 +59,23 @@
 		margin-right: auto;
 	}
 }
+
+// Variations
+.is-style-circle-mask img {
+	// We use an absolute pixel to prevent the oval shape that a value of 50% would give
+	// to rectangular images. A pill-shape is better than otherwise.
+	border-radius: 9999px;
+
+	// If a browser supports it, we will switch to using a circular SVG mask.
+	// The stylelint override is necessary to use the SVG inline here.
+	@supports (mask-image: none) or (-webkit-mask-image: none) {
+		/* stylelint-disable */
+		mask-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="50"/></svg>');
+		/* stylelint-enable */
+		mask-mode: alpha;
+		mask-repeat: no-repeat;
+		mask-size: contain;
+		mask-position: center;
+		border-radius: none;
+	}
+}