Overview

This issue cover adding the first set of enhancement to the auto-sizes plugin, that improve the default image sizes algorithm by constraining the maximum sizes width by layout settings from theme.json and the content width setting in classic themes for default aligned images.

Approach

To kick off this effort, I’ve created a proof of concept implementation, which adds the sizes attribute to images in blocks during the block rendering process, via block render filters. This approach is based on the following initial proposal for new algorithms based on alignment values:

• default: (max-width: contentSize + padding) calc(100vw - padding), contentSize
• wide: (max-width: wideSize + padding) calc(100vw - padding), widesize
• full:
  • With useRootPaddingAwareAlignments: 100vw
  • Without useRootPaddingAwareAlignments: calc(100vw - padding)

Goal

An initial implementation should meet the following requirements:

• default aligned image blocks should incorporate the contentSize setting from theme.json
• wide aligned image blocks should incorporate the wideSize setting, if available
• full aligned images should subtract the padding setting when useRootPaddingAwareAlignments is not true, otherwise be 100vw