From db7e0516bc3cdf47d194b2db3b6671b52238fca4 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 15:11:05 -0400 Subject: [PATCH 1/3] Add rounded corners block style to the image block. --- packages/block-library/src/image/index.js | 6 +++++- packages/block-library/src/image/style.scss | 4 ++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/image/index.js b/packages/block-library/src/image/index.js index 7d72cc6c103f3f..facf36b1382f87 100644 --- a/packages/block-library/src/image/index.js +++ b/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 tag. __( 'photo' ), ], + styles: [ + { name: 'default', label: _x( 'Default', 'block style' ), isDefault: true }, + { name: 'rounded-corners', label: _x( 'Rounded Corners', 'block style' ) }, + ], transforms, getEditWrapperProps( attributes ) { const { align, width } = attributes; diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 0ce4d929d426dc..0ec34b8ac0e5fb 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -58,4 +58,8 @@ margin-left: auto; margin-right: auto; } + + &.is-style-rounded-corners img { + border-radius: $grid-size; + } } From 599081c758a51f48214cea295bcf58501692a839 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 15:12:48 -0400 Subject: [PATCH 2/3] Add code comment. --- packages/block-library/src/image/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 0ec34b8ac0e5fb..8694da72f23d17 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -59,6 +59,7 @@ margin-right: auto; } + // Rounded corners block style &.is-style-rounded-corners img { border-radius: $grid-size; } From ea1abeb407a13fb37e2f078c89b15505778cad2f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 7 Aug 2019 15:19:16 -0400 Subject: [PATCH 3/3] Add rounded corners block style to the gallery block. --- packages/block-library/src/gallery/index.js | 6 +++++- packages/block-library/src/gallery/style.scss | 13 +++++++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/index.js b/packages/block-library/src/gallery/index.js index a3c5eb00fd38d3..b684aa8faef733 100644 --- a/packages/block-library/src/gallery/index.js +++ b/packages/block-library/src/gallery/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 = { supports: { align: true, }, + styles: [ + { name: 'default', label: _x( 'Default', 'block style' ), isDefault: true }, + { name: 'rounded-corners', label: _x( 'Rounded Corners', 'block style' ) }, + ], transforms, edit, save, diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss index df60d6fd1fc9b6..d7ac63b81567ad 100644 --- a/packages/block-library/src/gallery/style.scss +++ b/packages/block-library/src/gallery/style.scss @@ -147,4 +147,17 @@ justify-content: center; } } + + // Rounded corners block style + &.is-style-rounded-corners { + + img { + border-radius: $grid-size; + } + + figcaption { + border-bottom-right-radius: $grid-size; + border-bottom-left-radius: $grid-size; + } + } }