CNO Responsive Blocks

Adds responsive controls to WordPress blocks for enhanced layout flexibility.

How it Works - [CSS]

_utils.scss

_utils.scss defines three simple breakpoints (based on Bootstrap 5's available breakpoints), “Mobile”, “Tablet” and “Desktop”—none, sm, and lg respectively. It also defines a sass map that, for clarity's sake, I'll explain with Typescript.

type $classes = {
    [css: string]: {
        // injected into generated `.is-visible-at-{$css}-size` class
        query: string /* CSS Range syntax */;
        label: string; /* Used for the Block Editor */
    };
};

FrontEnd CSS

style.scss injects two classes: .has-responsive-settings and .is-visible-at-{$selector}-size, where $selector is generated by looping through the $classes map defined in _utils.scss. The query uses the modern CSS Media Query Range Syntax and grabs the breakpoints from the predefined $breakpoints list.

The actual media query uses display:none to hide things, which is backwards from how one might normally think of doing things. This is done intentionally so that the plugin is agnostic about display values, and only hides things when they shouldn't show up. Example:

Choosing “Desktop Only” sets a .is-visible-at-desktop-size class that actually hides the element at viewport widths smaller than $breakpoints.desktop!

View the changelog