The WordPress editor allows you to define custom styles for individual blocks. It’s a great way to get creative with the design of your site—and is easy to accomplish with a function and some CSS.
Given the value that images bring to a piece of content, they are an ideal target for these custom block styles. However, adding just a bit of pizzazz can go a long way for your blog post or page.
Image Block
The image block is available in the WordPress Block Editor, and currently, it has two default styles: Default and Rounded.
To add a custom style to the image block, all you need to do is register it by placing this code in your theme’s functions.php file:
// Register custom style for image block.
register_block_style(
'core/image',
array(
'name' => 'inner-border',
'label' => __( 'Inner Border', 'theme-name' ),
)
);
Code language: PHP (php)Once you register your custom block style, you can control the appearance by targeting it with CSS. In this case, an inner white border 1px thick will be offset by 20px and added to your image.
/* Styles
--------------------------------------------- */
.is-style-inner-border img {
outline: 1px solid #fff;
outline-offset: -20px;
}
Code language: CSS (css)An example of the inner border block style can be found in the Avant-Garde WordPress theme. View the demo or download at WordPress.org.
