Toro_Unit (Hiroshi Urabe)

Aki Hamano

<p>Enable Responsive Image adds settings to the Image block to display different images depending on the width of the screen. You can add multiple images and set media queries and resolution for each image. If the screen width matches the conditions of that media query, it will switch to the corresponding image.</p>
<h3>Resources</h3>
<h4>Image for screenshot</h4>
<ul>
<li>License: Public Domain</li>
<li>Source: https://openverse.org/image/cd8e5cc5-d38a-462e-b4c1-1ea5c6f94e20</li>
</ul>


Enable Responsive Image


This is exactly the plugin I wanted. Thank you.


Must install for website creation at work.

WordPress plugin that adds settings to the Image block to display different images depending on the width of the screen.

Specia1ne

<blockquote>
<p><strong>See exactly how many columns appear on every device.</strong> 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.</p>
</blockquote>
<h3>Key features</h3>
<ul>
<li><strong>Four responsive breakpoints.</strong> Fine-tune Desktop, Tablet landscape, Tablet portrait, and Mobile column counts (1–6 columns).</li>
<li><strong>Theme-aware gaps.</strong> Uses your theme’s block gap as a starting point and lets you override horizontal and vertical spacing independently.</li>
<li><strong>One-click Masonry for Query Loop (Grid).</strong> No jQuery, automatically reflows posts as your content changes.</li>
<li><strong>Native block experience.</strong> Works directly inside core/Columns and core/Post Template (grid) so patterns, reusable blocks, and theme.json continue to work.</li>
<li><strong>Lightweight.</strong> Modern ES modules (~4 kB compressed) and CSS custom properties. Editor assets load only when needed.</li>
</ul>
<h3>How it works</h3>
<p>The plugin adds a <code>has-s1-rc-columns</code> class and a handful of CSS custom properties:</p>
<pre><code>--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 */
</code></pre>
<p>Your theme’s layout styles stay in control — Responsive Columns only adjusts <code>grid-template-columns</code> and gap values inside media queries. Disable or uninstall the plugin and the columns fall back to WordPress defaults without leaving orphan styles behind.</p>
<h3>Editor experience</h3>
<ul>
<li>Inspector panel with device icons, tooltips, and numeric inputs for precise values.</li>
<li>Theme gap detection with a reset button to restore defaults in one click.</li>
<li>Gap linking lets you mirror vertical spacing or split it into a custom row gap.</li>
<li>Masonry toggle explains prerequisites (Query Loop + Grid layout with a desktop column count).</li>
</ul>
<h3>Accessibility & localisation</h3>
<ul>
<li>All UI controls are keyboard accessible and include human-readable labels.</li>
<li>Strings are translation ready via the <code>responsive-columns</code> text domain and JSON translation support.</li>
</ul>


Responsive Columns

Adaptive column counts, gap controls, and Masonry layouts for core Columns and Query Loop blocks — no custom blocks required.

Enable Responsive Image vs Responsive Columns