WordPress.org
Get WordPress

Make WordPress Core

Ticket #38995: 38995.5.patch

File 38995.5.patch, 15.3 KB (added by laurelfulford, 10 years ago)
Line 
1Index: src/wp-content/themes/twentyseventeen/assets/css/ie8.css
2===================================================================
3--- src/wp-content/themes/twentyseventeen/assets/css/ie8.css (revision 39408)
4+++ src/wp-content/themes/twentyseventeen/assets/css/ie8.css (working copy)
5@@ -65,7 +65,7 @@
6 display: block;
7 }
8
9-.custom-header-image {
10+.custom-header-media {
11 background-position: bottom center;
12 }
13
14@@ -84,8 +84,7 @@
15 width: 100%;
16 }
17
18-.has-header-image .custom-header-image img,
19-.has-header-image .custom-header-image video {
20+.has-header-image .custom-header-media img {
21 left: 0;
22 top: 0;
23 }
24@@ -142,8 +141,8 @@
25 padding-top: 0;
26 }
27
28-.twentyseventeen-front-page .custom-header-image,
29-.blog.home .custom-header-image {
30+.twentyseventeen-front-page .custom-header-media,
31+.blog.home .custom-header-media {
32 background-position: center center;
33 }
34
35Index: src/wp-content/themes/twentyseventeen/assets/css/ie9.css
36===================================================================
37--- src/wp-content/themes/twentyseventeen/assets/css/ie9.css (revision 39408)
38+++ src/wp-content/themes/twentyseventeen/assets/css/ie9.css (working copy)
39@@ -4,13 +4,15 @@
40 */
41
42 .has-header-image.twentyseventeen-front-page .custom-header,
43-.has-header-image.home.blog .custom-header {
44+.has-header-video.twentyseventeen-front-page .custom-header,
45+.has-header-image.home.blog .custom-header,
46+.has-header-video.home.blog .custom-header {
47 height: 300px;
48 }
49
50-.has-header-image .custom-header-image img,
51-.has-header-image .custom-header-image video,
52-.has-header-image .custom-header-image iframe {
53+.has-header-image .custom-header-media img,
54+.has-header-video .custom-header-media video,
55+.has-header-video .custom-header-media iframe {
56 min-width: 100%;
57 }
58
59@@ -17,9 +19,11 @@
60 @media screen and (min-width: 30em) {
61
62 .has-header-image.twentyseventeen-front-page .custom-header,
63+ .has-header-video.twentyseventeen-front-page .custom-header,
64 .has-header-image.home.blog .custom-header,
65- .twentyseventeen-front-page.has-header-image .custom-header-image,
66- .home.blog.has-header-image .custom-header-image,
67+ .has-header-video.home.blog .custom-header,
68+ .twentyseventeen-front-page.has-header-image .custom-header-media,
69+ .home.blog.has-header-image .custom-header-media,
70 .panel-image {
71 height: 700px;
72 }
73@@ -28,9 +32,11 @@
74 @media screen and (min-width: 48em) {
75
76 .has-header-image.twentyseventeen-front-page .custom-header,
77+ .has-header-video.twentyseventeen-front-page .custom-header,
78 .has-header-image.home.blog .custom-header,
79- .twentyseventeen-front-page.has-header-image .custom-header-image,
80- .home.blog.has-header-image .custom-header-image,
81+ .has-header-video.home.blog .custom-header,
82+ .twentyseventeen-front-page.has-header-image .custom-header-media,
83+ .home.blog.has-header-image .custom-header-media,
84 .panel-image {
85 height: 1000px;
86 }
87Index: src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js
88===================================================================
89--- src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js (revision 39408)
90+++ src/wp-content/themes/twentyseventeen/assets/js/customize-preview.js (working copy)
91@@ -123,11 +123,17 @@
92 $.each( [ 'external_header_video', 'header_image', 'header_video' ], function( index, settingId ) {
93 wp.customize( settingId, function( setting ) {
94 setting.bind(function() {
95- if ( hasHeaderImage() || ( hasHeaderVideo() && $( 'body' ).hasClass( 'twentyseventeen-front-page' ) ) ) {
96+ if ( hasHeaderImage() ) {
97 $( document.body ).addClass( 'has-header-image' );
98 } else {
99 $( document.body ).removeClass( 'has-header-image' );
100 }
101+
102+ if ( ! hasHeaderVideo() ) {
103+ $( document.body ).removeClass( 'has-header-video' );
104+ }
105 } );
106 } );
107 } );
108Index: src/wp-content/themes/twentyseventeen/assets/js/global.js
109===================================================================
110--- src/wp-content/themes/twentyseventeen/assets/js/global.js (revision 39408)
111+++ src/wp-content/themes/twentyseventeen/assets/js/global.js (working copy)
112@@ -4,7 +4,6 @@
113 // Variables and DOM Caching.
114 var $body = $( 'body' ),
115 $customHeader = $body.find( '.custom-header' ),
116- $customHeaderImage = $customHeader.find( '.custom-header-image' ),
117 $branding = $customHeader.find( '.site-branding' ),
118 $navigation = $body.find( '.navigation-top' ),
119 $navWrap = $navigation.find( '.wrap' ),
120@@ -64,8 +63,8 @@
121 // Make sure the nav isn't taller than two rows.
122 if ( navIsNotTooTall ) {
123
124- // When there's a custom header image, the header offset includes the height of the navigation.
125- if ( isFrontPage && $customHeaderImage.length ) {
126+ // When there's a custom header image or video, the header offset includes the height of the navigation.
127+ if ( isFrontPage && ( $body.hasClass( 'has-header-image' ) || $body.hasClass( 'has-header-video' ) ) ) {
128 headerOffset = $customHeader.innerHeight() - navigationOuterHeight;
129 } else {
130 headerOffset = $customHeader.innerHeight();
131@@ -242,4 +241,9 @@
132 setTimeout( adjustHeaderHeight, 1000 );
133 });
134
135+ // Add header video class after the video is loaded.
136+ $( document ).on( 'wp-custom-header-video-loaded', function() {
137+ $body.addClass( 'has-header-video' );
138+ });
139+
140 })( jQuery );
141Index: src/wp-content/themes/twentyseventeen/inc/color-patterns.php
142===================================================================
143--- src/wp-content/themes/twentyseventeen/inc/color-patterns.php (revision 39408)
144+++ src/wp-content/themes/twentyseventeen/inc/color-patterns.php (working copy)
145@@ -443,8 +443,11 @@
146 .colors-custom .next.page-numbers:focus,
147 .colors-custom .next.page-numbers:hover,
148 .colors-custom.has-header-image .site-title,
149+.colors-custom.has-header-video .site-title,
150 .colors-custom.has-header-image .site-title a,
151-.colors-custom.has-header-image .site-description {
152+.colors-custom.has-header-video .site-title a,
153+.colors-custom.has-header-image .site-description,
154+.colors-custom.has-header-video .site-description {
155 color: hsl( ' . $hue . ', ' . $saturation . ', 100% ); /* base: #fff; */
156 }
157
158Index: src/wp-content/themes/twentyseventeen/inc/template-functions.php
159===================================================================
160--- src/wp-content/themes/twentyseventeen/inc/template-functions.php (revision 39408)
161+++ src/wp-content/themes/twentyseventeen/inc/template-functions.php (working copy)
162@@ -35,7 +35,7 @@
163 }
164
165 // Add a class if there is a custom header.
166- if ( has_header_image() || has_header_video() && is_front_page() ) {
167+ if ( has_header_image() ) {
168 $classes[] = 'has-header-image';
169 }
170
171Index: src/wp-content/themes/twentyseventeen/style.css
172===================================================================
173--- src/wp-content/themes/twentyseventeen/style.css (revision 39408)
174+++ src/wp-content/themes/twentyseventeen/style.css (working copy)
175@@ -1581,7 +1581,9 @@
176 }
177
178 body.has-header-image .site-title,
179-body.has-header-image .site-title a {
180+body.has-header-video .site-title,
181+body.has-header-image .site-title a,
182+body.has-header-video .site-title a {
183 color: #fff;
184 }
185
186@@ -1592,7 +1594,8 @@
187 margin-bottom: 0;
188 }
189
190-body.has-header-image .site-description {
191+body.has-header-image .site-description,
192+body.has-header-video .site-description {
193 color: #fff;
194 opacity: 0.8;
195 }
196@@ -1610,7 +1613,8 @@
197 width: auto;
198 }
199
200-body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
201+body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
202+body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
203 max-height: 200px;
204 max-width: 100%;
205 }
206@@ -1630,7 +1634,9 @@
207 }
208
209 .has-header-image.twentyseventeen-front-page .custom-header,
210-.has-header-image.home.blog .custom-header {
211+.has-header-video.twentyseventeen-front-page .custom-header,
212+.has-header-image.home.blog .custom-header,
213+.has-header-video.home.blog .custom-header {
214 display: table;
215 height: 300px;
216 height: 75vh;
217@@ -1637,7 +1643,7 @@
218 width: 100%;
219 }
220
221-.custom-header-image {
222+.custom-header-media {
223 bottom: 0;
224 left: 0;
225 overflow: hidden;
226@@ -1647,7 +1653,7 @@
227 width: 100%;
228 }
229
230-.custom-header-image:before {
231+.custom-header-media:before {
232 /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+75 */
233 background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* FF3.6-15 */
234 background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
235@@ -1663,9 +1669,9 @@
236 z-index: 2;
237 }
238
239-.has-header-image .custom-header-image img,
240-.has-header-image .custom-header-image video,
241-.has-header-image .custom-header-image iframe {
242+.has-header-image .custom-header-media img,
243+.has-header-video .custom-header-media video,
244+.has-header-video .custom-header-media iframe {
245 position: fixed;
246 height: auto;
247 left: 50%;
248@@ -1708,7 +1714,7 @@
249 top: 62px;
250 }
251
252-.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
253+.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
254 bottom: 0;
255 position: absolute;
256 top: auto;
257@@ -1720,12 +1726,14 @@
258
259 /* Hides div in Customizer preview when header images or videos change. */
260
261-body:not(.has-header-image) .custom-header-image {
262+body:not(.has-header-image):not(.has-header-video) .custom-header-media {
263 display: none;
264 }
265
266 .has-header-image.twentyseventeen-front-page .site-branding,
267-.has-header-image.home.blog .site-branding {
268+.has-header-video.twentyseventeen-front-page .site-branding,
269+.has-header-image.home.blog .site-branding,
270+.has-header-video.home.blog .site-branding {
271 display: table-cell;
272 height: 100%;
273 vertical-align: bottom;
274@@ -3275,7 +3283,9 @@
275 }
276
277 .has-header-image.twentyseventeen-front-page .site-branding,
278- .has-header-image.home.blog .site-branding {
279+ .has-header-video.twentyseventeen-front-page .site-branding,
280+ .has-header-image.home.blog .site-branding,
281+ .has-header-video.home.blog .site-branding {
282 bottom: 0;
283 display: block;
284 left: 0;
285@@ -3286,23 +3296,28 @@
286 }
287
288 .has-header-image.twentyseventeen-front-page .custom-header,
289- .has-header-image.home.blog .custom-header {
290+ .has-header-video.twentyseventeen-front-page .custom-header,
291+ .has-header-image.home.blog .custom-header,
292+ .has-header-video.home.blog .custom-header {
293 display: block;
294 height: auto;
295 }
296
297- .custom-header-image {
298+ .custom-header-media {
299 height: 165px;
300 position: relative;
301 }
302
303- .twentyseventeen-front-page.has-header-image .custom-header-image,
304- .home.blog.has-header-image .custom-header-image {
305+ .twentyseventeen-front-page.has-header-image .custom-header-media,
306+ .twentyseventeen-front-page.has-header-video .custom-header-media,
307+ .home.blog.has-header-image .custom-header-media,
308+ .home.blog.has-header-video .custom-header-media {
309 height: 0;
310 position: relative;
311 }
312
313- .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
314+ .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media,
315+ .has-header-video:not(.twentyseventeen-front-page):not(.home) .custom-header-media {
316 bottom: 0;
317 height: auto;
318 left: 0;
319@@ -3316,11 +3331,13 @@
320 }
321
322 .custom-logo-link img,
323- body.home.title-tagline-hidden.has-header-image .custom-logo-link img {
324+ body.home.title-tagline-hidden.has-header-image .custom-logo-link img,
325+ body.home.title-tagline-hidden.has-header-video .custom-logo-link img {
326 max-width: 350px;
327 }
328
329- .title-tagline-hidden.home.has-header-image .custom-logo-link img {
330+ .title-tagline-hidden.home.has-header-image .custom-logo-link img,
331+ .title-tagline-hidden.home.has-header-video .custom-logo-link img {
332 max-height: 200px;
333 }
334
335@@ -3582,12 +3599,16 @@
336 /* Front Page */
337
338 .twentyseventeen-front-page.has-header-image .site-branding,
339- .home.blog.has-header-image .site-branding {
340+ .twentyseventeen-front-page.has-header-video .site-branding,
341+ .home.blog.has-header-image .site-branding,
342+ .home.blog.has-header-video .site-branding {
343 margin-bottom: 70px;
344 }
345
346- .twentyseventeen-front-page.has-header-image .custom-header-image,
347- .home.blog.has-header-image .custom-header-image {
348+ .twentyseventeen-front-page.has-header-image .custom-header-media,
349+ .twentyseventeen-front-page.has-header-video .custom-header-media,
350+ .home.blog.has-header-image .custom-header-media,
351+ .home.blog.has-header-video .custom-header-media {
352 height: 1200px;
353 height: 100vh;
354 max-height: 100%;
355@@ -3594,13 +3615,17 @@
356 overflow: hidden;
357 }
358
359- .twentyseventeen-front-page.has-header-image .custom-header-image:before,
360- .home.blog.has-header-image .custom-header-image:before {
361+ .twentyseventeen-front-page.has-header-image .custom-header-media:before,
362+ .twentyseventeen-front-page.has-header-video .custom-header-media:before,
363+ .home.blog.has-header-image .custom-header-media:before,
364+ .home.blog.has-header-video .custom-header-media:before {
365 height: 33%;
366 }
367
368- .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-image,
369- .admin-bar.home.blog.has-header-image .custom-header-image {
370+ .admin-bar.twentyseventeen-front-page.has-header-image .custom-header-media,
371+ .admin-bar.twentyseventeen-front-page.has-header-video .custom-header-media,
372+ .admin-bar.home.blog.has-header-image .custom-header-media,
373+ .admin-bar.home.blog.has-header-video .custom-header-media {
374 height: calc(100vh - 32px);
375 }
376
377@@ -4114,12 +4139,14 @@
378 padding: 0;
379 }
380
381- .custom-header-image {
382+ .custom-header-media {
383 padding: 0;
384 }
385
386 .twentyseventeen-front-page.has-header-image .site-branding,
387- .home.blog.has-header-image .site-branding {
388+ .twentyseventeen-front-page.has-header-video .site-branding,
389+ .home.blog.has-header-image .site-branding,
390+ .home.blog.has-header-video .site-branding {
391 position: relative;
392 }
393
394@@ -4158,7 +4185,9 @@
395 a,
396 .site-title a,
397 .twentyseventeen-front-page.has-header-image .site-title,
398- .twentyseventeen-front-page.has-header-image .site-title a {
399+ .twentyseventeen-front-page.has-header-video .site-title,
400+ .twentyseventeen-front-page.has-header-image .site-title a,
401+ .twentyseventeen-front-page.has-header-video .site-title a {
402 color: #222 !important; /* Make sure color schemes don't affect to print */
403 }
404
405@@ -4167,6 +4196,7 @@
406 blockquote,
407 .site-description,
408 .twentyseventeen-front-page.has-header-image .site-description,
409+ .twentyseventeen-front-page.has-header-video .site-description,
410 .entry-meta,
411 .entry-meta a {
412 color: #777 !important; /* Make sure color schemes don't affect to print */
413Index: src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php
414===================================================================
415--- src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php (revision 39408)
416+++ src/wp-content/themes/twentyseventeen/template-parts/header/header-image.php (working copy)
417@@ -1,6 +1,6 @@
418 <?php
419 /**
420- * Displays header image
421+ * Displays header media
422 *
423 * @package WordPress
424 * @subpackage Twenty_Seventeen
425@@ -11,11 +11,9 @@
426 ?>
427 <div class="custom-header">
428
429- <?php if ( has_custom_header() ) : ?>
430- <div class="custom-header-image">
431- <?php the_custom_header_markup(); ?>
432- </div>
433- <?php endif; ?>
434+ <div class="custom-header-media">
435+ <?php the_custom_header_markup(); ?>
436+ </div>
437
438 <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
439