Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Block Responsive - Make Editor Blocks Responsive Easily

开发者 ashrafuzzaman93
更新时间 2026年7月15日 02:21
捐献地址: 去捐款
PHP版本: 7.4 及以上
WordPress版本: 7.0
版权: GPL-2.0-or-later
版权网址: 版权信息

标签

block editor block visibility custom styles mobile friendly responsive design

下载

1.0.2 1.0.3 1.0.1 1.0.0 1.0.4 1.0.5 1.1.0

详情介绍:

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 ⚙️ Settings Dashboard Manage the whole plugin from the new dashboard under Settings > Block Responsive: * Custom breakpoints - define your own mobile and tablet breakpoints (defaults: 767px / 1024px) so your responsive design matches your theme perfectly. * Per-block control - enable or disable the responsive controls for individual block types. * User role permissions - choose which user roles are allowed to customize blocks. * Import & export - move your plugin settings between sites with a JSON file. 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. I'd love to hear your thoughts!

安装:

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

屏幕截图:

  • 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

升级注意事项:

1.1.0 Responsive styles now target the same element as WordPress core styles (e.g. the button link instead of its wrapper). Blocks styled under the old behavior may look slightly different - please review pages that use responsive overrides after updating.

常见问题:

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?

Yes! Since version 1.1.0, go to Settings > Block Responsive and enable or disable the responsive controls for each block type individually.

Can I change the mobile and tablet breakpoints?

Yes. By default the plugin uses 767px for mobile and 1024px for tablet, but you can set your own custom breakpoints from Settings > Block Responsive to match your theme's responsive design.

Can I control which users can customize blocks?

Yes. From the settings dashboard you can choose which user roles are allowed to use the responsive controls in the block editor.

Can I move my settings to another site?

Yes. The settings dashboard includes import and export options, so you can download your configuration as a JSON file and import it on another site.

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.

更新日志:

1.1.0 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0