Responsive Picture Block for WordPress Plugin Directory

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

Why <picture> (Art Direction 101) When your layout needs different imagery across breakpoints (e.g., a vertical crop on phones and a wide landscape on desktops), you’re doing art direction. The <picture> element enables this by letting the browser choose an entire source based on media conditions (and even file type, like AVIF/WebP), not just a different width of the same file. The result is better design control and faster pages because each device downloads only the most appropriate asset for its layout saving you bandwidth as well as having compositions control.

Use Cases

Hero banners with different crops for mobile vs desktop

Product images where the subject framing changes on small screens

Editorial layouts that require portrait vs landscape compositions

File format switching (e.g., AVIF/WebP with PNG/JPEG fallback)

Usage

Insert the Responsive Picture (Block) block.

Add Image blocks inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom.

Select each Image and open the Responsive: Breakpoint panel:

Viewport: Desktop / Tablet / Mobile / Custom

Override media query (Tablet/Mobile): optional (e.g., (max-width: 1200px))

Custom media query: required when using the “Custom” viewport

(Optional) Open Advanced: Sizes override to set a custom sizes="" for that source.

Use the editor’s Desktop / Tablet / Mobile preview to check the effective image per breakpoint.

Publish. The front end renders a single <picture> with perfectly ordered <source> tags and a fallback <img>.

Block Details

Block name: ce/responsive-picture

Children: one or more core/image blocks

Front-end HTML output:

<picture> <source media="(max-width: 767px)" srcset="…" sizes="…"> <source media="(max-width: 1024px)" srcset="…" sizes="…"> <!-- custom sources (auto-sorted) --> <img src="…" srcset="…" sizes="…" alt=""> </picture>