From 1e0d5c4c5c5cdcb30adb8b07c4197d7bb0cd278c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 10 Dec 2019 09:35:34 +0100 Subject: [PATCH 1/2] Image Block: Revert circle mask, add "rounded" Fixes #16130, notably a followup to the issue outlined in https://github.com/WordPress/gutenberg/issues/16130#issuecomment-555451523. 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. --- packages/block-library/src/image/index.js | 2 +- packages/block-library/src/image/style.scss | 15 +-------------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 78c37538d5bff1..b48584478d48f0 100644 --- a/packages/block-library/src/image/index.js +++ b/packages/block-library/src/image/index.js @@ -34,7 +34,7 @@ export const settings = { }, styles: [ { name: 'default', label: _x( 'Default', 'block style' ), isDefault: true }, - { name: 'circle-mask', label: _x( 'Circle Mask', 'block style' ) }, + { name: 'rounded', label: _x( 'Rounded', 'block style' ) }, ], transforms, getEditWrapperProps( attributes ) { diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 26f94d57739c80..8bec19b0c272b2 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -62,21 +62,8 @@ } // Variations -.is-style-circle-mask img { +.is-style-rounded 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,'); - /* stylelint-enable */ - mask-mode: alpha; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - border-radius: none; - } } From 3fbc36c25bb2933f8149889754e9c41369246808 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Tue, 10 Dec 2019 09:41:18 +0100 Subject: [PATCH 2/2] Add back-compat. --- packages/block-library/src/image/style.scss | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 8bec19b0c272b2..17dabbe9769609 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -67,3 +67,24 @@ // to rectangular images. A pill-shape is better than otherwise. border-radius: 9999px; } + +// The following variation is deprecated. +// The CSS is kept here for the time being, to support blocks using the old variation. +.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,'); + /* stylelint-enable */ + mask-mode: alpha; + mask-repeat: no-repeat; + mask-size: contain; + mask-position: center; + border-radius: none; + } +}