Enhance Gutenberg blocks with practical features such as icons, color, shadow, transform, transition, responsive typography, responsive text alignment, hover style, etc.
Unlike other similar plugins, this plugin is fast, lightweight and clean. It only loads what you need. You can choose which features to apply to specific blocks through the settings page.
It works with all 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 an icon to button, heading, or list blocks from a library with more than 3000 icons, or upload your custom SVG image.
Add box-shadow
Add text-shadow
Add 2D transform (translate, rotate, skew, scale)
Add hover state style for shadow, transform, text-color, background-color
Add responsive text alignment. It’s useful for ‘container’ blocks such as ‘core/group’, ‘core/columns’, ‘core/column’ and/or you want for example text-align center on mobile but text-align left on the desktop
Add transition
Add responsive font size, font weight, line height, and letter spacing based on media queries
☐ More features will be added soon.
Video tutorials
How to customize a core button in Gutenberg:
Please help this plugin grow by reporting issues and giving suggestions.
If this plugin is useful for you, please do a quick review and rate it on WordPress.org to help us spread the word. I would very much appreciate it.
Please check out my other plugins if you’re interested:
Content Blocks Builder – A tool to create blocks, patterns or variations easily for your site directly on the Block Editor.
Meta Field Block – A block to display a meta field or an ACF field as a block. It can also be used in the Query Loop block.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon to it.
SVG Block – A block to insert inline SVG images easily and safely. It also bundles with more than 3000 icons and some common non-rectangular dividers.
Counting Number Block – A block to display a number that has the number-counting effect.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data.
It adds more features to make core blocks fit more real-world use cases.
When should we use this plugin?
When you want more advanced features on core blocks, but don’t want any third-party blocks from a heavy block library.
Why do you need this plugin?
It’s super easy to use and lightweight. It only loads what you need.
Who needs this plugin?
Anyone can use this plugin.
Why does the text of the block break when I add an icon to it?
It is probably because you added an inline element such as bold, italic, highlight, etc. in the text. To fix it, there is a toggle setting named ‘Don’t wrap text across lines.’ in the ‘With icon’ panel. Just turn it on to make the text work properly.
