內容簡介
總結：Core Essentials – Responsive Picture Block 將多個標準的 Image blocks 轉換為一個語義化的前端 <picture> HTML 元素。這是為了藝術方向而建立的：在不同斷點（例如緊湊的手機裁剪、較寬的桌面裁剪或 AVIF/WebP 資源）選擇不同的裁剪、構圖或格式。
問題與答案：
1. 為什麼使用 <picture> 有重要性？
- 回答：當您需要在不同視口寬度下享有不同內容（裁剪/比例/構圖）時，<img srcset> 雖然非常適合選擇正確的相同圖像解析度，但如果需要藝術指導，那麼 <picture> 通過讓您透過 <source media="..."> 交換整個來源來實現這一點。
2. 為什麼使用 Responsive Picture Block 的的編輯人員使用體驗很好？
- 回答：編者看到單一的“ Responsive Picture（Block）”包裹器，然後在每個斷點插入一個圖像。該外掛會從桌面圖像複製鏈接/說明。每個圖像的設計控件（長寬比、對象適配、寬度/高度）都會受到尊重。該區塊的預覽展示原生的桌面/平板電腦/手機工具列。
外掛標籤
開發者團隊
原文外掛簡介
Core Essentials – Responsive Picture Block turns several standard Image blocks into one semantic, front-end
Why this matters:
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
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
Key Features
Wraps multiple core Image blocks into a single semantic
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
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
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 .
Block Details
Block name: ce/responsive-picture
Children: one or more core/image blocks
Front-end HTML output:
