外掛說明

See exactly how many columns appear on every device. Responsive Columns extends the core Columns block and the Query Loop (grid) template with precise controls for four breakpoints, X/Y gap management, and an optional Masonry layout.

Key features

Four responsive breakpoints. Fine-tune Desktop, Tablet landscape, Tablet portrait, and Mobile column counts (1–6 columns).
Theme-aware gaps. Uses your theme’s block gap as a starting point and lets you override horizontal and vertical spacing independently.
One-click Masonry for Query Loop (Grid). No jQuery, automatically reflows posts as your content changes.
Native block experience. Works directly inside core/Columns and core/Post Template (grid) so patterns, reusable blocks, and theme.json continue to work.
Lightweight. Modern ES modules (~4 kB compressed) and CSS custom properties. Editor assets load only when needed.

How it works

The plugin adds a has-s1-rc-columns class and a handful of CSS custom properties:

--s1-rc-columns-mobile-portrait
--s1-rc-columns-mobile-landscape
--s1-rc-columns-tablet-portrait
--s1-rc-columns-tablet-landscape
--s1-rc-columns-desktop /* auto-added for Masonry /
--s1-rc-gap-x / horizontal /
--s1-rc-gap-y / vertical, falls back to X */

Your theme’s layout styles stay in control — Responsive Columns only adjusts grid-template-columns and gap values inside media queries. Disable or uninstall the plugin and the columns fall back to WordPress defaults without leaving orphan styles behind.

Editor experience

Inspector panel with device icons, tooltips, and numeric inputs for precise values.
Theme gap detection with a reset button to restore defaults in one click.
Gap linking lets you mirror vertical spacing or split it into a custom row gap.
Masonry toggle explains prerequisites (Query Loop + Grid layout with a desktop column count).

Accessibility & localisation

All UI controls are keyboard accessible and include human-readable labels.
Strings are translation ready via the responsive-columns text domain and JSON translation support.

螢幕擷圖

Four-column grid on desktop with Responsive Columns panel open.
Two-column tablet view showing adjusted breakpoints.
Single-column mobile view after resizing slider.

安裝方式

Upload the plugin folder to /wp-content/plugins/ or search “Responsive Columns” in Plugins Add New.
Activate the plugin.
Select a Columns block or Query Loop Grid, open the sidebar, and expand the Responsive Columns panel.

常見問題集

Does it work with Reusable Blocks and Patterns?: Yes. Responsive settings are saved as native block attributes and persist across reusable blocks, synced patterns, and template parts.
Will my layout break if I uninstall the plugin?: No. Extra attributes are ignored by core blocks once the plugin is removed. Your content reverts to the default responsive behaviour (stacking on smaller screens).

使用者評論

這個外掛目前沒有任何使用者評論。

參與者及開發者

以下人員參與了開源軟體〈Responsive Columns〉的開發相關工作。

Specia1ne

將〈Responsive Columns〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣？

任何人均可瀏覽程式碼、查看 SVN 存放庫，或透過 RSS 訂閱開發記錄。

變更記錄

1.1.1

Fixes & Defaults:
“Reset responsive settings” now restores gap values directly from the active theme (theme.json).
New blocks initialize with the correct default gap from the theme or a reliable fallback (24px).
UX Improvements:
Column and row gaps now stay synchronized consistently when linked (X Y).
Editor controls always display real pixel values based on the theme rather than placeholders.
Masonry Guard:
Added a responsive validation layer that only enables Masonry for valid Query Loop grid layouts.
The toggle now includes clear inline guidance and automatic reset behavior when prerequisites are not met.

1.1.0

Security & Stability:
Reworked the HTML filter to use WP_HTML_Tag_Processor instead of regex, ensuring safe and predictable markup updates.
Hardened asset loading — scripts now read dependencies and versions directly from index.asset.php with graceful fallbacks.
Quality & Performance:
Optimized front-end Masonry with clamped gap values, rate-limited resize handling, and automatic observer cleanup to prevent layout thrashing.
Streamlined attribute updates in the editor inspector, reducing redundant renders and simplifying logic.
Accessibility & i18n:
Added clearer screen-reader descriptions for gap sliders and improved help text for Masonry controls.
Verified full localization support.

1.0.0

Initial public release — breakpoints, gap controls, and Masonry option.