內容簡介
這個外掛可以增加 Gutenberg 區塊的額外功能，例如圖示、顏色、陰影、轉換、轉場、文字對齊、浮動樣式等等。
使用者可以透過設定頁決定哪些功能支援特定的區塊。
以下功能已經可以使用：
在 core/button、core/list、core/heading、core/read-more 區塊中加入圖示
在所有區塊中加入方框陰影生成器
在所有區塊中加入文字陰影生成器
在所有區塊中加入2D轉換（平移、旋轉、傾斜、縮放）生成器
在陰影、轉換、文字顏色、背景顏色上加入浮動狀態樣式生成器
在反應式文字對齊中加入功能。這對於 "container" 區塊（例如 core/group、core/columns、core/column）非常有用，或者你想在手機上將文字對齊置中，但在桌面版上將文字對齊左邊，都可以達成。
在所有區塊上加入轉場功能
☐ 更多功能即將推出。
影片教學
如何在 Gutenberg 中自定義 core button：
請透過回報問題和提出建議來協助發展此外掛。
如果這個外掛對您有所幫助，請在 WordPress.org 上快速評論和評分，以幫助我們推廣。非常感謝。
如果您有興趣，也可以查看我的其他外掛：
Content Blocks Builder - 一個方便您在區塊編輯器上建立區塊、圖案或變化的工具。
Icon separator - 與 core/separator 區塊類似，但能夠添加圖示的小型區塊。
SVG Block - 可以輕易且安全地插入 inline SVG 圖像的區塊。它還附帶了超過 3000 種圖示和一些常見的非矩形分隔符。
Meta Field Block - 可以將 meta field 或 ACF field 顯示為區塊。它還可以用於 Query Loop 區塊。
Counting Number Block - 顯示數字計數效果的區塊。
Breadcrumb Block - 簡單的樹狀導覽區塊，支援 JSON-LD 結構化資料。
Better Youtube Embed Block - 嵌入 Youtube 影片，不會影響到您的網站速度。
此外掛是使用 @wordpress/scripts 開發的。
外掛標籤
開發者團隊
② 後台搜尋「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 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
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. The source code is available in the trunk branch.
