Flavor Block Visibility — Hide Blocks on Mobile and Reorder Columns

Hide any Gutenberg block on mobile, tablet or desktop and set a separate column order per device, straight from the block settings in the editor.

The problem

An element often needs to be hidden on one device and kept on another. A large hero image works on desktop and only gets in the way on a phone. A line of text that is needed on mobile becomes redundant next to a large screen. WordPress itself offers nothing for this. The feature usually comes with block packs and third-party page builders, otherwise you write styles or scripts by hand.

I work with native Gutenberg a lot, and doing this with styles or scripts is not always convenient. So I built a small plugin that closes the gap.

Hiding blocks on mobile, tablet and desktop

Every Gutenberg block, native or third-party, gets three toggles in its Advanced panel: hide on desktop, tablet or mobile. Hiding runs on CSS media queries, with no JavaScript, and the styles load only on pages where a toggle is actually used. Breakpoints are editable in the settings. In the editor, blocks hidden on the current preview device are dimmed, so the state is visible while working, not after publishing.

This was my first plugin published on wordpress.org.

Responsive column order

The Columns block got a Responsive Column Order panel: a separate column order for each device, by drag and drop or arrow buttons, with reverse and reset. The second thing I used to do with styles by hand. The order is set with CSS order, so it is correct from the first paint, and an optional script also moves the elements in the HTML, so keyboard navigation and screen readers follow the same order.

Requires WordPress 6.2 or later.