I fiddled around with my crops a bit more and created these improved versions.
Square
Small
/**
* Adds custom Gutenberg Image Block Style "Squared (Small)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '9.5em';
$inline_css = '.is-style-square-small img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';}';
register_block_style('core/image', [
'name' => 'square-small',
'label' => __('Squared (Small)', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Before
After
Medium
/**
* Adds custom Gutenberg Image Block Style "Squared (Medium)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '15em';
$inline_css = '.is-style-square-medium img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';}';
register_block_style('core/image', [
'name' => 'square-medium',
'label' => __('Squared (Medium)', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Before
After
Large
/**
* Adds custom Gutenberg Image Block Style "Squared (Large)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '35em';
$inline_css = '.is-style-square-large img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';}';
register_block_style('core/image', [
'name' => 'square-large',
'label' => __('Squared (Large)', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Before
After
Circle
Small
/**
* Adds custom Gutenberg Image Block Style "Circle (Small)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '9.5em';
$inline_css = '.is-style-circle-small img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}';
register_block_style('core/image', [
'name' => 'circle-small',
'label' => __('Circled (Small)', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Before
After
Medium
/**
* Adds custom Gutenberg Image Block Style "Circle (Medium)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '15em';
$inline_css = '.is-style-circle-medium img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}';
register_block_style('core/image', [
'name' => 'circle-medium',
'label' => __('Circled (Medium)', 'txtdomain'),
'inline_style' => $inline_css
]);
});
Before
After
Large
/**
* Adds custom Gutenberg Image Block Style "Circle (Large)" (David Stockdale).
*/
add_action('init', function() {
$height_and_width = '35em';
$inline_css = '.is-style-circle-large img {
object-fit: cover;
width: '. $height_and_width . ';
height: ' . $height_and_width . ';
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
-o-border-radius: 50%;
}';
register_block_style('core/image', [
'name' => 'circle-large',
'label' => __('Circled (Large)', 'txtdomain'),
'inline_style' => $inline_css
]);
});