Responsive Picture Block

Core Essentials – Responsive Picture Block turns several standard Image blocks into one semantic, front-end <picture> HTML element. It’s built for art direction : choose different crops, compositions, or formats for different breakpoints (e.g., a tight mobile crop, a wider desktop crop, or an AVIF/WebP source).

Why this matters:

• <picture> vs <img srcset> srcset is great for picking the right resolution of the same image. But when you need different content (crop/ratio/composition) at different viewport widths, you need art direction — that’s exactly what <picture> does by letting you swap entire sources via <source media="…"> .
• Editor-first UX Authors see a single “Responsive Picture (Block)” wrapper, then insert one Image per breakpoint. The plugin mirrors the link /caption from the Desktop image. Per-image design controls (aspect ratio, object-fit, width/height) are respected. The block’s preview shows the native Desktop / Tablet / Mobile toolbar: Desktop preview ⇒ show all child images
• Tablet preview ⇒ show Tablet , else Desktop , else Mobile
• Mobile preview ⇒ show Mobile , else Tablet , else Desktop

Perfect source ordering Custom media queries are auto-sorted so the correct <source> wins (most specific first). Works with max-width , min-width , and range queries.

Key Features

• Wraps multiple core Image blocks into a single semantic <picture>
• Pick Desktop / Tablet / Mobile / Custom images (true art direction)
• Override media per Tablet/Mobile/Custom (e.g., (max-width: 1200px) )
• Optional sizes override per source (advanced bandwidth tuning)
• Allows width, height, aspect-ratio, object-fit per breakpoint
• Uses link + caption from the Desktop (fallback) image
• Editor preview follows WordPress’ device switcher (Desktop/Tablet/Mobile)
• Prevents layout overflow; picture wrapper is fully responsive
• Works with standard WP image sizes and responsive srcset
• Lightweight, no front-end JS — pure HTML/CSS on the front end