Descripció

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

Common use cases

Add icons to blocks (button, heading, list, navigation).
Change spacing (padding, margin, block spacing) for button, group, row, grid, columns, gallery blocks per device.
Change typography (font size, font weight, line-height, letter spacing) per device.
Change text-alignment for group blocks per device. For example text-align center on mobile but text-align left on the desktop.
Add 2D transforms with hover styles.
Add box-shadow, text-shadow with hover styles.
Change text color, background color on mouse hover.

How to use a feature

Select the block in the Block Editor.
Choose the style tab from the inspector settings.
Click on the plus (+) icon of the Block Enhancements panel to choose the feature and input your settings.
If the feature does not show up, go to the setting page (Settings Block Enhancements) to add the feature to your block type.
To input settings for responsive features, you have to switch to between device mode (Desktop/Tablet/Mobile).
The responsive text alignment settings is on the block toolbar not in the inspector settings.
See the video tutorials and the screenshots for more details.

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 – Build custom layouts and blocks visually in the Block Editor without needing a code editor, using only core blocks and native Gutenberg features.
Meta Field Block – A block to display custom fields as blocks on the front end. It supports custom fields for posts, terms, users, and setting fields. It can also be used in the Query Loop block.
SVG Block – A block to display SVG images as blocks. Useful for images, icons, dividers, and buttons. It allows you to upload SVG images and load them into the icon library.
Icon separator – A tiny block just like the core/separator block but with the ability to add an icon.
Breadcrumb Block – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce.
Counting Number Block – A block to display numbers with a counting effect
Better YouTube Embed Block – A block to solve the performance issue with embedded YouTube videos. It can also embed multiple videos and playlists.

The plugin is developed using @wordpress/scripts.

Captures

Add an icon to a heading
Add an icon to a list
Add an icon to a button
Add responsive settings for font size, line height, font weight, and letter spacing
Add responsive text alignment to a group
Add text shadow to a group
Add box shadow with hover style to a group
Add color with hover style to a group
Add transform with hover style to a group
Add a feature to blocks
Add an icon to categories

Instal·lació

Upload the plugin files to the /wp-content/plugins/block-enhancements directory, or install the plugin through the WordPress plugins screen directly.
Activate the plugin through the ‘Plugins’ screen in WordPress

PMF

What problem does this plugin solve?: It adds advanced styling controls to Gutenberg core blocks, so you can customize existing core blocks further without heavy block libraries.
When should I use this plugin?: When you want more advanced features on core blocks, without installing new ones.
Does it affect performance?: No. Each feature loads only when used, keeping your site fast, light, and clean.
Who can use it?: Anyone — designers, developers, or content creators familiar with the Block Editor.
Is it compatible with Full Site Editing?: Yes. It works perfectly in the Site Editor and with all block themes.
Does it support my theme?: It supports any Gutenberg-ready theme.
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.

Ressenyes

skylabb 22 de setembre de 2025 1 resposta

This plugin is a great idea and I really want to like it. However, it leaves a few things out much to be desired. Gutenberg blocks lack responsive features severely. I was hoping this plugin can fill in the big gaps but it doesn’t. I’m not seeing anything from this plugin for setting dimensions for various screen sizes. Under typography, it doesn’t offer any more that Gutenberg native settings. There’s Responsive Text Alignment feature but I’m not seeing any settings in block control panel. Other features Block Enhancements offers, shadow, transform, transitions, position are more advanced features you don’t really need that often.

onetrev 26 de juliol de 2024 1 resposta

I’ve followed this plugin for a while and have long thought it was a great idea. It’s also executed perfectly! It has sensible default options set, but I love that it gives you control over which blocks get the enhancements. With even more power and flexibility in core blocks now, this plugin is even more useful today. Without making this plugin too bloated, maybe the one nice thing to add would be the ability to “stretch” your links so the entire block is clickable. This is really needed for Group, Cover, and similar blocks and unfortunately this feature is still missing from these core blocks.

Timofey Drozhzhin 6 de maig de 2024 1 resposta

This plugin extends Gutenberg blocks in the most organic way! No bloatware, no heavy dependencies, just adds the missing features to the existing Gutenberg blocks using the existing UI. One of my favorite Gutenberg plugins to date!

illartista 19 de octubre de 2023 1 resposta

Great plugin. I request you to remove the presets, they are not useful and good looking.

Orhan Colak 23 de abril de 2023 1 resposta

Only compatible with FSE themes. This should be noted in the plugin’s description.

Gyurmey 13 de febrer de 2023 1 resposta

Thanks for making it.

Llegiu totes les 6 ressenyes

Col·laboradors i desenvolupadors

«Gutenberg Block Enhancements – Icon, Responsive Spacing, Typography, Alignment, Shadow, Transform, Transition, Hover Style» és programari de codi obert. La següent gent ha col·laborat en aquesta extensió.

Phi Phan

Traduïu «Gutenberg Block Enhancements – Icon, Responsive Spacing, Typography, Alignment, Shadow, Transform, Transition, Hover Style» a la vostra llengua.

Interessats en el desenvolupament?

Navegueu pel codi, baixeu-vos el repositori SVN, o subscriviu-vos al registre de desenvolupament per fisl de subscripció RSS.

Registre de canvis

1.2.8

Release Date – 15 October 2025

Added – responsive padding, margin, and block spacing options to blocks for better tablet/mobile design control.

1.2.7

Release Date – 11 August 2025

Added – The new with-position feature. Thanks to @hozefasmile for the suggestion.
Fixed – Issue where the icon on the left for the core “Read More” block was not working.
Improved – Added the ‘block_enhancements_get_breakpoints’ hook to change the breakpoints beside getting the value from the Content Blocks Builder plugin.

1.2.6

Release Date – 24 October 2024

Updated – SDK to implement minor UI changes and remove deprecated code
Improved – Replaced classnames with clsx
Updated – Tested compatibility with WP 6.7 and set minimum requirement to WP 6.5

1.2.5

Release Date – 18 June 2024

Fixed – Dirty state when wrapping text is enabled on buttons with icon
Fixed – Buttons in a navigation with icon
Improved – Make the selector of the navigation item more specific than the submenu’s

1.2.4

Release Date – 17 June 2024

Added – Support the with-icon feature on core/list-item, core/navigation-link, core/navigation, core/navigation-submenu
Fixed – Style issues on the color dropdown control and vertical spacings
Improved – Get responsive settings from CBB

1.2.3

Release Date – 06 May 2024

Fixed – The custom gap between the icon and the text on buttons not working

1.2.2

Release Date – 28 April 2024

Updated – Icon Library
Removed – Upload SVGs to the media library

1.2.1

Release Date – 31 March 2024

Fixed – When front-end forms are submitted to admin-post.php, nopriv users are redirected to the login page.
Refactor – Get/set device preview

1.2.0

Release Date – 13 January 2024

Added – Responsive settings for font size, line height, font weight, and letter spacing
Added – Allow uploading SVG files and load them into the icon library
Updated – Increase ‘Requires at least’ to 6.3
Updated – Update SDK

1.1.20

Release Date – 05 January 2024

Fixed – Issue: the nested button blocks get the style from their parent block

1.1.19

Release Date – 27 September 2023

Updated – Allow adding style on multiple selected blocks
Updated – Remove deprecated warning

1.1.18

Release Date – 11 September 2023

DEV – Only core lists can have icons for nested lists.

1.1.17

Release Date – 09 September 2023

DEV – Support with-icon for nested list of list blocks
DEV – Update “Requires at least 6.2” for using the new HTML API

1.1.16

Release Date – 26 August 2023

DEV – Support prefers-reduced-motion

1.1.15

Release Date – 13 August 2023

FIX – The custom styles have not been loaded in classic themes

1.1.14

Release Date – 08 August 2023

DEV – Redesign the setting page
DEV – Add feature classes to all dynamic blocks
DEV – Add icon to core/categories, core/latest-posts, core/post-title, core/query-title, core/comment-title

1.1.13

Release Date – 14 June 2023

DEV – Add custom shadow presets
DEV – Using ToolsPanel instead of PanelBody for more clean UI

1.1.12

Release Date – 17 May 2023

DEV – Add preset shadows to the with-shadow feature

1.1.11

Release Date – 08 April 2023

DEV – Move all settings to the styles tab

1.1.10

Release Date – 11 March 2023

DEV – Update icon library
DEV – Refactor namespace

1.1.9

Release Date – 19 February 2023

FIX – Remove the empty class attribute from blocks
FIX – Remove empty spaces when adding class attribute

1.1.8

Release Date – 10 February 2023

DEV – Add the with-color feature with the hover state
DEV – Refactor code, combine all separate styles into one

1.1.7

Release Date – 20 January 2023

DEV – Add hover state style builder to shadows, transform
DEV – Add transition feature

1.1.6

Release Date – 06 November 2022

DEV – Clean up the default value for more cleaning markup

1.1.5

Release Date – 27 October 2022

DEV – Allow custom ColorGradientControl clearable
FIX – Add a fallback value for the withIcon feature

1.1.4

Release Date – 12 October 2022

FIX – Only load CSS files when necessary

1.1.3

Release Date – 08 October 2022

DEV – Add the withIcon feature to the read more block
DEV – Refactor the icon library

1.1.2

Release Date – 18 September 2022

FIX – Compatibility issue with the Gutenberg plugin
DEV – Load localization

1.1.1

Release Date – 28 July 2022

FIX – Check whether having an icon or not to improve performance

1.1.0

Release Date – 27 July 2022

FIX – Edit text after wrapping it inside an element
DEV – Allow double click to insert icon with the withIcon feature
FIX – Convert inline style to style object
REFACTOR – Refactor the withIcon feature

1.0.12

Release Date – 20 Jun 2022

DEV – Allow uploading SVG icons for the withIcon feature

1.0.11

Release Date – 08 May 2022

REFACTOR Update SDK

1.0.10

Release Date – 08 May 2022

DEV – Add responsive text-alignment feature

1.0.9

Release Date – 02 May 2022

DEV – Add text-shadow feature

1.0.8

Release Date – 02 May 2022

FIX – Add a setting to prevent text from breaking when there is an inline tag in the text

1.0.7

Release Date – 30 April 2022

DEV – Use nanoid instead of useInstanceId
DEV – Update components’ style

1.0.6

Release Date – 27 April 2022

DEV – Add the transform feature

1.0.5