Styling the WordPress Image Block

Add some style to your images with CSS

If you are using the WordPress block editor, you may have noticed the image block is somewhat void of any styling options. The good news is you can easily change this with a small amount of CSS. I broke down the ways you can approach styling the image block into three scenarios. After you figure out which scenario works best for you, you can grab the CSS from the example photos shown below and get creative.

Scenario One

You want to apply the style globally to all of your images

Unless you have something like a photography portfolio, this might not be the best option. The reason is when you apply a global image block style, it will also affect any logos or icons that are using the image block.

If you want to apply a global image block style everywhere, in your child theme CSS file or using the Customizer Additional CSS area, you can add the following class and your custom styles.

*Note – only using .wp-block-image will apply the style to the image block figure element and not the photo itself. Adding the descendant selector img will apply the effect to the edges of the photo itself.

/* this example adds an offset solid drop shadow and a thin border */
.wp-block-image img {
box-shadow: 15px 15px 0px #d3dce5;
border: 1px solid #d3dce5;
}

Scenario TWO

You want to apply the style globally to your images, but not certain images

Let’s say like I mentioned above, you have some affiliate logos that you do not want to have the global image block style. You can set the global style and then add a second class that will remove the global image block style as needed.

Based on the example below, my-class img will need to be added to the Image Block’s Advanced / CSS Class field. This will remove the box shadow and border on any image blocks you add it to. See the image below as reference where to add it, make sure you do not have a period before it, as in my-class img

Image Block CSS
/* let's say this is your global image block css */
.wp-block-image img {
box-shadow: 15px 15px 0px #d3dce5;
border: 1px solid #d3dce5;
}

/* this is the css that will remove the global image block css */
.wp-block-image.my-class img {
box-shadow: none;
border: none;
}

*For certain value based properties you can also use 0; instead of none; to remove the style.

Scenario THREE

You only want to apply the style to certain image blocks

If you only want to apply your image block style to select images, this is the best method. Simply create a CSS class of any name with the descendant selector img and then add that name to the Image Block’s Advanced / CSS Class field.

/* change my-class to any name you like */
/* add it to the image block advanced css class */
.my-class img {
border: 1px solid #d3dce5;
}

Image Block Styling Examples

The images below all use Scenario Three as each one has it’s own CSS class.

Solid color offset drop shadow

Image Block Styling
.my-class-1 img {
box-shadow: 15px 15px 0px #d3dce5;
}

Opaque drop shadow

Image Block Styling
.my-class-2 img {
box-shadow: 8px 8px 14px rgba(100, 100, 100, 0.5);
}

Solid thick border

Image Block Styling
.my-class-3 img {
border: 10px solid #445e79;
}

Solid thin border with rounded corners

Image Block Styling
.my-class-4 img {
border: 1px solid #445e79;
border-radius: 10px;
}

Top and bottom borders

Image Block Styling
.my-class-5 img {
border-top: 10px solid #445e79;
border-bottom: 10px solid #445e79;
}

Left border and top right rounded corner

Image Block Styling
.my-class-6 img {
border-radius: 0px 60px 0px 0px;
border-left: 10px solid #445e79;
}

Uneven rounded corners

Image Block Styling
.my-class-7 img {
border-radius: 20px 100px;
}

Photo by Harli Marten on Unsplash


Feel Free to Share