How to Add Image Masking in Gutenberg

his 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.