Add inverted radius effects to your Gutenberg blocks for unique design possibilities.

• Easy Integration: Simple controls in the block editor sidebar
• Multiple Shape Types: Choose from various inverted radius shapes
• Customizable Dimensions: Fine-tune size, X, and Y positioning
• Block Support: Works with Group, Cover, and Image blocks
• Real-time Preview: See changes instantly in the editor
• Modern CSS: Uses CSS mask properties for smooth rendering

• WordPress 6.7 or higher
• PHP 7.4 or higher
• Modern browser with CSS mask support

1. Download the plugin files
2. Upload to /wp-content/plugins/inverted-radius/ directory
3. Activate the plugin through the 'Plugins' screen in WordPress

1. Go to Plugins → Add New
2. Upload the plugin zip file
3. Activate the plugin

1. Edit a Block: Select any Group, Cover, or Image block in the editor
2. Open Sidebar: Look for the "Border" section in the block settings sidebar
3. Configure Inverted Radius:
   • Select a shape type
   • Adjust the size using the dimension control
   • Fine-tune X and Y positioning
4. Preview: See the changes in real-time in the editor
5. Publish: The effects will be applied on the frontend

• Group Blocks: Perfect for creating unique content containers
• Cover Blocks: Add distinctive frames to your hero sections
• Image Blocks: Create eye-catching image frames

The plugin generates CSS mask properties based on your settings:

.has-inverted-radius {
  --mask: [generated mask value];
  mask: var(--mask);
  -webkit-mask: var(--mask);
}

inverted-radius/
├── src/
│   ├── controls/
│   │   ├── dimension-control.js
│   │   └── inverted-radius-controls.js
│   ├── utils/
│   │   ├── generate-mask.js
│   │   └── icons.js
│   ├── index.js
│   └── index.scss
├── build/
├── inverted-radius.php
└── readme.txt

This plugin is licensed under the GPL-2.0-or-later license.

For support, feature requests, or bug reports, please create an issue in the plugin repository.

Developed by blocklayouts for the WordPress community.