How to Add Image Masking in Gutenberg

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 our project. Read our affiliate disclosure.
Akbar Padma

Akbar Padma

Akbar is a WordPress expert and a writer staff at WPPagebuilders. He mainly writes about Gutenberg, Elementor, Divi, and other WordPress page builders.
Want to save yearly expense up to $219? why not?

Leave a Comment