WordPress.org
Get WordPress

Make WordPress Core

Ticket #38995: 38995.5.patch

File 38995.5.patch, 15.3 KB (added by laurelfulford, 9 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