Initial implementation of improved image `sizes` algorithm

[joemcgill]

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

[joemcgill]

While talking through the initial implementation with @mukeshpanchal27 we identified that one of the challenges to this initial implementation is parsing the padding settings from theme.json to use in the proposed improved algorithms suggested in the description above.

That's because many times the theme.json settings for padding reference presets via CSS variables, ex:

"spacing": {
	"padding": {
		"left": "var(--wp--preset--spacing--50)",
		"right": "var(--wp--preset--spacing--50)"
	}
},

Since sizes are parsed before CSS has loaded, we'll need to solve how to parse theme.json paddings into real values. For now, we can simplify our initial implementation to only consider alignment widths:

• default: (max-width: contentSize) 100vw, contentSize
• wide: (max-width: wideSize ) 100vw, widesize
• full: 100vw

[mukeshpanchal27]

@joemcgill, while working on the left/right alignment, I noticed that if the image is smaller than the content or wide size, it returns the wrong size. In such cases, we need to return the smaller value among the image width, content size, or wide size.

The different widths used in theme.json for content and wide size are:

• 620px
• min(640px, 90vw)
• 90vw

How do we get the actual width from the last two width options?

[mukeshpanchal27]

@joemcgill Do we needs to close this issue as initial implementation PR merged.

[joemcgill]

Do we needs to close this issue as initial implementation PR merged.

Sure can!