How to Add Image Masking in Gutenberg

Updated: April 14, 2022

This may sound cliché and overused, that an image worth a thousand words. Nevertheless, we have admitted that image has that much power. In WordPress, we have Gutenberg, a block-based editor that we can use to create posts and pages. In Gutenberg, you can easily add an image to your content. But the problem is Gutenberg doesn’t offer many image customization options, especially when we want to add image masking. But don’t worry, WordPress has some plugins that can provide you to do that.

In this article, we would like to show you a tutorial on how to add image masking in Gutenberg using Kadence Blocks, a plugin that offers extra Gutenberg blocks to extend Gutenberg’s capabilities. One of the blocks offered by Kadence Blocks is Advanced Image, which offers setting options to add image masking. It offers 7 default mask shapes as follows:

  • Circle
  • Diamond
  • Hexagon
  • Rounded
  • Blob 1
  • Blob 2
  • Blob 3

You can also use a custom shape by creating an SVG file and then upload it.

How to Add Image Masking in Gutenberg Using Kadence Blocks

The first thing you have to do is install the Kadence Blocks plugin. On your WordPress Dashboard, go to Plugins > Add New.

Type Gutenberg Blocks by Kadence Blocks on the searching box and then click Install Now button.

Next, activate the plugin by clicking on the Activate button.

Next, we will start to use this plugin to add image masking in Gutenberg. Start to create new content. On your Dashboard go to Posts > Add New if you want to create a new post, and go to Pages > Add New if you want to create a new page.

When you’re entering Gutenberg, you can find the Advanced Image block by clicking on the plus icon (+) Add Block. Upon selecting the Advanced Image block, you’ll be prompted to select the image from your media library or via URL. In this tutorial, we would like to select the image from the media library. Click the Select Image button and then upload your image by clicking on Media Libary on the library window. If you don’t have a file in your media library, you can upload your image by clicking on the Upload files button.

On the right panel, you will see the Block tab. Scroll down and you will see some setting blocks. Find Mask Settings and click the block. Choose your favorite mask shape by clicking on the drop-down menu.

Well, it’s done. You can publish your post/ page once your editing is finished.

The Bottom Line

The default Image block of Gutenberg comes with minimum styling options. There is no option to add masking to or other advanced styling option to further decorate your image. The Advanced Image block by Kadence Blocks gives you more options to style up your image, including adding masking. You can choose one of 7 mask shapes or use your own shape by creating an SVG file.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era.

Hello.

How long have you been using WordPress? If you are an old WordPress user, then you have been a witness how WordPress has evolved massively. It has gone from a merely blogging tool into a comprehensive website builder. You can now use WordPress to create any type of website. From e-commerce website, LMS, listing website, membership website, to social media website.

Do you know what’s more interesting?

You can create your website with WordPress without touching a single line of code. At WP Pagebuilders, we write a lot about how to get the most out of WordPress in the no-code era. Subscribe and be first to know our newest content.