Adding Custom Gutenberg Image Styles “Circled” and “Squared”

After quite a bit of searching I found the easiest way to add custom Gutenberg styles.

This single action contains both the registration of the style and the CSS of the style itself.

Square

The best way to bring uniformity to columns of images.

/**
 * Adds custom Gutenberg Image Block Style "Square" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-square img {
	object-fit: cover;
	width: 9.5em; 
	height: 9.5em;}';
	register_block_style('core/image', [
		'name' => 'square',
		'label' => __('Squared', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

Circle

Takes the edge off.

/**
 * Adds custom Gutenberg Image Block Style "Circle" (David Stockdale.
 */
add_action('init', function() {
	$inline_css = '.is-style-circle img {
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
}';
	register_block_style('core/image', [
		'name' => 'circle',
		'label' => __('Circled', 'txtdomain'),
		'inline_style' => $inline_css
	]);
});

Before

After

I feel like Circle could be improved…