Title: Responsive Block Control – Hide blocks based on display width Author: landwire Published: 2020 年 1 月 30 日 Last modified: 2026 年 2 月 21 日 --- 搜尋外掛 ![](https://ps.w.org/responsive-block-control/assets/banner-772x250.png?rev=2236119) ![](https://ps.w.org/responsive-block-control/assets/icon.svg?rev=2236128) # Responsive Block Control – Hide blocks based on display width 由 [landwire](https://profiles.wordpress.org/landwire/) 開發 [下載](https://downloads.wordpress.org/plugin/responsive-block-control.1.3.2.zip) [即時預覽](https://tw.wordpress.org/plugins/responsive-block-control/?preview=1) * [詳細資料](https://tw.wordpress.org/plugins/responsive-block-control/#description) * [使用者評論](https://tw.wordpress.org/plugins/responsive-block-control/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/responsive-block-control/#installation) * [開發資訊](https://tw.wordpress.org/plugins/responsive-block-control/#developers) [技術支援](https://wordpress.org/support/plugin/responsive-block-control/) ## 外掛說明 Responsive Block Control adds responsive toggles to a “Visibility” panel of the block editor, to show or hide blocks according to screen width. ### Security **Version 1.3.1 resolves a stored cross‑site scripting (XSS) vulnerability (CVE‑ 2025‑62135) affecting earlier versions (<= 1.2.9).** Users with contributor access or higher should update immediately. If you discover a security vulnerability, please report it responsibly to: security@ saschapaukner.de #### Limitations Does not work with the Classic Block, Widget Block or Widget Area Block [‘core/freeform’,‘ core/legacy-widget’, ‘core/widget-area’], as the those blocks do not support block attributes. Does also not work with the HTML Block [‘core/html’] inside the Widget Screen, as this one also does not support block attributes there. ### Configuration #### Override existing breakpoints ``` function override_responsive_block_control_breakpoints($break_points) { $break_points['base'] = 0; $break_points['mobile'] = 400; $break_points['tablet'] = 800; $break_points['desktop'] = 1000; $break_points['wide'] = 1600; return $break_points; } add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_breakpoints'); ``` #### Provide custom CSS You can provide your own CSS rules per breakpoint using the new filter responsive_block_control_custom_css_rules. ``` add_filter('responsive_block_control_custom_css_rules', function($rules) { return [ 'mobile' => 'display: none !important;', 'tablet' => 'display: none !important;', 'desktop' => 'display: none !important;', 'wide' => 'display: none !important;', ]; }); ``` #### Stop css output completely ``` function override_responsive_block_control_add_css() { return false; } add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_add_css'); ``` ## 螢幕擷圖 [⌊The 'Responsive Block Control' toggles at work in the block editor.⌉⌊The 'Responsive Block Control' toggles at work in the block editor.⌉[ The ‘Responsive Block Control’ toggles at work in the block editor. ## 安裝方式 1. Upload `responsive-block-control.php` to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress ## 常見問題集 ### Is it possible to use different breakpoints? Yes, use the following code in your functions.php or similar. ``` function override_responsive_block_control_breakpoints($break_points) { $break_points['base'] = 0; $break_points['mobile'] = 400; $break_points['tablet'] = 800; $break_points['desktop'] = 1000; $break_points['wide'] = 1600; return $break_points; } add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_breakpoints'); ``` ### Can I provide custom CSS per breakpoint? I want to display: none instead of hiding just visually Yes, use the responsive_block_control_custom_css_rules filter: ``` add_filter('responsive_block_control_custom_css_rules', function($rules) { return [ 'mobile' => 'display: none !important;', 'tablet' => 'display: none !important;', 'desktop' => 'display: none !important;', 'wide' => 'display: none !important;', ]; }); ``` This ensures the CSS respects the current breakpoints and applies to the correct. rbc-is-hidden-on-{breakpoint} classes. ### Can I write my own CSS and just use the classes? Yes, that is absolutely possible. Just use the filter below to stop the plugin from injecting its’ styles: ``` function override_responsive_block_control_add_css() { return false; } add_filter('responsive_block_control_breakpoints', 'override_responsive_block_control_add_css'); ``` ## 使用者評論 ![](https://secure.gravatar.com/avatar/e949c500105ab437ffc4f8e8c3e9012c8ed43a6485a64e7d698f11e3db0a3aa8? s=60&d=retro&r=g) ### 󠀁[Excellent!](https://wordpress.org/support/topic/excellent-12135/)󠁿 [diegosomar](https://profiles.wordpress.org/diegosomar/) 2022 年 9 月 4 日 1 則留言 Very nice plugin! Tks! ![](https://secure.gravatar.com/avatar/f87e49f4af010a291d60f1079bc1651a4e4b12c02a38b19232a32bf445376869? s=60&d=retro&r=g) ### 󠀁[Great Plugin.](https://wordpress.org/support/topic/great-plugin-34764/)󠁿 [phungkha](https://profiles.wordpress.org/phungkha/) 2022 年 8 月 6 日 1 則留言 “Responsive Block Control” is one of the best plugins almost used on my all website. I just love it and expect more with the updating of the WordPress version. ![](https://secure.gravatar.com/avatar/e077e901ca415a426dad1c384e9c4637e75da1ff7a20d766ca2a066b9b25ad90? s=60&d=retro&r=g) ### 󠀁[Great simple plugin!](https://wordpress.org/support/topic/great-simple-plugin-98/)󠁿 [alexmustin](https://profiles.wordpress.org/alexmustin/) 2021 年 2 月 5 日 1 則留言 This plugin does exactly what I need, without adding any extra bloat. Thanks! ![](https://secure.gravatar.com/avatar/c5b1064bacade59c71240f5681de4109e5f574f0a6507e4fb582a591b2b15b0a? s=60&d=retro&r=g) ### 󠀁[Adds a crucial missing Gutenberg functionality](https://wordpress.org/support/topic/adds-a-crucial-missing-gutenberg-functionality/)󠁿 [andreasmarberg](https://profiles.wordpress.org/andreasmarberg/) 2020 年 3 月 7 日 Hi there, thank you for a great little plugin! It is ideal for showing some content for small screens and some other content for bigger screens. What really makes it stand out from other plugins is that you can adjust the breakpoints and tune them to correspond with your plugins in your theme. [ 閱讀全部 4 則使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/) ## 參與者及開發者以下人員參與了開源軟體〈Responsive Block Control – Hide blocks based on display width〉的開發相關工作。參與者 * [ landwire ](https://profiles.wordpress.org/landwire/) 〈Responsive Block Control – Hide blocks based on display width〉外掛目前已有 2 個本地化語言版本。感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/responsive-block-control/contributors) 為這個外掛做出的貢獻。 [將〈Responsive Block Control – Hide blocks based on display width〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/responsive-block-control) ### 對開發相關資訊感興趣？任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/responsive-block-control/)、查看 [SVN 存放庫](https://plugins.svn.wordpress.org/responsive-block-control/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/responsive-block-control/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/responsive-block-control/)。 ## 變更記錄 #### 1.3.2 * Removed console.log #### 1.3.1 * Security fix: Mitigated authenticated Stored XSS (CVE‑2025‑62135). * Added responsive_block_control_custom_css_rules filter to allow developers to provide their own CSS per breakpoint * Fixed media query generation to match breakpoints correctly * Ensured JS only injects CSS if customCss is present and sanitized #### 1.3.0 * Raised version after testing and package updates #### 1.2.9 * Added check to not load editor assets in the front end #### 1.2.8 * Updated asset loading for changes introduced in WordPress 6.3 * Added “Limitations” section to readme #### 1.2.7 Recompiled assets for distribution #### 1.2.6 * fixed translation for visibility information * added check for Classic Block and disabled display of settings there #### 1.2.0 * fixed some JS logic * added visibility information to blocks in Gutenberg editor #### 1.1.1 * fixed regex for adding classes in the frontend #### 1.1.0 * Removed the “blocks.getSaveContent.extraProps” JS filter as it causes block validation errors * Instead we are using the recommended PHP filter “render_block” to add the necessary classes vie preg_replace() #### 1.0.0 * Initial Release of the plugin ## 中繼資料 * 版本 **1.3.2** * 最後更新 **6 個月前** * 啟用安裝數 **1,000+** * WordPress 版本需求 ** 5.2 或更新版本 ** * 已測試相容的 WordPress 版本 **6.9.6** * PHP 版本需求 ** 7.4 或更新版本 ** * 語言 * [English (US)](https://wordpress.org/plugins/responsive-block-control/)、[Spanish (Chile)](https://cl.wordpress.org/plugins/responsive-block-control/)、及 [Spanish (Spain)](https://es.wordpress.org/plugins/responsive-block-control/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/responsive-block-control) * 標籤: * [block](https://tw.wordpress.org/plugins/tags/block/)[hide content](https://tw.wordpress.org/plugins/tags/hide-content/) [responsive](https://tw.wordpress.org/plugins/tags/responsive/)[visibility](https://tw.wordpress.org/plugins/tags/visibility/) [width](https://tw.wordpress.org/plugins/tags/width/) * [進階檢視](https://tw.wordpress.org/plugins/responsive-block-control/advanced/) ## 評分 5 星，滿分為 5 星 * [ 4 個 5 星使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/responsive-block-control/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/responsive-block-control/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/responsive-block-control/reviews/) ## 參與者 * [ landwire ](https://profiles.wordpress.org/landwire/) ## 技術支援使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/responsive-block-control/) ## 贊助想要支援這個外掛的發展嗎？ [ 贊助這個外掛 ](https://saschapaukner.de)