WordPress.org

Make WordPress Core

Opened 5 months ago

Last modified 4 months ago

#42920 new enhancement

Add support for the picture element

Reported by: desrosj Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch 2nd-opinion needs-unit-tests
Focuses: Cc:

Description

The <picture> element is in the HTML standard and should be supported in WordPress (https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element).

Similar to the <audio> and <video> elements, the <picture> element can contain multiple <source> child attributes, providing the browser with different formats for the same resource. Each source can have its own srcset, media, and sizes attributes, among others, to control which source is used under specific circumstances (such as screen width). After all <source> tags are output, an <img /> tag is required as a fallback.

Adding support for the <picture> element can help in many areas. Here are a few:

Adding <picture> elements to core's output could be tricky for backwards compatibility. Themes are most likely targeting <img /> tags as direct children of other elements in CSS and JS. There are also a few oddities in CSS with styling the <picture> element.

Proposed Solution

The solution I am proposing is to add picture to the html5 array in registered theme support. This would allow us to encourage themes to add support and proper styling for the picture element when they are ready. When themes adopt this feature, future releases of WordPress (or plugins) could add <source> elements to <picture> elements as more performant formats are supported. Sites would receive all of the benefits of the new enhancements without any updates needed from themes.

Unsolved

Hardcoded images in post content and widgets would not be solved with this approach. They would continue as hardcoded <img /> tags. This may not be a bad thing but may require additional CSS rules in themes to handle correctly.

Browser support for the <picture> element is very good. According to https://caniuse.com/#feat=picture, the only modern browser lacking support is IE11.

Other notes

Tackling this may also be dependant on #29807.

Initial Patch

My initial incoming patch adds documentation for the html5 picture support for themes and wraps the get_image_tag()/wp_get_attachment_image() <img /> output in a <picture> element.

Attachments (1)

42920.diff (1.2 KB) - added by desrosj 5 months ago.
Initial patch.

Download all attachments as: .zip

Change History (5)

@desrosj
5 months ago

Initial patch.

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


5 months ago

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


5 months ago

This ticket was mentioned in Slack in #core-media by desrosj. View the logs.


4 months ago

#4 @desrosj
4 months ago

Related #29807.

Note: See TracTickets for help on using tickets.