Block Enhancements – Extended styling for the Block Editor
Block Enhancements adds powerful design options to core Gutenberg blocks, so you don’t need to install heavy custom block libraries. It’s the easiest way to make your existing blocks more flexible and responsive while keeping your site fast and clean. All dynamic styles are rendered in the document
Block Enhancements adds powerful design options to core Gutenberg blocks, so you don’t need to install heavy custom block libraries. It’s the easiest way to make your existing blocks more flexible and responsive while keeping your site fast and clean. All dynamic styles are rendered in the document head instead of inline styles. If you deactivate the plugin, all customized styles are removed, and no leftover styles will affect your site. Unlike other similar plugins, this plugin is lightweight. It only loads what you need. You can enable or disable individual features per block type from the plugin’s settings page.
It works with all Gutenberg-ready themes, however, the with-icon feature uses the CSS pseudo ::before to add icons with the mask-image CSS property. It may conflict with other plugins or themes that use the same technique.
Key Features
- Add icons to buttons, headings, lists, navigation blocks (built-in 3000+ icon library or custom SVGs).
- Set responsive dimensions: padding, margin, and block spacing per device.
- Adjust responsive typography: font size, weight, line height, letter spacing per device.
- Apply 2D transforms (translate, rotate, skew, scale) per device with hover styles.
- Add box-shadow and text-shadow with hover state styles.
- Customize text and background colors with hover styles.
- Control responsive text alignment for Group, Columns, and Column blocks.
- Use transitions for smooth hover style changes.
- Define responsive CSS positions (relative, absolute, sticky, static) with custom offsets.
How responsive styles work
Responsive styles are applied per device mode: Desktop, Tablet, and Mobile. When you edit a style for a block for the first time, the current device mode becomes the source, and the other modes will automatically inherit those styles.
For example, if you set styles in Desktop mode first, Tablet and Mobile will inherit the Desktop styles by default. If you want different styles for Tablet or Mobile, switch to that mode and adjust the settings there. The same behavior applies if you start editing in Tablet or Mobile mode. Each device mode can be customized independently once it has been edited.
