{"id":289893,"date":"2026-03-21T09:23:59","date_gmt":"2026-03-21T09:23:59","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/flavor-block-visibility\/"},"modified":"2026-09-21T09:50:06","modified_gmt":"2026-09-21T09:50:06","slug":"flavor-block-visibility","status":"publish","type":"plugin","link":"https:\/\/fur.wordpress.org\/plugins\/flavor-block-visibility\/","author":23465676,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"2.0.0","stable_tag":"2.0.0","tested":"7.1.2","requires":"6.2","requires_php":"7.4","requires_plugins":null,"header_name":"Flavor Block Visibility","header_author":"Vlad Zelinskyi","header_description":"Adds responsive visibility controls (Hide on Desktop \/ Tablet \/ Mobile) to all Gutenberg blocks in the Advanced panel.","assets_banners_color":"72b9c3","last_updated":"2026-09-21 09:50:06","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/www.spacenerd.space\/","header_plugin_uri":"","header_author_uri":"https:\/\/www.spacenerd.space\/","rating":0,"author_block_rating":0,"active_installs":90,"downloads":1618,"num_ratings":0,"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":"wpspacenerd","date":"2026-03-21 09:30:58","revision":3487683},"1.1.0":{"tag":"1.1.0","author":"wpspacenerd","date":"2026-04-07 07:50:47","revision":3500435},"2.0.0":{"tag":"2.0.0","author":"wpspacenerd","date":"2026-09-21 09:50:06","revision":3705286}},"upgrade_notice":{"2.0.0":"

Major update: per-device column order for the Columns block, redesigned settings page. Existing visibility settings keep working. Requires WordPress 6.2+.<\/p>","1.0.0":"

Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3705286,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3705286,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256},"icon.svg":{"filename":"icon.svg","revision":3705286,"resolution":false,"location":"assets","locale":false}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3705286,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3705286,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0","2.0.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3705286,"resolution":"1","location":"assets","locale":"","width":3072,"height":1394},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3705286,"resolution":"2","location":"assets","locale":"","width":3072,"height":1402},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3705286,"resolution":"3","location":"assets","locale":"","width":3070,"height":1398}},"screenshots":{"1":"Hide any block on Desktop, Tablet or Mobile with the Responsive Conditions toggles in the block settings.","2":"Settings page: breakpoints for each device and the accessible DOM order option.","3":"Responsive Column Order panel for the Columns block: a separate order for each device, with drag and drop, Reverse and Reset."}},"plugin_section":[],"plugin_tags":[854,148076,841,606,6309],"plugin_category":[],"plugin_contributors":[258272],"plugin_business_model":[],"class_list":["post-289893","plugin","type-plugin","status-publish","hentry","plugin_tags-columns","plugin_tags-gutenberg","plugin_tags-mobile","plugin_tags-responsive","plugin_tags-visibility","plugin_contributors-wpspacenerd","plugin_committers-wpspacenerd"],"banners":{"banner":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/banner-772x250.png?rev=3705286","banner_2x":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/banner-1544x500.png?rev=3705286","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/icon.svg?rev=3705286","icon":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/icon.svg?rev=3705286","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/screenshot-1.png?rev=3705286","caption":"Hide any block on Desktop, Tablet or Mobile with the Responsive Conditions toggles in the block settings."},{"src":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/screenshot-2.png?rev=3705286","caption":"Settings page: breakpoints for each device and the accessible DOM order option."},{"src":"https:\/\/ps.w.org\/flavor-block-visibility\/assets\/screenshot-3.png?rev=3705286","caption":"Responsive Column Order panel for the Columns block: a separate order for each device, with drag and drop, Reverse and Reset."}],"raw_content":"\n

Flavor Block Visibility adds two responsive tools to the block editor \u2014 without page builders, extra blocks or a build step.<\/p>\n\n

Responsive visibility<\/h4>\n\n

Every block gets three toggles in its Advanced<\/strong> panel: Hide on Desktop<\/strong>, Hide on Tablet<\/strong> and Hide on Mobile<\/strong>. Hiding is done with CSS media queries \u2014 no JavaScript.<\/p>\n\n

Responsive column order<\/h4>\n\n

The core Columns<\/strong> block gets a Responsive Column Order<\/strong> panel. Give each device its own order \u2014 for example, show the image above the text on mobile and next to it on desktop. Reorder by drag and drop or with the arrow buttons, or use Reverse and Reset.<\/p>\n\n

The order is applied with CSS, so it is correct from the first paint. An optional tiny script also reorders the HTML, so keyboard navigation and screen readers follow what visitors see.<\/p>\n\n

Features<\/h4>\n\n
    \n
  • Works with every core and third-party block<\/li>\n
  • Controls live in the native block settings \u2014 no extra sidebars<\/li>\n
  • Editor preview: blocks hidden on the current device are dimmed, and columns show the order of the current device preview<\/li>\n
  • Hovering a column in the order list highlights it on the canvas<\/li>\n
  • Column order follows columns when they are added, removed or moved<\/li>\n
  • Customizable breakpoints in Settings \u2192 Block Visibility<\/strong><\/li>\n
  • CSS and scripts load only on pages that need them<\/li>\n
  • No build step, no external requests<\/li>\n
  • Clean uninstall \u2014 removes all plugin data<\/li>\n<\/ul>\n\n

    Default Breakpoints<\/h4>\n\n
      \n
    • Mobile: 0 \u2013 767px<\/li>\n
    • Tablet: 768px \u2013 1024px<\/li>\n
    • Desktop: 1025px and above<\/li>\n<\/ul>\n\n

      Breakpoints can be customized in Settings \u2192 Block Visibility<\/strong>.<\/p>\n\n\n

        \n
      1. Upload the flavor-block-visibility<\/code> folder to \/wp-content\/plugins\/<\/code><\/li>\n
      2. Activate through the Plugins<\/strong> menu in WordPress<\/li>\n
      3. Select any block \u2192 open the Advanced<\/strong> panel in the sidebar \u2192 use the toggles<\/li>\n
      4. Optionally adjust breakpoints in Settings \u2192 Block Visibility<\/strong><\/li>\n<\/ol>\n\n\n
        \n

        Does this work with third-party blocks?<\/h3><\/dt>\n

        Yes. The plugin adds responsive controls to every registered Gutenberg block, including blocks from other plugins and themes.<\/p><\/dd>\n

        How does the hiding work?<\/h3><\/dt>\n

        The plugin uses CSS media queries with display: none !important<\/code>. No JavaScript is used for hiding. The CSS is only loaded on pages where at least one block uses a visibility toggle.<\/p><\/dd>\n

        How does the column order work?<\/h3><\/dt>\n

        Select a Columns block and open Responsive Column Order<\/strong> in the block settings. Pick a device tab and reorder the columns. The order is applied with CSS order<\/code> inside media queries, so it is correct immediately on page load.<\/p>\n\n

        By default, a tiny script (loaded only on pages that use a custom column order) then moves the column elements in the HTML, so keyboard navigation and screen readers follow the same order as what is shown. You can disable this in Settings \u2192 Block Visibility<\/strong>. In browsers without moveBefore()<\/code> support, columns that contain iframes or videos keep the CSS-only order, so embeds are not reloaded.<\/p><\/dd>\n

        Does a column keep its width when moved?<\/h3><\/dt>\n

        Yes. Order changes the position, not the width, so each column takes its width with it.<\/p><\/dd>\n

        Can I customize the breakpoints?<\/h3><\/dt>\n

        Yes. Go to Settings \u2192 Block Visibility<\/strong> to change the pixel values for mobile, tablet, and desktop breakpoints.<\/p><\/dd>\n

        Will this affect SEO?<\/h3><\/dt>\n

        CSS-based responsive hiding is a standard web practice. Search engines understand media queries and do not penalize content that is responsively hidden.<\/p><\/dd>\n

        Does it work with Full Site Editing (FSE)?<\/h3><\/dt>\n

        Yes. The plugin supports both classic themes and block themes with Full Site Editing.<\/p><\/dd>\n\n<\/dl>\n\n\n

        2.0.0<\/h4>\n\n
          \n
        • New: Responsive Column Order panel for the core Columns block \u2014 different column order for Mobile, Tablet and Desktop.<\/li>\n
        • New: reorder by drag and drop or with arrow buttons; Reverse and Reset per device.<\/li>\n
        • New: the editor canvas shows the column order of the current device preview; hovering a column in the list highlights it.<\/li>\n
        • New: stored order follows columns when they are added, removed or moved.<\/li>\n
        • New: optional accessible DOM order (Settings \u2192 Block Visibility), enabled by default.<\/li>\n
        • New: refreshed settings page design \u2014 breakpoints grouped by device. Same settings and saving as before.<\/li>\n
        • Improved: block themes now load the CSS only on pages that use it.<\/li>\n
        • Improved: the editor reads the preview device from core\/editor (WP 6.5+), avoiding deprecated selectors.<\/li>\n
        • Fix: editor indicators no longer wrap blocks in an extra element, which broke Columns widths in the editor.<\/li>\n
        • Requires WordPress 6.2 or later.<\/li>\n<\/ul>\n\n

          1.1.0<\/h4>\n\n
            \n
          • Editor: blocks hidden on the current preview device now display a grey overlay with a label \u2014 so it's clear they won't appear on that device.<\/li>\n
          • Editor: blocks with any hide rule show a thin blue outline and a small badge on other devices \u2014 visual confirmation the plugin is active.<\/li>\n
          • Removed the old dashed outline in favour of the new per-device-aware indicators.<\/li>\n<\/ul>\n\n

            1.0.0<\/h4>\n\n
              \n
            • Initial release.<\/li>\n
            • Hide on Desktop, Tablet, and Mobile toggles for all Gutenberg blocks.<\/li>\n
            • Customizable breakpoints via Settings page.<\/li>\n
            • Conditional CSS loading \u2014 styles only load when needed.<\/li>\n
            • Visual editor indicators for hidden blocks.<\/li>\n<\/ul>","raw_excerpt":"Hide any block on Mobile, Tablet or Desktop, and set a different Columns order per device. Lightweight, CSS-first, native editor UI.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/289893","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=289893"}],"author":[{"embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/wpspacenerd"}],"wp:attachment":[{"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=289893"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=289893"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=289893"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=289893"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=289893"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/fur.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=289893"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}