{
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	"name": "rooster/responsive-image",
	"version": "1.0.0",
	"title": "Responsive image",
	"category": "media",
	"icon": "format-image",
	"description": "A picture that opens a page: a file for computers (an SVG stays as it is) and one for phones, from which the block makes its WebP sizes and serves each screen the one it needs, sized, titled and preloaded as the page's first paint; beside either, an SVG of the same picture as its sharp version, which a sharp screen takes after the first interaction. The LCP primitive for heroes and banners.",
	"keywords": [ "picture", "hero", "banner", "art direction", "webp" ],
	"textdomain": "ai-eshop-optimizer",
	"attributes": {
		"desktopId": { "type": "integer", "default": 0 },
		"desktopAlt": { "type": "string", "default": "" },
		"mobileId": { "type": "integer", "default": 0 },
		"mobileAlt": { "type": "string", "default": "" },
		"decorative": { "type": "boolean", "default": false },
		"desktopVectorId": { "type": "integer", "default": 0 },
		"mobileVectorId": { "type": "integer", "default": 0 },
		"title": { "type": "string", "default": "" },
		"href": { "type": "string", "default": "" },
		"sizes": { "type": "string", "default": "" },
		"priority": { "type": "string", "enum": [ "auto", "high", "low" ], "default": "auto" },
		"loading": { "type": "string", "enum": [ "auto", "lazy", "eager" ], "default": "auto" },
		"breakpoint": { "type": "integer", "default": 782 },
		"rounded": { "type": "boolean", "default": true },
		"desktopAspectRatio": { "type": "string", "default": "" },
		"mobileAspectRatio": { "type": "string", "default": "" }
	},
	"supports": {
		"html": false,
		"align": [ "wide", "full" ],
		"spacing": { "margin": true },
		"rooster": { "defer": { "allowed": false } }
	},
	"rooster": {
		"ui": {
			"desktopId": { "control": "media", "label": "Image for computers (an SVG stays as it is; a raster gets WebP sizes)" },
			"mobileId": { "control": "media", "label": "Image for phones (a raster; the block makes its WebP sizes; empty: the computers' image)" },
			"desktopVectorId": { "control": "media", "label": "Sharp version for computers (an SVG of the same picture: the image above paints first, small, and a sharp screen takes the SVG after the visitor's first touch, scroll or key)" },
			"mobileVectorId": { "control": "media", "label": "Sharp version for phones (an SVG of the phone image, the same way; empty: the computers' sharp version when the phones show the computers' image)" },
			"title": { "label": "Title, the tooltip (empty: the image's title)" },
			"desktopAlt": { "label": "Text alternative (empty: the image's, else the title)" },
			"mobileAlt": { "label": "Text alternative of the phone image (empty: the same)" },
			"decorative": { "label": "Decorative: an empty text alternative (alt=\"\") and no title, whatever the image's own; for a picture the text beside it already says" },
			"href": { "control": "url", "label": "Link" },
			"sizes": { "label": "Sizes (empty: from the alignment)", "placeholder": "(max-width: 781px) calc(100vw - 32px), 1280px" },
			"priority": { "label": "Fetch priority (auto: high for the first picture on the page)" },
			"loading": { "label": "Loading (auto: eager for the first picture on the page, lazy after it)" },
			"breakpoint": { "label": "Phones up to (px)" },
			"rounded": { "label": "The media corners" },
			"desktopAspectRatio": { "placeholder": "16/9" },
			"mobileAspectRatio": { "placeholder": "4/5" }
		}
	},
	"render": "file:./render.php"
}