Media · Gutenberg
Image Mask block for WordPress
Display an image through a decorative shape mask — circle, hexagon, blob, star, diamond, cross, heart, or pentagon.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Display an image through a decorative shape mask — circle, hexagon, blob, star, diamond, cross, heart, or pentagon.
Inspector panels on this block: Image, Shape, Shape Border, Shadow & Hover, Caption, Link. Those titles come from index.js, not from a shared template.
Behavior controls: “Image Focus Point” options: Center, Top, Bottom, Left, Right; “Hover Effect” options: Zoom In, Zoom Out, Rotate, None; “Caption Align” options: Left, Center, Right.
Where to find it
Gutenberg inserter → Media → search “Image Mask” (block name `blockenberg/image-mask` in block.json). Style it in the sidebar after insert.
How to use Image Mask block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Image Mask”, insert it. Category: Media.
- Configure inspector controls that exist on this block. Open Image. Set “Alt Text”, “Image Focus Point”, “Mask Shape”, “Size (px)”.
- Check the published page. The view script reads HTML data attributes: data-hover, data-scale. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Alt Text | Text field in the inspector. Saved as `imageAlt`. |
| Image Focus Point | Select control; the chosen value is saved on the block. Options: Center; Top; Bottom; Left; Right; Top Left; Top Right; Bottom Left; Bottom Right. block.json default: center center. Saved as `objectPosition`. |
| Mask Shape | Select control; the chosen value is saved on the block. block.json default: circle. Saved as `shape`. |
| Size (px) | Numeric range control in the inspector. Range 80–800. block.json default: 320. Saved as `size`. |
| Rotation (°) | Numeric range control in the inspector. Range -180–180. block.json default: 0. Saved as `rotation`. |
| Show Border Ring | On/off toggle in the inspector. Off by default. Saved as `showBorder`. |
| Border Width (px) | Numeric range control in the inspector. Range 1–20. block.json default: 4. Saved as `borderWidth`. |
| Border Offset (px) | Numeric range control in the inspector. Range 0–40. block.json default: 8. Saved as `borderOffset`. |
| Drop Shadow | On/off toggle in the inspector. On by default. Saved as `showShadow`. |
| Shadow Intensity (%) | Numeric range control in the inspector. Range 5–70. block.json default: 30. Saved as `shadowIntensity`. |
| Hover Effect | Select control; the chosen value is saved on the block. Options: Zoom In; Zoom Out; Rotate; None. block.json default: zoom. Saved as `hoverEffect`. |
| Hover Scale (%) | Numeric range control in the inspector. Range 80–150. block.json default: 108. Saved as `hoverScale`. |
| Transition (ms) | Numeric range control in the inspector. Range 0–1000. block.json default: 400. Saved as `transitionDuration`. |
| Show Caption | On/off toggle in the inspector. Off by default. Saved as `showCaption`. |
| Caption Text | Text field in the inspector. Saved as `caption`. |
| Caption Align | Select control; the chosen value is saved on the block. Options: Left; Center; Right. block.json default: center. Saved as `captionAlign`. |
| Caption Size (px) | Numeric range control in the inspector. Range 10–24. block.json default: 14. Saved as `captionSize`. |
| Link URL | Text field in the inspector. Saved as `linkUrl`. |
| Open in New Tab | On/off toggle in the inspector. Off by default. Saved as `linkNewTab`. |
| Border Ring Color | Color control in the inspector. block.json default: #6c3fb5. Saved as `borderColor`. |
| Shadow Color | Color control in the inspector. block.json default: #000000. Saved as `shadowColor`. |
| Caption Color | Color control in the inspector. block.json default: #374151. Saved as `captionColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-hover, data-scale.
When this is the right block
- Display an image through a decorative shape mask — circle, hexagon, blob, star, diamond, cross, heart, or pentagon — that is the job of Image Mask, not a generic content block.
- Use it when you need the editor control labeled “Alt Text”, which exists on this block’s inspector.
- It matches pages about image, mask, shape.
- Inserter grouping: video, animation, and rich media sections.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Image Mask block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Image Mask”. It sits under Media. After insert, open Image and set “Alt Text”, “Image Focus Point”, “Mask Shape”, “Size (px)”.
What makes Image Mask different from other Blockenberg blocks?
Display an image through a decorative shape mask — circle, hexagon, blob, star, diamond, cross, heart, or pentagon. Inspector labels on this block include “Alt Text”, “Image Focus Point”, “Mask Shape”, “Size (px)”.
Is the Image Mask Gutenberg block free?
Yes. Image Mask ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Image Mask to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Shape, Shape Border, Shadow & Hover).
Related media blocks
Hotspot Image
Image with interactive hotspot pins that reveal tooltips on hover or click.
Image Accordion
Expandable image panels that stretch open on hover or click — ideal for showcasing portfolios, services, or locations.
Image Box
A clickable image card with overlay title, hover effects, and a link.
Image Filter
Upload an image and apply real-time CSS filter adjustments — brightness, contrast, saturation, hue, blur, sepia, grayscale, and more. Choose from presets or build a custom look. Optionally expose live filter sliders to visitors.
Image Magnifier
Image with a zoom lens that follows the cursor on hover — perfect for product photography and detail shots.
Image Overlap Text
Creative editorial layout where a large image bleeds into an adjacent text column with decorative accents.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Image Mask from the Gutenberg inserter.