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; + } + } } 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..8694da72f23d17 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -58,4 +58,9 @@ margin-left: auto; margin-right: auto; } + + // Rounded corners block style + &.is-style-rounded-corners img { + border-radius: $grid-size; + } }