Title: Block Responsive – Make Editor Blocks Responsive Easily Author: Sheikh Ashrafuzzman Published: 2025 年 8 月 26 日 Last modified: 2026 年 4 月 12 日 --- 搜尋外掛 ![](https://ps.w.org/block-responsive/assets/banner-772x250.png?rev=3368926) ![](https://ps.w.org/block-responsive/assets/icon-256x256.png?rev=3350013) # Block Responsive – Make Editor Blocks Responsive Easily 由 [Sheikh Ashrafuzzman](https://profiles.wordpress.org/ashrafuzzaman93/) 開發 [下載](https://downloads.wordpress.org/plugin/block-responsive.1.0.5.zip) * [詳細資料](https://tw.wordpress.org/plugins/block-responsive/#description) * [使用者評論](https://tw.wordpress.org/plugins/block-responsive/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/block-responsive/#installation) * [開發資訊](https://tw.wordpress.org/plugins/block-responsive/#developers) [技術支援](https://wordpress.org/support/plugin/block-responsive/) ## 外掛說明 **Block Responsive** is the ultimate WordPress plugin for creating mobile-friendly, responsive websites with Gutenberg blocks. This comprehensive responsive design tool gives you complete control over how your content appears across all devices, making it easy to build responsive layouts without any coding knowledge. Perfect for creating **mobile-responsive websites**, this plugin automatically adds responsive breakpoints and device-specific styling options to every core WordPress block. Whether you’re optimizing for mobile SEO, improving tablet user experience, or fine-tuning desktop layouts, Block Responsive provides the responsive web design tools you need. ### Key Features ### 📱 **Display Controls** Hide/show blocks on specific devices (mobile, tablet, desktop) Simple toggle controls with device-specific icons Visual feedback for hidden blocks ### 🎨 **Responsive Styling Options** **Alignment Controls**: Block alignment settings for different screen sizes **Colors Controls**: Text color, background color, and link color with device-specific settings** Background Image Controls**: Responsive background image settings **Typography Controls**: Font size, line height, letter spacing, and text transform for each device **Dimensions Controls**: Padding, margin, width, and height controls for responsive layouts ** Border & Shadow Controls**: Border radius, border width, and shadow effects per device ### How It Works 1. **Block Inspector Integration**: Responsive controls appear in the block inspector panel 2. **Device-Specific Settings**: Configure different styles for mobile, tablet, and desktop 3. **Real-time Preview**: See changes immediately in the editor 4. **Frontend Rendering**: Automatically generates and applies responsive CSS ### Have feedback, suggestions, or feature ideas? Feel free to share them with me at **[hello@ashrafuzzaman.com](https://tw.wordpress.org/plugins/block-responsive/hello@ashrafuzzaman.com?output_format=md).** I’d love to hear your thoughts! ## 螢幕擷圖 * [[ * Real-Time Preview of Block Responsive Settings * [[ * Responsive Settings Panel in Block Editor * [[ * Block inspector showing responsive controls panel with display, typography, and color options * [[ * Device-specific controls for mobile, tablet, and desktop * [[ * Responsive typography controls with device-specific font size settings ## 安裝方式 ### Method 1: WordPress Admin (Recommended) 1. Go to **Plugins > Add New** in your WordPress admin 2. Search for “Block Responsive” 3. Click **Install Now** and then **Activate** ## 常見問題集 ### How do I access the responsive controls? After activating the plugin, open any post or page in the Gutenberg editor. Select any block and look for the “Block Responsive” panel in the block inspector (right sidebar). You’ll see various responsive controls organized by category. ### Which blocks support responsive controls? The plugin works with all core Gutenberg blocks (blocks that start with “core/”) and WooCommerce blocks (blocks that start with “woocommerce/”). This includes paragraphs, headings, images, buttons, columns, product grids, cart blocks, checkout blocks, and many more. ### Does this affect my existing content? No, the plugin only adds controls to blocks. It doesn’t modify existing content unless you specifically use the responsive controls on blocks. ### Is there a performance impact? The plugin is optimized for performance. It only loads the necessary scripts and styles in the editor and generates minimal CSS for the frontend. ### Can I disable responsive controls for specific blocks? Currently, all core blocks will have the responsive controls available. Future versions may include options to disable controls for specific blocks. ### What happens if I deactivate the plugin? Your content will remain intact, but any responsive styling applied through the plugin will no longer be visible. The blocks will display with their default styling. ## 使用者評論 ![](https://secure.gravatar.com/avatar/450120bca054e57ddba026aba52fb6c68ac7247e8f4c546c97fc5cae9027dc23? s=60&d=retro&r=g) ### 󠀁[Very GOOD](https://wordpress.org/support/topic/very-good-7731/)󠁿 [Eric](https://profiles.wordpress.org/ericfri/) 2026 年 2 月 12 日 1 則留言 This is exactly what I was looking for. I often don’t want or need all of the additional blocks that other plugins offer, the provided Gutenberg blocks are usually enough. But, they are lacking some niceties for responsive design. This plugin brings those niceties and makes adjusting things SO MUCH BETTER. THANK YOU. ![](https://secure.gravatar.com/avatar/98b37fb1bd9a5f166ee26b82013bc5a8f7aa2bf558cab5100eb9c6a94d449e2d? s=60&d=retro&r=g) ### 󠀁[9.8/10 works very well.](https://wordpress.org/support/topic/9-8-10-works-very-well/)󠁿 [wpmitch](https://profiles.wordpress.org/wpmitch/) 2026 年 1 月 18 日 1 則留言 As i am trying to get the most out of the basic blocks, this plugin is very useful. A indicator icon on the setting modals where there are changed values and also on the device icons within would be big usability improvement. also small bug, i cannot overwrite the single column block width. would be quite usefull to controll it via the fixed width dimension. thanks Sheikh! ![](https://secure.gravatar.com/avatar/cbedb9fe7caa2eae30b6d21614ca98124d474155a8efada5ecfd422989da93fc? s=60&d=retro&r=g) ### 󠀁[Great plugin](https://wordpress.org/support/topic/great-plugin-41173/)󠁿 [Michael Galli](https://profiles.wordpress.org/galliweb/) 2026 年 1 月 3 日 1 則 留言 Excellent implementation – well done! Very useful. ![](https://secure.gravatar.com/avatar/d5d85d79f79baba4f5b9a619c51000a67c90c4a228473a9b3d30773859ec200e? s=60&d=retro&r=g) ### 󠀁[Block Responsive addresses what’s missing in Gutenberg blocks](https://wordpress.org/support/topic/block-responsive-addresses-whats-missing-in-gutenberg-blocks/)󠁿 [skylabb](https://profiles.wordpress.org/skylabb/) 2026 年 1 月 2 日 1 則留言 I want to stay native using Gutenberg blocks as much as possible to build my layouts. But G blocks lack responsive settings badly. Block Responsive takes care of the problem! Just exactly what I need. Big thank you to the author. ![](https://secure.gravatar.com/avatar/8988ae323bc6de26e4d5226ce9d6e1677ddeaf70a958f364c3ba88f528df95cd? s=60&d=retro&r=g) ### 󠀁[Should be in core](https://wordpress.org/support/topic/should-be-in-core-32/)󠁿 [cheahcs](https://profiles.wordpress.org/cheahcs/) 2025 年 11 月 27 日 1 則留言 What can I say, is a good plugin. Please keep going to enhance this plugin. Power and power, let’s the WP core team know that what is user need. ![](https://secure.gravatar.com/avatar/959dcb79d484ea52a832d9b33ed5c83e9fb7ff086dbc3cfddbd97d48bf8514eb? s=60&d=retro&r=g) ### 󠀁[Fantastic addition to core blocks!](https://wordpress.org/support/topic/fantastic-addition-to-core-blocks/)󠁿 [Daniel Schutzsmith](https://profiles.wordpress.org/schutzsmith/) 2025 年 11 月 19 日 1 則留言 Absolutely fantastic and non-opinionated! I’ve been looking for a plugin to extend this functionality to core blocks without having to add all new blocks. [ 閱讀全部 7 則使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈Block Responsive – Make Editor Blocks Responsive Easily〉 的開發相關工作。 參與者 * [ Sheikh Ashrafuzzman ](https://profiles.wordpress.org/ashrafuzzaman93/) [將〈Block Responsive – Make Editor Blocks Responsive Easily〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/block-responsive) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/block-responsive/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/block-responsive/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/block-responsive/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/block-responsive/)。 ## 變更記錄 #### 1.0.5 * Fixed: Minor bugs and code improvements. * Enhance: Added compatibility with WordPress v7.0. #### 1.0.4 * New: Compatibility with WordPress Site Editor * Enhance: Added compatibility with WordPress v6.9. #### 1.0.3 * New: Responsive position and overflow controls #### 1.0.2 * New: Compatibility with WooCommerce blocks * Fixed: Reset issue with flex direction settings * Update: The language (.pot) file #### 1.0.1 * New: Flex direction control in the alignment settings * New: Support for negative margin values in the spacing controls * Update: The language (.pot) file #### 1.0.0 * Initial release * Added display controls for mobile, tablet, and desktop * Added responsive typography controls * Added responsive color controls * Added responsive dimensions controls * Added responsive alignment controls * Added responsive background image controls * Added responsive border and shadow controls * Integrated with Gutenberg block inspector ## 中繼資料 * 版本 **1.0.5** * 最後更新 **1 個月前** * 啟用安裝數 **500+** * WordPress 版本需求 ** 6.7 或更新版本 ** * 已測試相容的 WordPress 版本 **7.0** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/block-responsive/) * 標籤: * [block visibility](https://tw.wordpress.org/plugins/tags/block-visibility/)[block-editor](https://tw.wordpress.org/plugins/tags/block-editor/) [custom-styles](https://tw.wordpress.org/plugins/tags/custom-styles/)[mobile-friendly](https://tw.wordpress.org/plugins/tags/mobile-friendly/) [responsive design](https://tw.wordpress.org/plugins/tags/responsive-design/) * [進階檢視](https://tw.wordpress.org/plugins/block-responsive/advanced/) ## 評分 5 星，滿分為 5 星 * [ 7 個 5 星使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/block-responsive/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/block-responsive/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/block-responsive/reviews/) ## 參與者 * [ Sheikh Ashrafuzzman ](https://profiles.wordpress.org/ashrafuzzaman93/) ## 技術支援 最近 2 個月解決的問題: 總計 3 個問題，已解決 0 個 [檢視技術支援論壇](https://wordpress.org/support/plugin/block-responsive/) ## 贊助 想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://ashrafuzzaman.com/)