WordPress 6.3 page

[ryelle]

This should be a page dedicated to the 6.3 release.

We'll use https://wordpress.org/download/releases/6-3/

The page already exists and was synced to the theme in https://github.com/WordPress/wporg-main-2022/commit/013c2898f63e30dac2f4cd0caebba29436cbd47d and https://github.com/WordPress/wporg-main-2022/commit/8d894c9219745e892ae0084974c407244220f19f. This issue can track any followup work.

Once the content on the page is final, we'll do another sync to deploy it to production.

[SaxonF]

A couple small requests for this page:

• a utility class for adding z-index: 1/2/3/4. This will be used to ensure hero video sits underneath text
• a utility class for adding overflow: hidden;

Ideally we also have the ability to autoplay a video as it enters the viewport. In future we can create a behaviour for this but might just need a script that checks for a specific classname on scroll. This is not 100% needed as we can just loop the videos if needed.

[ryelle]

Ideally we also have the ability to autoplay a video as it enters the viewport. we can just loop the videos if needed.

The WordPress.org website aims to comply with WCAG AA for accessibility, so if we autoplay video, it needs to be less than 5 seconds and not loop, or it needs to have visible controls to pause it.

Some groups of people may have a problem with moving content on a web page that starts without warning. This includes people with certain types of learning difficulties who can find it hard to concentrate or focus on tasks when distractions are present. — https://www.a11yproject.com/posts/never-use-auto-play/

In Firefox, if the Video block autoplays, it does not have visible controls until it's hovered, so I would not consider that enough of a "visible control" to meet the requirement. Controls are visible to play if the video does not autoplay, though. A video in the Cover block has no controls at all, so it must be less than 5 seconds and not loop.

We can add some utility classes— just class names so you can add them to blocks in the advanced panel?

[SaxonF]

just class names so you can add them to blocks in the advanced panel?

Yes please

A video in the Cover block has no controls at all, so it must be less than 5 seconds and not loop.

So the general rule is less than 5 seconds its ok to autoplay with no controls and no looping? The videos are not essential (except for the top hero video which can be under 5 seconds), they just add a bit of flare, so can replace with images if needed.

[ryelle]

So the general rule is less than 5 seconds its ok to autoplay with no controls and no looping?

Correct, you can autoplay once through if it's 5 seconds or less. This way, if there are users who have issues with moving content, the movement is short enough that they can then refocus on the page content.

The videos are not essential, they just add a bit of flare, so can replace with images if needed.

You can keep the videos in the page as long as they're not autoplaying, if you want.

[ryelle]

You should be able to use has-z-index-1, has-z-index-2, has-z-index-3, has-z-index-4, and has-overflow-hidden now.

[SaxonF]

@ryelle thanks so much! We might also need to add a has-relative utility class OR add position: relative; to each z-index class.

[ryelle]

@SaxonF I've added position: relative to the z-index helper classes 👍🏻