# Block Enhancements – Extended styling for the Block Editor

## Description

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

By default, the breakpoints are:

- Desktop: 1024px
- Tablet: 768px

If your theme or another plugin uses different breakpoints, you can change the defaults using the following filter:

```
    apply_filters( 'block_enhancements_get_breakpoints', [
      'sm' => [
        'breakpoint' => '576px',
        'mediaQuery' => '',
      ],
      'md' => [
        'breakpoint' => '768px',
        'mediaQuery' => '@media (min-width: 768px){##CONTENT##}',
      ],
      'lg' => [
        'breakpoint' => '1024px',
        'mediaQuery' => '@media (min-width: 1024px){##CONTENT##}',
      ],
    ] );
```

### Common use cases

1. Add icons to blocks (button, heading, list, navigation).
2. Change spacing (padding, margin, block spacing) per device for button, group, row, grid, columns, gallery blocks.
3. Change typography (font size, font weight, line-height, letter spacing) per device.
4. Change text-alignment for group blocks per device.
5. Add 2D transforms (translate, scale, rotate, skew) hover effect for buttons, images, heading, group, etc.
6. Add box-shadow, text-shadow with hover styles.
7. Change text color, background color on mouse hover.

### How to use a feature

1. Select the block in the Block Editor.
2. Choose the Styles tab from the inspector settings.
3. Click on the plus (+) icon of the Block Enhancements panel to choose a feature and input its settings.
4. You can make a feature visible by default in the Block Enhancements panel from Settings → Block Enhancements → Manage Features.
5. If a feature does not appear, go to Settings → Block Enhancements → Manage Features and enable that feature for your block type.
6. For responsive features, switch between device modes (Desktop, Tablet, and Mobile) to input settings for each screen size.
7. The responsive text alignment settings are available in the block toolbar, not in the inspector settings.
8. See the video tutorials and the screenshots for more details.

### FAQs

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

#### Is it compatible with Full Site Editing?

Yes. It works perfectly in the Site Editor and with all block themes.

#### 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 ‘Wrap a around the text to keep it on a single line.’ in the ‘With icon’ panel. Just turn it on to make the text work properly.

## Screenshots

## Installation

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

## Changelog

#### 1.2.12

_Release Date – 14 May 2026_

- Improved – Updated inspector control styles
- Improved – Added a visualizer for padding and margin
- Added – New settings to choose which features are displayed by default in the Block Enhancements panel

#### 1.2.11

_Release Date – 19 January 2026_

- Improved – Added a setting to wrap list item text in a span to prevent it from breaking into multiple lines.

#### 1.2.10

_Release Date – 12 January 2026_

- Improved – Added sanitize_callback to settings field registration
- Added – Removed settings fields on uninstall

#### 1.2.9

_Release Date – 22 November 2025_

- Fixed – Missing styles for classic/hybrid themes that include template files (e.g., templates/index.html), which caused WordPress to detect them as block themes.

#### 1.2.0

_Release Date – 13 January 2024_

- Added – Responsive settings for font size, line height, font weight, and letter spacing
- Updated – Update SDK

#### 1.0.0

_Release Date – 09 April 2022_