Bundled Themes: Fixes JS TypeError in Twenty Twenty.

On mobile devices using a webkit browser, the menu and search modals could not be opened due to a `TypeError: document.body is null`. This commit fixes that issue by adding a `touch-enabled` class to the body for browsers that do not support media queries.

Props quicoto, poena, Boga86, acosmin, macmanx, ianbelanger.
Fixes #48601.
Built from https://develop.svn.wordpress.org/branches/5.3@46787


git-svn-id: http://core.svn.wordpress.org/branches/5.3@46587 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2019-11-26 18:43:04 +00:00
parent d6c12ac919
commit 6f3a28818e
2 changed files with 15 additions and 11 deletions

View File

@ -71,18 +71,21 @@ if ( ! Element.prototype.matches ) {
// Add a class to the body for when touch is enabled for browsers that don't support media queries
// for interaction media features. Adapted from <https://codepen.io/Ferie/pen/vQOMmO>
( function() {
var matchMedia = function() {
// Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
return window.matchMedia && window.matchMedia( query ).matches;
};
twentytwenty.touchEnabled = {
if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
document.body.classList.add( 'touch-enabled' );
init: function() {
var matchMedia = function() {
// Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See <https://git.io/vznFH>.
var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ];
var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' );
return window.matchMedia && window.matchMedia( query ).matches;
};
if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) {
document.body.classList.add( 'touch-enabled' );
}
}
}() );
}; // twentytwenty.touchEnabled
/* -----------------------------------------------------------------------------------------------
Cover Modals
@ -745,6 +748,7 @@ twentytwentyDomReady( function() {
twentytwenty.smoothScroll.init(); // Smooth scroll to anchor link or a specific element
twentytwenty.modalMenu.init(); // Modal Menu
twentytwenty.primaryMenu.init(); // Primary Menu
twentytwenty.touchEnabled.init(); // Add class to body if device is touch-enabled
} );
/* -----------------------------------------------------------------------------------------------

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.3.1-alpha-46783';
$wp_version = '5.3.1-alpha-46787';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.