{"id":244263,"date":"2025-08-26T03:16:53","date_gmt":"2025-08-26T03:16:53","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/block-responsive-responsive-controls-for-editor-blocks\/"},"modified":"2025-12-06T07:53:59","modified_gmt":"2025-12-06T07:53:59","slug":"block-responsive","status":"publish","type":"plugin","link":"https:\/\/azb.wordpress.org\/plugins\/block-responsive\/","author":18309747,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0.4","stable_tag":"1.0.4","tested":"6.9.4","requires":"6.7","requires_php":"7.4","requires_plugins":null,"header_name":"Block Responsive - Make Editor Blocks Responsive Easily","header_author":"ashrafuzzaman93","header_description":"A plugin that provides responsive options for Gutenberg blocks, allowing you to control visibility and styles based on screen size.","assets_banners_color":"9eaac8","last_updated":"2025-12-06 07:53:59","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/wise.com\/pay\/me\/saka2","header_plugin_uri":"http:\/\/wordpress.org\/plugins\/block-responsive\/","header_author_uri":"https:\/\/ashrafuzzaman.com\/","rating":5,"author_block_rating":0,"active_installs":400,"downloads":4639,"num_ratings":7,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0.0":{"tag":"1.0.0","author":"ashrafuzzaman93","date":"2025-08-26 03:16:32"},"1.0.1":{"tag":"1.0.1","author":"ashrafuzzaman93","date":"2025-09-14 05:38:05"},"1.0.2":{"tag":"1.0.2","author":"ashrafuzzaman93","date":"2025-09-27 16:44:37"},"1.0.3":{"tag":"1.0.3","author":"ashrafuzzaman93","date":"2025-11-12 17:42:08"},"1.0.4":{"tag":"1.0.4","author":"ashrafuzzaman93","date":"2025-12-06 07:53:59"}},"upgrade_notice":[],"ratings":{"1":0,"2":0,"3":0,"4":0,"5":7},"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3350013,"resolution":"128x128","location":"assets","locale":""},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3350013,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3368926,"resolution":"1544x500","location":"assets","locale":""},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3368926,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{"blueprint.json":{"filename":"blueprint.json","revision":3412812,"resolution":false,"location":"assets","locale":"","contents":"{\"$schema\":\"https:\\\/\\\/playground.wordpress.net\\\/blueprint-schema.json\",\"landingPage\":\"\\\/wp-admin\\\/post.php?post=7&action=edit\",\"login\":true,\"features\":{\"networking\":true},\"steps\":[{\"step\":\"setSiteOptions\",\"options\":{\"blogname\":\"Block Responsive\"}},{\"step\":\"installPlugin\",\"pluginData\":{\"resource\":\"wordpress.org\\\/plugins\",\"slug\":\"block-responsive\"},\"options\":{\"activate\":true}},{\"step\":\"importWxr\",\"file\":{\"resource\":\"url\",\"url\":\"https:\\\/\\\/raw.githubusercontent.com\\\/ashrafuzzaman93\\\/wp-playground\\\/refs\\\/heads\\\/main\\\/br-demo-content.xml\"}}]}"}},"all_blocks":[],"tagged_versions":["1.0.0","1.0.1","1.0.2","1.0.3","1.0.4"],"block_files":[],"assets_screenshots":{"screenshot-1.gif":{"filename":"screenshot-1.gif","revision":3368926,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3368926,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3368926,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3368926,"resolution":"4","location":"assets","locale":""},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3368926,"resolution":"5","location":"assets","locale":""}},"screenshots":{"1":"Real-Time Preview of Block Responsive Settings","2":"Responsive Settings Panel in Block Editor","3":"Block inspector showing responsive controls panel with display, typography, and color options","4":"Device-specific controls for mobile, tablet, and desktop","5":"Responsive typography controls with device-specific font size settings"},"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[232345,148857,13420,6690,30738],"plugin_category":[],"plugin_contributors":[246816],"plugin_business_model":[],"class_list":["post-244263","plugin","type-plugin","status-publish","hentry","plugin_tags-block-visibility","plugin_tags-block-editor","plugin_tags-custom-styles","plugin_tags-mobile-friendly","plugin_tags-responsive-design","plugin_contributors-ashrafuzzaman93","plugin_committers-ashrafuzzaman93"],"banners":{"banner":"https:\/\/ps.w.org\/block-responsive\/assets\/banner-772x250.png?rev=3368926","banner_2x":"https:\/\/ps.w.org\/block-responsive\/assets\/banner-1544x500.png?rev=3368926","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/block-responsive\/assets\/icon-128x128.png?rev=3350013","icon_2x":"https:\/\/ps.w.org\/block-responsive\/assets\/icon-256x256.png?rev=3350013","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/block-responsive\/assets\/screenshot-1.gif?rev=3368926","caption":"Real-Time Preview of Block Responsive Settings"},{"src":"https:\/\/ps.w.org\/block-responsive\/assets\/screenshot-2.png?rev=3368926","caption":"Responsive Settings Panel in Block Editor"},{"src":"https:\/\/ps.w.org\/block-responsive\/assets\/screenshot-3.png?rev=3368926","caption":"Block inspector showing responsive controls panel with display, typography, and color options"},{"src":"https:\/\/ps.w.org\/block-responsive\/assets\/screenshot-4.png?rev=3368926","caption":"Device-specific controls for mobile, tablet, and desktop"},{"src":"https:\/\/ps.w.org\/block-responsive\/assets\/screenshot-5.png?rev=3368926","caption":"Responsive typography controls with device-specific font size settings"}],"raw_content":"\n

Block Responsive<\/strong> 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.<\/p>\n\n

Perfect for creating mobile-responsive websites<\/strong>, 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.<\/p>\n\n

Key Features<\/h3>\n\n

\ud83d\udcf1 Display Controls<\/strong><\/h3>\n\n

Hide\/show blocks on specific devices (mobile, tablet, desktop)\nSimple toggle controls with device-specific icons\nVisual feedback for hidden blocks<\/p>\n\n

\ud83c\udfa8 Responsive Styling Options<\/strong><\/h3>\n\n

Alignment Controls<\/strong>: Block alignment settings for different screen sizes\nColors Controls<\/strong>: Text color, background color, and link color with device-specific settings\nBackground Image Controls<\/strong>: Responsive background image settings\nTypography Controls<\/strong>: Font size, line height, letter spacing, and text transform for each device\nDimensions Controls<\/strong>: Padding, margin, width, and height controls for responsive layouts\nBorder & Shadow Controls<\/strong>: Border radius, border width, and shadow effects per device<\/p>\n\n

How It Works<\/h3>\n\n
    \n
  1. Block Inspector Integration<\/strong>: Responsive controls appear in the block inspector panel<\/li>\n
  2. Device-Specific Settings<\/strong>: Configure different styles for mobile, tablet, and desktop<\/li>\n
  3. Real-time Preview<\/strong>: See changes immediately in the editor<\/li>\n
  4. Frontend Rendering<\/strong>: Automatically generates and applies responsive CSS<\/li>\n<\/ol>\n\n

    Have feedback, suggestions, or feature ideas?<\/h3>\n\n

    Feel free to share them with me at hello@ashrafuzzaman.com<\/a>.<\/strong> I'd love to hear your thoughts!<\/p>\n\n\n

    Method 1: WordPress Admin (Recommended)<\/h3>\n\n
      \n
    1. Go to Plugins > Add New<\/strong> in your WordPress admin<\/li>\n
    2. Search for \"Block Responsive\"<\/li>\n
    3. Click Install Now<\/strong> and then Activate<\/strong><\/li>\n<\/ol>\n\n\n
      \n

      How do I access the responsive controls?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Which blocks support responsive controls?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n

      Does this affect my existing content?<\/h3><\/dt>\n

      No, the plugin only adds controls to blocks. It doesn't modify existing content unless you specifically use the responsive controls on blocks.<\/p><\/dd>\n

      Is there a performance impact?<\/h3><\/dt>\n

      The plugin is optimized for performance. It only loads the necessary scripts and styles in the editor and generates minimal CSS for the frontend.<\/p><\/dd>\n

      Can I disable responsive controls for specific blocks?<\/h3><\/dt>\n

      Currently, all core blocks will have the responsive controls available. Future versions may include options to disable controls for specific blocks.<\/p><\/dd>\n

      What happens if I deactivate the plugin?<\/h3><\/dt>\n

      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.<\/p><\/dd>\n\n<\/dl>\n\n\n

      1.0.4<\/h4>\n\n
        \n
      • Add: Compatibility with WordPress Site Editor<\/li>\n
      • Improvement: Added compatibility with WordPress v6.9.<\/li>\n<\/ul>\n\n

        1.0.3<\/h4>\n\n
          \n
        • Add: Responsive position and overflow controls<\/li>\n<\/ul>\n\n

          1.0.2<\/h4>\n\n
            \n
          • Add: Compatibility with WooCommerce blocks<\/li>\n
          • Fix: Reset issue with flex direction settings<\/li>\n
          • Update: The language (.pot) file<\/li>\n<\/ul>\n\n

            1.0.1<\/h4>\n\n
              \n
            • Add: Flex direction control in the alignment settings<\/li>\n
            • Add: Support for negative margin values in the spacing controls<\/li>\n
            • Update: The language (.pot) file<\/li>\n<\/ul>\n\n

              1.0.0<\/h4>\n\n
                \n
              • Initial release<\/li>\n
              • Added display controls for mobile, tablet, and desktop<\/li>\n
              • Added responsive typography controls<\/li>\n
              • Added responsive color controls<\/li>\n
              • Added responsive dimensions controls<\/li>\n
              • Added responsive alignment controls<\/li>\n
              • Added responsive background image controls<\/li>\n
              • Added responsive border and shadow controls<\/li>\n
              • Integrated with Gutenberg block inspector<\/li>\n<\/ul>","raw_excerpt":"Transform any WordPress block into a fully responsive element with device-specific controls for mobile, tablet, and desktop optimization.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/244263","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=244263"}],"author":[{"embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/ashrafuzzaman93"}],"wp:attachment":[{"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=244263"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=244263"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=244263"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=244263"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=244263"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/azb.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=244263"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}