Make WordPress Core

Opened 3 years ago

Last modified 6 months ago

#45407 assigned defect (bug)

Add block attributes to `wp_calculate_image_sizes` to allow for proper handling of `sizes` attribute — at Version 2

Reported by: mor10 Owned by:
Milestone: Future Release Priority: high
Severity: major Version:
Component: Media Keywords: dev-feedback needs-patch
Focuses: Cc:

Description (last modified by azaozz)

Related Gutenberg issues:

Related Trac tickets:


For images with no alignment or images where the image block is aligned alignwide and alignfull, the sizes attribute reads:

sizes="(max-width: 1024px) 100vw, 1024px"

This means regardless of the displayed width of an image, the largest image file pulled by the browser is the generated 1024px image. If the displayed image width is wider than 1024px, the browser will stretch the image to compensate causing blur and artifacts.

Historically this was solved by theme developers by augmenting the sizes attribute using the wp_calculate_image_sizes filter.

The new alignwide and alignfull widths cannot currently be accommodated using this filter because the filter does not contain information about the alignment value of the containing block.

Proposed solution

Modify the wp_calculate_image_sizes filter to include a new fifth parameter $block_attr containing an array which includes [align] which holds the alignment value for the containing block.

This is a stop-gap measure as we wait for Gutenberg PR 11973 https://github.com/WordPress/gutenberg/pull/11973 to merge.

Why this is a blocker

From my perspective, this is a blocker to 5.0 for three main reasons:

  1. As stated earlier, the current implementation of images means images with no alignment or images where the image block is aligned alignwide and alignfull are supplied with an incorrect sizes attribute by core. Theme developers cannot fix this because they have no way of filtering for different block widths. The end result is the visitor experiences blurry and/or artifact-heavy images which will be interpreted as an error. No theme (Twenty Nineteen included) handles responsive images correctly at the moment meaning all "Gutenberg-ready" themes with wide and full image options will display blurry/artifact-full images.
  2. A solution to this problem must be one which stands the test of time. Once a solution is introduced, every theme (including core themes) must be updated. Shipping an interim solution which will later be changed puts an undue burden on theme developers and will impose legacy debt on WordPress Core to provide support for the interim solution in the long term. The proposal to add $block_attr with the [width] value to the wp_calculate_image_sizes filter is a mini version of what is proposed in Gutenberg PR 11973 and will be forward-compatible to more advanced images handling by themes.
  3. 5.0 is shipping to millions of sites world wide. WordPress has a responsibility to follow web standards and use them correctly. The current implementation of the sizes attribute is insufficient and causes incorrect behavior for the end-user.

Further context

Change History (3)

This ticket was mentioned in Slack in #core-themes by mor10. View the logs.

3 years ago

#2 @azaozz
3 years ago

  • Description modified (diff)

3 years ago

Note: See TracTickets for help on using tickets.