Title: Flavor Block Visibility Author: Vlad Zelinskyi Published: 21 de marzo de 2026 Last modified: 21 de septiembre de 2026 --- Buscar plugins ![](https://ps.w.org/flavor-block-visibility/assets/banner-772x250.png?rev=3705286) ![](https://ps.w.org/flavor-block-visibility/assets/icon.svg?rev=3705286) # Flavor Block Visibility Por [Vlad Zelinskyi](https://profiles.wordpress.org/wpspacenerd/) [Descargar](https://downloads.wordpress.org/plugin/flavor-block-visibility.2.0.0.zip) * [Detalles](https://es-ar.wordpress.org/plugins/flavor-block-visibility/#description) * [Valoraciones](https://es-ar.wordpress.org/plugins/flavor-block-visibility/#reviews) * [Instalación](https://es-ar.wordpress.org/plugins/flavor-block-visibility/#installation) * [Desarrollo](https://es-ar.wordpress.org/plugins/flavor-block-visibility/#developers) [Soporte](https://wordpress.org/support/plugin/flavor-block-visibility/) ## Descripción Flavor Block Visibility adds two responsive tools to the block editor — without page builders, extra blocks or a build step. #### Responsive visibility Every block gets three toggles in its **Advanced** panel: **Hide on Desktop**, ** Hide on Tablet** and **Hide on Mobile**. Hiding is done with CSS media queries — no JavaScript. #### Responsive column order The core **Columns** block gets a **Responsive Column Order** panel. Give each device its own order — 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. 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. #### Features * Works with every core and third-party block * Controls live in the native block settings — no extra sidebars * Editor preview: blocks hidden on the current device are dimmed, and columns show the order of the current device preview * Hovering a column in the order list highlights it on the canvas * Column order follows columns when they are added, removed or moved * Customizable breakpoints in **Settings Block Visibility** * CSS and scripts load only on pages that need them * No build step, no external requests * Clean uninstall — removes all plugin data #### Default Breakpoints * Mobile: 0 – 767px * Tablet: 768px – 1024px * Desktop: 1025px and above Breakpoints can be customized in **Settings Block Visibility**. ## Capturas [⌊Hide any block on Desktop, Tablet or Mobile with the Responsive Conditions toggles in the block settings.⌉⌊Hide any block on Desktop, Tablet or Mobile with the Responsive Conditions toggles in the block settings.⌉[ Hide any block on Desktop, Tablet or Mobile with the Responsive Conditions toggles in the block settings. [⌊Settings page: breakpoints for each device and the accessible DOM order option.⌉⌊ Settings page: breakpoints for each device and the accessible DOM order option.⌉[ Settings page: breakpoints for each device and the accessible DOM order option. [⌊Responsive Column Order panel for the Columns block: a separate order for each device, with drag and drop, Reverse and Reset.⌉⌊Responsive Column Order panel for the Columns block: a separate order for each device, with drag and drop, Reverse and Reset.⌉[ Responsive Column Order panel for the Columns block: a separate order for each device, with drag and drop, Reverse and Reset. ## Instalación 1. Upload the `flavor-block-visibility` folder to `/wp-content/plugins/` 2. Activate through the **Plugins** menu in WordPress 3. Select any block open the **Advanced** panel in the sidebar use the toggles 4. Optionally adjust breakpoints in **Settings Block Visibility** ## Preguntas frecuentes ### Does this work with third-party blocks? Yes. The plugin adds responsive controls to every registered Gutenberg block, including blocks from other plugins and themes. ### How does the hiding work? The plugin uses CSS media queries with `display: none !important`. No JavaScript is used for hiding. The CSS is only loaded on pages where at least one block uses a visibility toggle. ### How does the column order work? Select a Columns block and open **Responsive Column Order** in the block settings. Pick a device tab and reorder the columns. The order is applied with CSS `order` inside media queries, so it is correct immediately on page load. 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 Block Visibility**. In browsers without `moveBefore()` support, columns that contain iframes or videos keep the CSS-only order, so embeds are not reloaded. ### Does a column keep its width when moved? Yes. Order changes the position, not the width, so each column takes its width with it. ### Can I customize the breakpoints? Yes. Go to **Settings Block Visibility** to change the pixel values for mobile, tablet, and desktop breakpoints. ### Will this affect SEO? CSS-based responsive hiding is a standard web practice. Search engines understand media queries and do not penalize content that is responsively hidden. ### Does it work with Full Site Editing (FSE)? Yes. The plugin supports both classic themes and block themes with Full Site Editing. ## Reseñas ![](https://secure.gravatar.com/avatar/21494b22d9b5580f9c5290a2edf126d84c261675567c060e0f66aab43240ab78? s=60&d=retro&r=g) ### 󠀁[Хороший плагін](https://wordpress.org/support/topic/%d1%85%d0%be%d1%80%d0%be%d1%88%d0%b8%d0%b9-%d0%bf%d0%bb%d0%b0%d0%b3%d1%96%d0%bd-6/)󠁿 [Mykhailo Brych](https://profiles.wordpress.org/voltraider/) 7 de octubre de 2026 Дякую розробнику. Плагін класно працює. [ Leer la 1 reseña ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/) ## Colaboradores y desarrolladores “Flavor Block Visibility” es un software de código abierto. Las siguientes personas han colaborado con este plugin. Colaboradores * [ Vlad Zelinskyi ](https://profiles.wordpress.org/wpspacenerd/) [Traduce “Flavor Block Visibility” a tu idioma.](https://translate.wordpress.org/projects/wp-plugins/flavor-block-visibility) ### ¿Interesado en el desarrollo? [Revisa el código](https://plugins.trac.wordpress.org/browser/flavor-block-visibility/), echa un vistazo al [repositorio SVN](https://plugins.svn.wordpress.org/flavor-block-visibility/), o suscríbete al [log de desarrollo](https://plugins.trac.wordpress.org/log/flavor-block-visibility/) por [RSS](https://plugins.trac.wordpress.org/log/flavor-block-visibility/?limit=100&mode=stop_on_copy&format=rss). ## Registro de cambios #### 2.0.0 * New: Responsive Column Order panel for the core Columns block — different column order for Mobile, Tablet and Desktop. * New: reorder by drag and drop or with arrow buttons; Reverse and Reset per device. * New: the editor canvas shows the column order of the current device preview; hovering a column in the list highlights it. * New: stored order follows columns when they are added, removed or moved. * New: optional accessible DOM order (Settings Block Visibility), enabled by default. * New: refreshed settings page design — breakpoints grouped by device. Same settings and saving as before. * Improved: block themes now load the CSS only on pages that use it. * Improved: the editor reads the preview device from core/editor (WP 6.5+), avoiding deprecated selectors. * Fix: editor indicators no longer wrap blocks in an extra element, which broke Columns widths in the editor. * Requires WordPress 6.2 or later. #### 1.1.0 * Editor: blocks hidden on the current preview device now display a grey overlay with a label — so it’s clear they won’t appear on that device. * Editor: blocks with any hide rule show a thin blue outline and a small badge on other devices — visual confirmation the plugin is active. * Removed the old dashed outline in favour of the new per-device-aware indicators. #### 1.0.0 * Initial release. * Hide on Desktop, Tablet, and Mobile toggles for all Gutenberg blocks. * Customizable breakpoints via Settings page. * Conditional CSS loading — styles only load when needed. * Visual editor indicators for hidden blocks. ## Meta * Versión **2.0.0** * Última actualización **hace 4 semanas** * Instalaciones activas **90+** * Versión de WordPress ** 6.2 o superior ** * Testeado hasta **7.1.3** * Versión de PHP ** 7.4 o superior ** * Idioma * [English (US)](https://wordpress.org/plugins/flavor-block-visibility/) * Etiquetas: * [columns](https://es-ar.wordpress.org/plugins/tags/columns/)[gutenberg](https://es-ar.wordpress.org/plugins/tags/gutenberg/) [mobile](https://es-ar.wordpress.org/plugins/tags/mobile/)[responsive](https://es-ar.wordpress.org/plugins/tags/responsive/) [visibility](https://es-ar.wordpress.org/plugins/tags/visibility/) * [Vista avanzada](https://es-ar.wordpress.org/plugins/flavor-block-visibility/advanced/) ## Valoraciones 5 de 5 estrellas. * [ 1 valoración de 5 estrellas ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/?filter=5) * [ 0 valoraciones de 4 estrellas ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/?filter=4) * [ 0 valoraciones de 3 estrellas ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/?filter=3) * [ 0 valoraciones de 2 estrellas ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/?filter=2) * [ 0 valoraciones de 1 estrellas ](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/#new-post) [Ver todas las reseñas](https://wordpress.org/support/plugin/flavor-block-visibility/reviews/) ## Colaboradores * [ Vlad Zelinskyi ](https://profiles.wordpress.org/wpspacenerd/) ## Soporte ¿Tenés algo que decir? ¿Necesitás ayuda? [Ver el foro de asistencia](https://wordpress.org/support/plugin/flavor-block-visibility/) ## Donar ¿Te gustaría apoyar el progreso de este plugin? [ Doná a este plugin ](https://www.spacenerd.space/)