Commit Graph

4 Commits

Author SHA1 Message Date
Joe McGill 5ef714db18 Themes: Improve a11y and extendability of custom video headers.
This adds play/pause controls to video headers, along with voice
assistance, using `wp.a11y.speak`, to make custom video headers more
accessible. To make styling the play/pause button easier for themes,
CSS has been omitted from the default implementation.

This also includes a refactor of the `wp.customHeader` code to introduce
a `BaseHandler` class, which can be extended by plugins and themes to modify
or enhance the default video handlers.

Props davidakennedy, afercia, bradyvercher, joemcgill, adamsilverstein, rianrietveld.
Fixes #38678.
Built from https://develop.svn.wordpress.org/trunk@39272


git-svn-id: http://core.svn.wordpress.org/trunk@39212 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-11-16 23:26:31 +00:00
Joe McGill 89a70eb859 Themes: Remove jQuery dependency from wp-custom-header.js.
In [38985], we used jQuery to trigger a custom event once a video
handler has completed so themes, like Twenty Fourteen, can execute
their own adjustments after the header video has loaded.

This replaces the jQuery `trigger()` method with a native event and
updates Twenty Fourteen accordingly.

Props adamsilverstein, joemcgill.
Fixes #38550.
Built from https://develop.svn.wordpress.org/trunk@39102


git-svn-id: http://core.svn.wordpress.org/trunk@39044 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-11-03 01:21:28 +00:00
Peter Wilson c7691ceb36 Themes: Exit `wp-custom-header.js` early in browsers wihout modern events.
Adds a check for `window.addEventListener` support before attempting to use it. In browsers without support, the file is exited early to avoid throwing a JavaScript error.

Fixes #38585.

Built from https://develop.svn.wordpress.org/trunk@39050


git-svn-id: http://core.svn.wordpress.org/trunk@38992 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-31 06:17:29 +00:00
Joe McGill 030bc377dd Themes: Enable video in custom headers.
This adds the ability for themes to add support for videos in custom headers
by passing `'video' => true` as an argument when adding theme support for
custom headers.

Custom video headers are managed through the “Header Visuals” (i.e. “Header Image”)
panel in the Customizer where you can select a video from the media library or set a
URL to an external video (YouTube for now) for use in custom headers.

This introduces several new functions:

`has_header_video()` – Check whether a header video is set or not.
`get_header_video_url()` – Retrieve header video URL for custom header.
`the_header_video_url()` – Display header video URL.
`get_header_video_settings()` – Retrieve header video settings.
`has_custom_header()` – Check whether a custom header is set or not.
`get_custom_header_markup()` – Retrieve the markup for a custom header.
`the_custom_header_markup()` – Print the markup for a custom header.

And a new file, `wp-includes/js/wp-custom-header.js` that handles loading videos
in custom headers.

This also enables video headers in the Twenty Seventeen and Twenty Fourteen themes.

Props davidakennedy, celloexpressions, bradyvercher, laurelfulford, joemcgill.
Fixes #38172.
Built from https://develop.svn.wordpress.org/trunk@38985


git-svn-id: http://core.svn.wordpress.org/trunk@38928 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2016-10-27 21:51:31 +00:00