WordPress-C/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-02-16 19:46:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Twenty Seventeen: Make custom header preview match front end in Customizer when changed

Browse Source 
* Toggles `has-header-image` body class  in Customizer preview whenever images or videos are added or removed.
* Hides the `.custom-header-image`div in CSS when an image or video haven't been set so preview changes are smoother.
* Also fixes the main issues in #38391 – making the preview match.

Props bradyvercher.

Fixes #38627.
See #38391.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39160 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
David A. Kennedy 2016-11-14 11:23:32 +00:00
parent 65664731e9
commit f5cdba121f
3 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
wp-content/themes/twentyseventeen/assets/js/customize-preview.js
View File

@ -102,4 +102,32 @@
}
} );
} );
// Whether a header image is available.
function hasHeaderImage() {
var image = wp.customize( 'header_image' )();
return '' !== image && 'remove-header' !== image;
}
// Whether a header video is available.
function hasHeaderVideo() {
var externalVideo = wp.customize( 'external_header_video' )(),
video = wp.customize( 'header_video' )();
return '' !== externalVideo || ( 0 !== video && '' !== video );
}
// Toggle a body class if a custom header exists.
$.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
wp.customize( settingId, function( setting ) {
setting.bind(function() {
if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
$( document.body ).addClass( 'has-header-image' );
} else {
$( document.body ).removeClass( 'has-header-image' );
}
} );
} );
} );
} )( jQuery );

4
wp-content/themes/twentyseventeen/style.css
View File

@ -1690,8 +1690,10 @@ body:not(.title-tagline-hidden) .site-branding-text {
transform: translateX(-50%) translateY(0);
}
/* Hides div in Customizer preview when header images or videos change. */
body:not(.has-header-image) .custom-header-image {
padding: 5% 0;
display: none;
}
.has-header-image.twentyseventeen-front-page .site-branding,

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.7-beta3-39219';
$wp_version = '4.7-beta3-39220';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.