MethodAspectRatio

Overview

Aspect ratio, fixed height, and percentage‑based sizing controls for image and media blocks.

• File: lib/blocks/components/MethodAspectRatio.js
• Panel context: Typically rendered inside a PanelBody (e.g., “Aspect Ratio” or “Image Settings”)

---

Props

Prop	Type	Default	Description
breakpoint	string	(required)	The responsive breakpoint: base, mobile, tablet, or wide
attributes	object	(required)	The block’s full attributes object
setAttributes	function	(required)	WordPress setAttributes function

---

Controls

Responsive Override (non‑base breakpoints only)

• UI: CheckboxControl labeled “Custom Aspect”.
• Settings key: responsiveSettings.{breakpoint}.customAspect

Gates the remaining controls for non‑base breakpoints.

This feature is still in under development.

---

Aspect / Sizing Mode

• UI: SelectControl dropdown.
• Settings key: responsiveSettings.{breakpoint}.aspectUses

Option	Value	Behavior
Default (Square)	"" (empty)	Applies a 1:1 square ratio via CSS class
Ratio	"ratio"	Shows the aspect ratio preset selector
Height	"height"	Shows a UnitControl for explicit height
Percentage	"percentage"	Shows a UnitControl for percentage‑based height (padding‑top technique)

---

Aspect Ratio Presets

• UI: SelectControl dropdown.
• Settings key: responsiveSettings.{breakpoint}.aspectRatio
• Visibility: Only when aspectUses === "ratio"

Label	Value	Description
1:1	"" (empty)	Square
3:2	"-3-2"	Landscape
4:3	"-4-3"	Classic
5:4	"-5-4"	Near‑square landscape
16:9	"-16-9"	Widescreen
2:3	"-2-3"	Portrait
3:4	"-3-4"	Classic portrait
4:5	"-4-5"	Near‑square portrait
9:16	"-9-16"	Tall portrait

Values are CSS class suffixes — used to build classes like method-ratio-16-9.

---

Height

• UI: UnitControl with units: px, em, rem.
• Settings key: responsiveSettings.{breakpoint}.height
• Visibility: Only when aspectUses === "height"

---

Percentage

• UI: UnitControl with unit: % only.
• Settings key: responsiveSettings.{breakpoint}.aspectPercentage
• Visibility: Only when aspectUses === "percentage"

---

CSS Output

MethodStyleTag handles aspectRatio in the selector map:

• Height mode: Sets height and padding-top: 0
• Percentage mode: Sets padding-top to the percentage and height: 0
• Ratio mode: CSS classes (method-ratio method-ratio-{value}) handle the ratio; no inline style needed. This may be revised in a future release to support mobile overrides.

---

Usage by Blocks

Block	Included Controls	Custom Label
Section	alignItems	“Content Vertical Alignment”
Container	alignItems	“Content Vertical Alignment”
Advanced Grid Row	alignItems, justifyContent	—
Basic Grid	alignItems, justifyContent	—
Flex Container	alignItems, justifyContent, flexDirection	—
Buttons	alignItems, justifyContent, flexDirection	—
Breadcrumb	alignItems, justifyContent	—
Social Nav	justifyContent, flexDirection	—