=== Responsive Columns === Contributors: specia1ne Donate link: https://specia1ne.com Tags: gutenberg, block-editor, columns, responsive, css-grid Requires at least: 6.4 Tested up to: 6.9 Requires PHP: 7.4 Stable tag: 1.7.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Responsive controls for native Gutenberg blocks with flexible gaps, custom widths, responsive heights, and Masonry. == Description == Responsive Columns extends supported native Gutenberg blocks with practical breakpoint controls for desktop, tablet, and mobile. It adds responsive controls for layouts, spacing, and spacer heights while keeping the original blocks, markup, and desktop behavior intact. It is designed to stay lightweight and familiar: native controls remain in place, responsive overrides inherit naturally, and advanced options only appear where the active block or layout supports them. ### Key features * Responsive controls for supported native Gutenberg blocks. * Five responsive breakpoints for layout controls, including Desktop, tablet, and mobile. * Shared breakpoint switching and predictable inheritance across supported controls. * Flexible `Gap` units with `px`, `rem`, and `em` support. * `Custom widths` and simple ordering controls for advanced multi-column layouts. * Responsive height overrides that keep the native desktop `Spacer` control intact. * Auto-fit and minimum column width support where the active layout supports them. * Optional Masonry for supported fixed-column layouts. * Theme-aware defaults and lightweight output based on CSS custom properties. ### How it works The plugin adds a small set of CSS classes and custom properties, such as: --s1-rc-columns-mobile-portrait --s1-rc-columns-mobile-landscape --s1-rc-columns-tablet-portrait --s1-rc-columns-tablet-landscape --s1-rc-columns-desktop --s1-rc-gap-x --s1-rc-gap-y --s1-rc-spacer-height-tablet --s1-rc-spacer-height-mobile Your theme stays in control of the base layout. Responsive Columns only adjusts supported responsive values at the configured breakpoints. If the plugin is removed, the blocks fall back to their normal WordPress behavior without leaving custom block markup behind. ### Editor experience * Responsive controls appear in the block inspector only when the selected block is supported. * Breakpoint tabs stay focused and inherit from larger breakpoints until you override them. * Advanced options only appear when the active block or layout supports them. * `Custom widths` can be used for more advanced multi-column layouts. * `Spacer` keeps the native desktop height setting while allowing responsive overrides on smaller devices. * Responsive `Spacer` height can be adjusted directly in the editor canvas where supported. * Gap defaults are pulled from the active theme when possible. * Gap controls support `px`, `rem`, and `em` while keeping reset and inheritance behavior predictable. * Masonry availability is validated before it can be enabled. * Local reset actions restore responsive values back to inherited or theme-aware defaults. ### Accessibility and localization * Inspector controls are keyboard accessible and labeled for screen readers. * Strings are translation-ready via the `responsive-columns` text domain. == Installation == 1. Upload the plugin folder to `/wp-content/plugins/` or install Responsive Columns from the WordPress plugin directory. 2. Activate the plugin. 3. Select a supported block and open its responsive panel in the sidebar. == Frequently Asked Questions == = Which blocks are supported? = Support is added block by block. If the selected block shows a responsive panel in the editor sidebar, it is supported in the current version. = Does it work with reusable blocks and patterns? = Yes. Settings are stored as native block attributes, so they remain with reusable blocks, synced patterns, and template parts. = Will layouts break if I uninstall the plugin? = No. WordPress ignores the extra attributes after the plugin is removed, so content falls back to the default responsive behavior. = Can I use rem or em values for gap controls? = Yes. `Gap` and `Row gap` support `px`, `rem`, and `em`, while older saved `px` values remain fully compatible. = Can I set a different Spacer height on tablet and mobile? = Yes. Keep the native desktop height in the Spacer block settings, then use the `Responsive height` panel for tablet and mobile overrides. = Does it depend on a specific theme? = No. The plugin extends native core blocks and keeps the active theme in charge of layout styles and spacing tokens. == Screenshots == 1. Query Loop grid in Manual mode with shared responsive Columns and Gap controls. 2. Query Loop grid in native Auto mode with Minimum column width, Gap, and Masonry guidance. 3. Tablet breakpoint override for Query Loop columns with inherited gap values. 4. Parent core/Columns controls in `Custom widths` mode with per-breakpoint gap settings. 5. Child `Responsive Column` controls with custom width and order overrides for asymmetric layouts. 6. Gallery responsive controls with tablet columns and theme-aware gap settings. == Changelog == = 1.7.0 = * Added responsive height controls for native `core/spacer` blocks on tablet and mobile. * Added live resizing for responsive `Spacer` height in tablet and mobile editor previews. * Added height inheritance so mobile can reuse the tablet height when needed. * Improved block validation so supported native blocks remain valid in the editor when the plugin is deactivated. = 1.6.0 = * Added responsive column controls for native `core/gallery` blocks. * Added responsive `Gap` support for galleries with `px / rem / em`. * Added gallery editor preview for tablet and mobile breakpoints. * Kept native gallery desktop layouts intact while extending smaller breakpoints. = 1.5.1 = * Added tablet-only width inheritance for `Custom widths` in core/Columns layouts. * Kept phone breakpoints at `100%` width by default until you explicitly customize them. * Added `Reset` for per-breakpoint `Order` controls on individual Column blocks. * Improved `Custom widths` helper text and responsive column inspector flow. = 1.5.0 = * Added `Custom widths` mode for core/Columns responsive layouts. * Added per-column responsive `Width` controls for tablet and mobile breakpoints. * Added simple per-breakpoint `Order` controls with `Default`, `First`, and `Last`. * Kept standard parent `Columns` controls focused on equal-width responsive layouts while custom widths handles asymmetric layouts. * Improved front-end and editor rendering for custom-width core/Columns layouts with reliable gap behavior. = 1.4.1 = * Added `px / rem / em` support for `Gap` and `Row gap`. * Improved spacing controls to match the shared inline workflow used by `Minimum column width`. * Preserved direct theme gap values from `theme.json` when they use `px`, `rem`, or `em`. * Kept fallback handling for theme spacing variables predictable in the editor. = 1.4.0 = * Added native Query Loop `Grid item position` integration for `Manual` and `Auto` layouts. * Added `Minimum column width` support for Query Loop grids in `Auto` mode. * Added front-end and editor auto-fit rendering for responsive Query Loop grids. * Improved Query Loop column controls to match native desktop behavior while keeping responsive overrides practical. * Added stronger Masonry guardrails and clearer notices for auto-fit and one-column states. * Refined Query Loop inspector copy and layout for a cleaner editing flow. = 1.3.0 = * Added one shared breakpoint switcher for Columns and Gap controls, including Desktop. * Added responsive gap inheritance with per-breakpoint overrides and clearer helper text. * Added smarter local reset actions for columns and gap controls inside the inspector. * Refined the inspector layout, labels, and section spacing for a cleaner editing flow. * Added bundled translations and proper PHP/JS localization loading for editor strings. = 1.2.0 = * Hardened front-end gap sanitization with safer CSS value validation. * Improved theme gap detection for `theme.json` preset and custom CSS variable formats. * Fixed editor preview selectors so responsive styles target only supported blocks. * Improved Masonry stability during image loading, resize events, and dynamic content updates. * Registered shared front-end styles per supported block instead of loading them globally. * Cleaned up project metadata for ongoing maintenance and future releases. = 1.1.1 = * Reset responsive settings now restores gap values directly from the active theme. * New blocks initialize with the correct default gap from the theme or a reliable fallback (`24px`). * Column and row gaps stay synchronized consistently when linked. * Editor controls now display real pixel values based on the theme rather than placeholders. * Added a validation layer that only enables Masonry for valid Query Loop grid layouts. = 1.1.0 = * Reworked the HTML filter to use `WP_HTML_Tag_Processor` instead of regex. * Hardened asset loading by reading script dependencies from `index.asset.php` with graceful fallbacks. * Optimized Masonry with clamped gap values, rate-limited resize handling, and observer cleanup. * Improved accessibility text for gap sliders and Masonry controls. = 1.0.0 = * Initial public release. == Upgrade Notice == = 1.7.0 = This update adds responsive `Spacer` heights for tablet and mobile, including live resizing in editor previews. = 1.6.0 = This update adds responsive controls for native Gallery blocks, including tablet/mobile columns, `Gap`, and closer editor preview behavior. = 1.5.1 = This update adds tablet-aware width inheritance for `Custom widths`, safer `100%` phone defaults, and `Reset` for per-column order controls. = 1.5.0 = This update adds `Custom widths` for core/Columns, including per-column responsive width and order controls for asymmetric layouts. = 1.4.1 = This update adds `px / rem / em` support for `Gap` and `Row gap`, with better theme-aware defaults and consistent inline controls. = 1.4.0 = This update adds native Query Loop auto-fit support with Minimum column width, closer editor/front-end alignment, and safer Masonry behavior. = 1.3.0 = This update introduces a unified responsive control panel, per-breakpoint gap inheritance, and bundled editor translations. = 1.2.0 = This update improves reliability across themes and stabilizes Masonry and editor preview behavior without changing the plugin's scope.