=== Responsive Picture Block === Contributors: coreessentials Tags: responsive images, picture element, art direction, gutenberg, block editor, media queries, srcset, sizes, object-fit, aspect-ratio, webp, performance, accessibility Requires at least: 6.3 Tested up to: 6.8 Requires PHP: 7.4 Stable tag: 1.0.0 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Create truly responsive, **art-directed** images in the block editor. Wrap multiple Image blocks (Desktop/Tablet/Mobile/Custom) and render a single `` HTML element with correctly ordered `` and editor previews that follow WordPress device switcher. == Description == **Core Essentials – Responsive Picture Block** turns several standard **Image** blocks into one semantic, front-end `` 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: - **`` vs ``** `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 `` does by letting you swap **entire sources** via ``. - **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 `` wins (most specific first). Works with `max-width`, `min-width`, and range queries. ### Key Features - Wraps multiple core **Image** blocks into a single semantic `` - 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 `` (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 `` 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) == Installation == 1. Upload the plugin folder to `/wp-content/plugins/` or install via the Plugins screen. 2. Activate **Core Essentials – Responsive Picture Block**. 3. In the block editor, add **Responsive Picture (Block)** and insert one **Image** per breakpoint. == Usage == 1. **Insert** the **Responsive Picture (Block)** block. 2. **Add Image blocks** inside it for: Desktop (fallback), Tablet, Mobile, and/or Custom. 3. **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 4. (Optional) Open **Advanced: Sizes override** to set a custom `sizes=""` for that source. 5. Use the editor’s **Desktop / Tablet / Mobile** preview to check the effective image per breakpoint. 6. Publish. The front end renders a single `` with perfectly ordered `` tags and a fallback ``. == Screenshots == 1. Block wrapper with Desktop, Tablet, Mobile child options 2. Front-end markup: `` with differnt image for mobile 3. Choosing Responsive Picture Block in the block editor 4. How art direction works with `` HTML == Frequently Asked Questions == = Does this replace `srcset` / responsive images? = No. Each `` (and the fallback ``) still uses WordPress’ native responsive `srcset`. The plugin adds **art direction** by swapping **sources** per breakpoint; `srcset` then chooses the best **resolution** within that source. = Can I add multiple custom breakpoints? = Yes. Add more **Custom** Images with your media queries. The plugin **sorts** them (and Tablet/Mobile) into the correct order so the right source wins. = Do I need to touch `sizes`? = No. It’s optional and only affects **resolution selection** inside a matched source. If you use it, follow the pattern: `(media) length, …, fallback-length` (e.g., `(max-width: 1024px) 100vw, 1024px`). = Accessibility? Alt text? = Alt text is taken from the **Desktop Image**, the image; the `` `` carries it. = What about aspect ratio and scale? = All aspect ratio and scale settings are taken from the individual image, so if your mobile image is 9:16 and desktop image is set to 4:3 both will be respected at their screen sizes. = Performance and formats? = You can upload **AVIF/WebP** assets and still provide a PNG/JPEG fallback in the Desktop image if needed. The browser will pick the **first matching** `` (by `media` and optionally `type`) and an optimal width via `srcset`. == Block Details == - Block name: `ce/responsive-picture` - Children: one or more `core/image` blocks - Front-end HTML output: ` `