Title: Block Enhancements – Extended styling for the Block Editor Author: Phi Phan Published: 9. apríla 2022 Last modified: 20. januára 2026 --- Vyhľadať plugin ![](https://ps.w.org/block-enhancements/assets/banner-772x250.png?rev=2716768) ![](https://ps.w.org/block-enhancements/assets/icon.svg?rev=2707439) # Block Enhancements – Extended styling for the Block Editor Od [Phi Phan](https://profiles.wordpress.org/mr2p/) [Stiahnuť](https://downloads.wordpress.org/plugin/block-enhancements.1.2.11.zip) * [Podrobnosti](https://sk.wordpress.org/plugins/block-enhancements/#description) * [Recenzie](https://sk.wordpress.org/plugins/block-enhancements/#reviews) * [Inštalácia](https://sk.wordpress.org/plugins/block-enhancements/#installation) * [Vývoj](https://sk.wordpress.org/plugins/block-enhancements/#developers) [Podpora](https://wordpress.org/support/plugin/block-enhancements/) ## Popis **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. 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##}', ], ] ); ``` This allows you to align responsive behavior with your theme’s breakpoint system. ### Common use cases 1. Add icons to blocks (button, heading, list, navigation). 2. Change spacing (padding, margin, block spacing) for button, group, row, grid, columns, gallery blocks per device. 3. Change typography (font size, font weight, line-height, letter spacing) per device. 4. Change text-alignment for group blocks per device. For example text-align center on mobile but text-align left on the desktop. 5. Add 2D transforms with hover styles. 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 style tab from the inspector settings. 3. Click on the plus (+) icon of the Block Enhancements panel to choose the feature and input your settings. 4. If the feature does not show up, go to the setting page (Settings Block Enhancements) to add the feature to your block type. 5. To input settings for responsive features, you have to switch to between device mode (Desktop/Tablet/Mobile). 6. The responsive text alignment settings is on the block toolbar not in the inspector settings. 7. 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](https://wordpress.org/support/plugin/block-enhancements/reviews/#new-post) 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](https://wordpress.org/plugins/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](https://wordpress.org/plugins/display-a-meta-field-as-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](https://wordpress.org/plugins/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](https://wordpress.org/plugins/icon-separator)** – A tiny block just like the core/separator block but with the ability to add an icon. * **[Breadcrumb Block](https://wordpress.org/plugins/breadcrumb-block)** – A simple breadcrumb trail block that supports JSON-LD structured data and is compatible with WooCommerce. * **[Counting Number Block](https://wordpress.org/plugins/counting-number-block)**– A block to display numbers with a counting effect * **[Better YouTube Embed Block](https://wordpress.org/plugins/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. The source code is available in the trunk branch. ## Obrázky * [[ * 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 ## Inštalácia 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 ## Časté otázky ### 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 ‘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. ## Recenzie ![](https://secure.gravatar.com/avatar/951d8d04ea8806617e10722e88d825f2f76559bf5e34e8ef2181ffd91d69e304? s=60&d=retro&r=g) ### 󠀁[Doesn’t Work Consistently](https://wordpress.org/support/topic/doesnt-work-consistently-2/)󠁿 [mliving](https://profiles.wordpress.org/mliving/) 20. januára 2026 1 reply I’ve been playing with this plugin and it doesn’t seem to work consistently across all breakpoints. Sometimes a setting applied on mobile also applies on desktop. Sometimes the setting has no effect at all regardless of the breakpoint being set. Custom styling breakpoint is the only thing holding me back from going all in with WordPress. ![](https://secure.gravatar.com/avatar/cbedb9fe7caa2eae30b6d21614ca98124d474155a8efada5ecfd422989da93fc? s=60&d=retro&r=g) ### 󠀁[Excellent Plugin](https://wordpress.org/support/topic/excellent-plugin-9775/)󠁿 [Michael Galli](https://profiles.wordpress.org/galliweb/) 3. januára 2026 1 reply Thank you for that plugin – it’s so useful and just works. I really like your approach. Keep it up. ![](https://secure.gravatar.com/avatar/d5d85d79f79baba4f5b9a619c51000a67c90c4a228473a9b3d30773859ec200e? s=60&d=retro&r=g) ### 󠀁[Great Idea but needs more essential features](https://wordpress.org/support/topic/great-idea-but-needs-more-essential-features/)󠁿 [skylabb](https://profiles.wordpress.org/skylabb/) 22. septembra 2025 1 reply 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. ![](https://secure.gravatar.com/avatar/dee401e1fe480a559f65112ceee2d7a9d2f95dfebde8d00eebc9697c6fe63a80? s=60&d=retro&r=g) ### 󠀁[Excellent idea and works great](https://wordpress.org/support/topic/excellent-idea-and-works-great/)󠁿 [onetrev](https://profiles.wordpress.org/onetrev/) 26. júla 2024 1 reply 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. ![](https://secure.gravatar.com/avatar/cc38ff50e795ebb0c9031928bf9ca8556c3c34a6add2de4ba03918830f3c683a? s=60&d=retro&r=g) ### 󠀁[This is a gem!](https://wordpress.org/support/topic/this-is-a-gem/)󠁿 [Timofey Drozhzhin](https://profiles.wordpress.org/drtimofey/) 6. mája 2024 1 reply 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! ![](https://secure.gravatar.com/avatar/b5ffdacfd05a196fad09254736e9bf4bf96fc6ad7e9f2f5461a333db90f14380? s=60&d=retro&r=g) ### 󠀁[Fanctastic addon for core Gutenberg blocks](https://wordpress.org/support/topic/fanctastic-addon-for-core-gutenberg-blocks/)󠁿 [illartista](https://profiles.wordpress.org/illartista/) 19. októbra 2023 1 reply Great plugin. I request you to remove the presets, they are not useful and good looking. [ Prečítať všetkých 8 recenzií ](https://wordpress.org/support/plugin/block-enhancements/reviews/) ## Prispievatelia a vývojári “Block Enhancements – Extended styling for the Block Editor” je softvér s otvoreným zdrojovým kódom. Do tohto pluginu prispeli nasledujúci ľudia. Prispievatelia * [ Phi Phan ](https://profiles.wordpress.org/mr2p/) [Preložiť „Block Enhancements – Extended styling for the Block Editor“ do vašho jazyka.](https://translate.wordpress.org/projects/wp-plugins/block-enhancements) ### Máte záujem o vývoj? [ Prehľadávajte zdrojový kód](https://plugins.trac.wordpress.org/browser/block-enhancements/), preskúmajte [SVN repozitár](https://plugins.svn.wordpress.org/block-enhancements/), alebo sa prihláste na odber [vývojárskeho logu](https://plugins.trac.wordpress.org/log/block-enhancements/) cez [RSS](https://plugins.trac.wordpress.org/log/block-enhancements/?limit=100&mode=stop_on_copy&format=rss). ## Zoznam zmien #### 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 setttings 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. * Fixed – Removed the box-shadow from wp-block-button so it only applies to wp- block-button__link. * Improved – Allowed loading more SVGs from the media library via a hook #### 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 _Release Date – 27 April 2022_ * DEV – Add settings page to select which blocks should be allowed to add features * FIX – Make page ‚dirty‘ on page load #### 1.0.4 _Release Date – 19 April 2022_ * DEV – Load styles for the iframe editor #### 1.0.3 _Release Date – 16 April 2022_ * DEV – Add the ‚withShadow‘ feature * DEV – Add shortcut keys to the icon library modal, focus on the search box when opening the modal #### 1.0.2 _Release Date – 12 April 2022_ * DEV – Update icon pack #### 1.0.1 _Release Date – 11 April 2022_ * DEV – Support ‚withIcon‘ to core/heading block #### 1.0.0 _Release Date – 09 April 2022_ ## Meta * Verzia **1.2.11** * Posledná aktualizácia **Pred 3 mesiace** * Aktívne inštalácie **600+** * Verzia WordPress ** 6.5 alebo novšia ** * Testované do verzie **6.9.4** * Verzia PHP ** 7.0 alebo novšia ** * Jazyk * [English (US)](https://wordpress.org/plugins/block-enhancements/) * Značky * [blocks](https://sk.wordpress.org/plugins/tags/blocks/)[button](https://sk.wordpress.org/plugins/tags/button/) [hover](https://sk.wordpress.org/plugins/tags/hover/)[icon](https://sk.wordpress.org/plugins/tags/icon/) [responsive](https://sk.wordpress.org/plugins/tags/responsive/) * [Rozšírené zobrazenie](https://sk.wordpress.org/plugins/block-enhancements/advanced/) ## Hodnotenia 4.8 out of 5 stars. * [ 7 5-star reviews ](https://wordpress.org/support/plugin/block-enhancements/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/block-enhancements/reviews/?filter=4) * [ 1 3-star review ](https://wordpress.org/support/plugin/block-enhancements/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/block-enhancements/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/block-enhancements/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-enhancements/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/block-enhancements/reviews/) ## Prispievatelia * [ Phi Phan ](https://profiles.wordpress.org/mr2p/) ## Podpora Máte čo povedať? Potrebujete pomoc? [Zobraziť fórum podpory](https://wordpress.org/support/plugin/block-enhancements/) ## Podporiť Chceli by ste podporiť pokrok tohto pluginu? [ Prispieť na plugin ](https://boldblocks.net?utm_source=wp.org&utm_campaign=readme&utm_medium=link&utm_content=BE+Donate)