WordPress.org

Make WordPress Core

Ticket #38172: 38172.6.diff

File 38172.6.diff, 22.2 KB (added by laurelfulford, 4 years ago)

Update theme styles and markup for proper video placement.

  • src/wp-admin/css/customize-controls.css

     
    583583        display: block;
    584584        font-style: italic;
    585585        line-height: 18px;
     586        margin-top: 0;
    586587        margin-bottom: 5px;
    587588}
    588589
  • src/wp-content/themes/twentyfourteen/functions.php

     
    409409                $classes[] = 'group-blog';
    410410        }
    411411
    412         if ( get_header_image() ) {
     412        if ( get_header_image() || function_exists( 'has_header_video' ) && has_header_video() ) {
    413413                $classes[] = 'header-image';
    414414        } elseif ( ! in_array( $GLOBALS['pagenow'], array( 'wp-activate.php', 'wp-signup.php' ) ) ) {
    415415                $classes[] = 'masthead-fixed';
  • src/wp-content/themes/twentyfourteen/header.php

     
    3232
    3333<body <?php body_class(); ?>>
    3434<div id="page" class="hfeed site">
    35         <?php if ( get_header_image() ) : ?>
     35        <?php if ( function_exists( 'has_header_video' ) && has_header_video() ) : ?>
     36                <div id="site-header">
     37                        <?php the_header_video_tag(); ?>
     38                </div>
     39        <?php elseif ( get_header_image() ) : ?>
    3640        <div id="site-header">
    3741                <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    3842                        <img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
  • src/wp-content/themes/twentyfourteen/inc/custom-header.php

     
    4040                'width'                  => 1260,
    4141                'height'                 => 240,
    4242                'flex-height'            => true,
     43                'video'                  => true,
    4344                'wp-head-callback'       => 'twentyfourteen_header_style',
    4445                'admin-head-callback'    => 'twentyfourteen_admin_header_style',
    4546                'admin-preview-callback' => 'twentyfourteen_admin_header_image',
  • src/wp-content/themes/twentyfourteen/js/functions.js

     
    103103
    104104                        if ( body.is( '.header-image' ) ) {
    105105                                toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0;
    106                                 mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
     106                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
    107107
    108108                                _window.on( 'scroll.twentyfourteen', function() {
    109109                                        if ( _window.scrollTop() > mastheadOffset && mastheadHeight < 49 ) {
     
    112112                                                body.removeClass( 'masthead-fixed' );
    113113                                        }
    114114                                } );
     115
     116                                // Update masthead offset after a selective refresh.
     117                                if ( 'undefined' !== typeof wp && wp.customize && wp.customize.selectiveRefresh ) {
     118                                        wp.customize.selectiveRefresh.bind( 'partial-content-rendered', function( placement ) {
     119                                                mastheadOffset = $( '#site-header' ).height() - toolbarOffset;
     120                                        } );
     121                                }
    115122                        }
    116123                }
    117124
  • src/wp-content/themes/twentyfourteen/style.css

     
    8888video {
    8989        display: inline-block;
    9090        max-width: 100%;
     91        height: auto;
    9192}
    9293
    9394html {
     
    608609        max-width: 100%;
    609610}
    610611
     612#wp-custom-header-video video {
     613        margin-bottom: -8px;
     614}
     615
    611616p > embed,
    612617p > iframe,
    613618p > object,
  • src/wp-content/themes/twentyseventeen/assets/css/ie8.css

     
    3737
    3838/* Site Branding */
    3939
     40.has-header-image .custom-header-image img,
     41.has-header-image .custom-header-image video {
     42        left: 0;
     43        top: 0;
     44}
     45
    4046.site-title {
    4147        font-weight: bolder;
    4248}
  • src/wp-content/themes/twentyseventeen/components/header/header-image.php

     
    1414        $header_image = get_header_image();
    1515
    1616        // Check if Custom Header image has been added.
    17         if ( ! empty( $header_image ) ) : ?>
     17        if ( ! empty( $header_image ) ) :
    1818
    19                 <div class="custom-header-image" style="background-image: url(<?php echo esc_url( $header_image ); ?>)"></div>
    20                 <?php get_template_part( 'components/header/site', 'branding' ); ?>
     19                // If yes, check if we're on the front page
     20                if ( twentyseventeen_is_frontpage() ) : ?>
    2121
     22                        <?php // Output the full custom header - video and/or image fallback. ?>
     23                        <div class="custom-header-image">
     24                                <?php the_custom_header(); ?>
     25                        </div>
     26                        <?php get_template_part( 'components/header/site', 'branding' ); ?>
     27
     28                <?php else : ?>
     29
     30                        <?php // If we're not on the front page, only output the header image. ?>
     31                        <div class="custom-header-image">
     32                                <img src="<?php echo esc_url( $header_image ); ?>">
     33                        </div>
     34                        <?php get_template_part( 'components/header/site', 'branding' ); ?>
     35
     36                <?php endif; ?>
     37
    2238        <?php else : ?>
     39
    2340                <?php // Otherwise, show a blank header. ?>
    2441                <div class="custom-header-simple">
    2542                        <?php get_template_part( 'components/header/site', 'branding' ); ?>
  • src/wp-content/themes/twentyseventeen/footer.php

     
    1414
    1515?>
    1616
    17         </div><!-- #content -->
     17                </div><!-- #content -->
    1818
    19         <footer id="colophon" class="site-footer" role="contentinfo">
    20                 <div class="wrap">
    21                         <?php
    22                         get_template_part( 'components/footer/footer', 'widgets' );
     19                <footer id="colophon" class="site-footer" role="contentinfo">
     20                        <div class="wrap">
     21                                <?php
     22                                get_template_part( 'components/footer/footer', 'widgets' );
    2323
    24                         if ( has_nav_menu( 'social' ) ) : ?>
    25                                 <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
    26                                         <?php
    27                                                 wp_nav_menu( array(
    28                                                         'theme_location' => 'social',
    29                                                         'menu_class'     => 'social-links-menu',
    30                                                         'depth'          => 1,
    31                                                         'link_before'    => '<span class="screen-reader-text">',
    32                                                         'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
    33                                                 ) );
    34                                         ?>
    35                                 </nav><!-- .social-navigation -->
    36                         <?php endif;
     24                                if ( has_nav_menu( 'social' ) ) : ?>
     25                                        <nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
     26                                                <?php
     27                                                        wp_nav_menu( array(
     28                                                                'theme_location' => 'social',
     29                                                                'menu_class'     => 'social-links-menu',
     30                                                                'depth'          => 1,
     31                                                                'link_before'    => '<span class="screen-reader-text">',
     32                                                                'link_after'     => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
     33                                                        ) );
     34                                                ?>
     35                                        </nav><!-- .social-navigation -->
     36                                <?php endif;
    3737
    38                         get_template_part( 'components/footer/site', 'info' );
    39                         ?>
    40                 </div><!-- .wrap -->
    41         </footer><!-- #colophon -->
     38                                get_template_part( 'components/footer/site', 'info' );
     39                                ?>
     40                        </div><!-- .wrap -->
     41                </footer><!-- #colophon -->
     42        </div><!-- .site-content-contain -->
    4243</div><!-- #page -->
    4344<?php wp_footer(); ?>
    4445
  • src/wp-content/themes/twentyseventeen/header.php

     
    4949        endif;
    5050        ?>
    5151
    52         <div id="content" class="site-content">
     52        <div class="site-content-contain">
     53                <div id="content" class="site-content">
  • src/wp-content/themes/twentyseventeen/inc/custom-header.php

     
    3939                'width'              => 2000,
    4040                'height'             => 1200,
    4141                'flex-height'        => true,
     42                'video'              => true,
    4243                'wp-head-callback'   => 'twentyseventeen_header_style',
    4344        ) ) );
    4445
  • src/wp-content/themes/twentyseventeen/style.css

     
    12871287        border-top: 1px solid #eee;
    12881288        font-size: 16px;
    12891289        font-size: 1rem;
     1290        position: relative;
    12901291}
    12911292
    12921293.navigation-top .wrap {
     
    15281529
    15291530.site-branding {
    15301531        padding: 1em 0;
     1532        position: relative;
    15311533        -webkit-transition: margin-bottom 0.2s;
    15321534        transition: margin-bottom 0.2s;
     1535        z-index: 3;
    15331536}
    15341537
    15351538.site-branding a {
     
    16221625}
    16231626
    16241627.custom-header-image {
    1625         background-position: center center;
    1626         background-repeat: no-repeat;
    1627         -webkit-background-size: cover;
    1628         background-size: cover;
    16291628        bottom: 0;
    16301629        left: 0;
     1630        overflow: hidden;
    16311631        position: absolute;
    16321632        right: 0;
    16331633        top: 0;
     1634        width: 100%;
    16341635}
    16351636
    16361637.custom-header-image:before {
     
    16461647        left: 0;
    16471648        position: absolute;
    16481649        right: 0;
     1650        z-index: 2;
    16491651}
    16501652
    1651 .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
    1652         background-position: center bottom;
     1653.has-header-image .custom-header-image img,
     1654.has-header-image .custom-header-image video {
     1655        position: fixed;
     1656        height: auto;
     1657        left: 50%;
     1658        max-width: 1000%;
     1659        min-height: 100%;
     1660        min-width: 100%;
     1661        min-width: 100vw; /* vw prevents 1px gap on left that 100% has */
     1662        width: auto;
     1663        top: 50%;
     1664        -ms-transform: translateX(-50%) translateY(-50%);
     1665        -moz-transform: translateX(-50%) translateY(-50%);
     1666        -webkit-transform: translateX(-50%) translateY(-50%);
     1667        transform: translateX(-50%) translateY(-50%);
    16531668}
    16541669
     1670.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image img {
     1671        bottom: 0;
     1672        position: absolute;
     1673        top: auto;
     1674        -ms-transform: translateX(-50%) translateY(0);
     1675        -moz-transform: translateX(-50%) translateY(0);
     1676        -webkit-transform: translateX(-50%) translateY(0);
     1677        transform: translateX(-50%) translateY(0);
     1678}
     1679
    16551680body:not(.has-header-image) .custom-header-image {
    16561681        padding: 5% 0;
    16571682}
     
    17491774## Regular Content
    17501775--------------------------------------------------------------*/
    17511776
     1777.site-content-contain {
     1778        background-color: #fff;
     1779        position: relative;
     1780}
     1781
    17521782.site-content {
    17531783        padding: 2.5em 0 0;
    17541784}
     
    26142644# Media
    26152645--------------------------------------------------------------*/
    26162646
    2617 img {
     2647img,
     2648video {
    26182649        height: auto; /* Make sure images are scaled correctly. */
    26192650        max-width: 100%; /* Adhere to container width. */
    26202651}
     
    32583289
    32593290        .has-header-image.twentyseventeen-front-page .custom-header,
    32603291        .has-header-image.home.blog .custom-header {
    3261                 display: block;
    32623292                min-height: 0;
    32633293        }
    32643294
     
    32673297                position: relative;
    32683298        }
    32693299
     3300        .twentyseventeen-front-page.has-header-image .custom-header-image,
     3301        .home.blog.has-header-image .custom-header-image {
     3302                height: 0;
     3303                position: relative;
     3304        }
     3305
    32703306        .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-image {
    32713307                bottom: 0;
    32723308                height: auto;
     
    32763312                top: 0;
    32773313        }
    32783314
    3279         .twentyseventeen-front-page.has-header-image .custom-header-image,
    3280         .home.blog.has-header-image .custom-header-image {
    3281                 height: 0;
    3282                 padding-top: 66%;
    3283                 position: relative;
    3284         }
    3285 
    32863315        .custom-logo-link {
    32873316                padding-right: 2em;
    32883317        }
     
    35543583                height: 1200px;
    35553584                height: 100vh;
    35563585                max-height: 100%;
    3557                 padding: 10% 0;
     3586                overflow: hidden;
     3587                /* padding: 10% 0; */
    35583588        }
    35593589
    35603590        .twentyseventeen-front-page.has-header-image .custom-header-image:before,
     
    39013931
    39023932@media screen and ( min-width: 55em ) {
    39033933
    3904         .twentyseventeen-front-page.has-header-image .custom-header-image,
    3905         .home.blog.has-header-image .custom-header-image {
    3906                 background-attachment: fixed;
    3907         }
    3908 
    39093934        .panel-image {
    39103935                background-attachment: fixed;
    39113936        }
  • src/wp-includes/class-wp-customize-manager.php

     
    32233223
    32243224                /* Custom Header */
    32253225
     3226                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     3227                        $title = __( 'Header Visuals' );
     3228                        $description = __( 'If you add a video, the image will be used as a fallback while the video loads.' );
     3229                        $width = absint( get_theme_support( 'custom-header', 'width' ) );
     3230                        $height = absint( get_theme_support( 'custom-header', 'height' ) );
     3231                        if ( $width && $height ) {
     3232                                /* translators: %s: header size in pixels */
     3233                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends dimensions of %s pixels.' ),
     3234                                        sprintf( '<strong>%s &times; %s</strong>', $width, $height )
     3235                                );
     3236                        } elseif ( $width ) {
     3237                                /* translators: %s: header width in pixels */
     3238                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a width of %s pixels.' ),
     3239                                        sprintf( '<strong>%s</strong>', $width )
     3240                                );
     3241                        } else {
     3242                                /* translators: %s: header height in pixels */
     3243                                $control_description = sprintf( __( 'Upload your video in <code>.mp4</code> format and minimize its file size for best results. Your theme recommends a height of %s pixels.' ),
     3244                                        sprintf( '<strong>%s</strong>', $height )
     3245                                );
     3246                        }
     3247                } else {
     3248                        $title = __( 'Header Image' );
     3249                        $description = '';
     3250                        $control_description = '';
     3251                }
     3252
    32263253                $this->add_section( 'header_image', array(
    3227                         'title'          => __( 'Header Image' ),
     3254                        'title'          => $title,
     3255                        'description'    => $description,
    32283256                        'theme_supports' => 'custom-header',
    32293257                        'priority'       => 60,
    32303258                ) );
    32313259
     3260                $this->add_setting( 'header_video', array(
     3261                        'theme_supports'    => array( 'custom-header', 'video' ),
     3262                        'transport'         => 'postMessage',
     3263                        'validate_callback' => array( $this, '_validate_header_video' ),
     3264                ) );
     3265
    32323266                $this->add_setting( new WP_Customize_Filter_Setting( $this, 'header_image', array(
    32333267                        'default'        => get_theme_support( 'custom-header', 'default-image' ),
    32343268                        'theme_supports' => 'custom-header',
     
    32393273                        'theme_supports' => 'custom-header',
    32403274                ) ) );
    32413275
     3276                $this->add_control( new WP_Customize_Media_Control( $this, 'header_video', array(
     3277                        'theme_supports' => array( 'custom-header', 'video' ),
     3278                        'label'          => __( 'Header Video' ),
     3279                        'description'    => $control_description,
     3280                        'section'        => 'header_image',
     3281                        'mime_type'      => 'video',
     3282                ) ) );
     3283
    32423284                $this->add_control( new WP_Customize_Header_Image_Control( $this ) );
    32433285
     3286                $this->selective_refresh->add_partial( 'header_video', array(
     3287                        'selector' => '#wp-custom-header-video',
     3288                        'render_callback' => 'get_header_video_tag',
     3289                        'settings' => array( 'header_video', 'header_image' ), // The image is used as a video fallback here.
     3290                ) );
     3291
    32443292                /* Custom Background */
    32453293
    32463294                $this->add_section( 'background_image', array(
     
    35953643        }
    35963644
    35973645        /**
     3646         * Callback for validating the header_video value.
     3647         *
     3648         * Ensures that the selected video is less than 8MB and provides an error message.
     3649         *
     3650         * @since 4.7.0
     3651         *
     3652         * @param string $color
     3653         * @return mixed
     3654         */
     3655        public function _validate_header_video( $validity, $value ) {
     3656                $video = get_attached_file( absint( $value ) );
     3657                if ( $video ) {
     3658                        $size = filesize( $video );
     3659                        if ( 8 < $size / pow( 1024, 2 ) ) { // Check whether the size is larger than 8MB.
     3660                                $validity->add( 'size_too_large', __( 'This video file is too large to use as a header video. Try a shorter video or optimize the compression settings and re-upload.' ) );
     3661                        }
     3662                }
     3663                return $validity;
     3664        }
     3665
     3666        /**
    35983667         * Callback for rendering the custom logo, used in the custom_logo partial.
    35993668         *
    36003669         * This method exists because the partial object and context data are passed
  • src/wp-includes/customize/class-wp-customize-header-image-control.php

     
    166166                $height = absint( get_theme_support( 'custom-header', 'height' ) );
    167167                ?>
    168168                <div class="customize-control-content">
    169                         <p class="customizer-section-intro">
     169                        <?php if ( current_theme_supports( 'custom-header', 'video' ) ) {
     170                                echo '<span class="customize-control-title">' . $this->label . '</span>';
     171                        } ?>
     172                        <p class="customizer-section-intro customize-control-description">
    170173                                <?php
    171                                 if ( $width && $height ) {
     174                                if ( current_theme_supports( 'custom-header', 'video' ) ) {
     175                                        _e( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, we recommend matching the size of your video.' );
     176                                } elseif ( $width && $height ) {
    172177                                        /* translators: %s: header size in pixels */
    173178                                        printf( __( 'While you can crop images to your liking after clicking <strong>Add new image</strong>, your theme recommends a header size of %s pixels.' ),
    174179                                                sprintf( '<strong>%s &times; %s</strong>', $width, $height )
  • src/wp-includes/theme.php

     
    12641264                'thumbnail_url' => '',
    12651265                'width'         => get_theme_support( 'custom-header', 'width' ),
    12661266                'height'        => get_theme_support( 'custom-header', 'height' ),
     1267                'video'         => get_theme_support( 'custom-header', 'video' ),
    12671268        );
    12681269        return (object) wp_parse_args( $data, $default );
    12691270}
     
    13111312}
    13121313
    13131314/**
     1315 * Check whether a header video is set or not.
     1316 *
     1317 * @since 4.7.0
     1318 *
     1319 * @see get_header_video_url()
     1320 *
     1321 * @return bool Whether a header video is set or not.
     1322 */
     1323function has_header_video() {
     1324        return (bool) get_header_video_url();
     1325}
     1326
     1327/* Retrieve header video URL for custom header.
     1328*
     1329* @since 4.7.0
     1330*
     1331* @return string|false
     1332*/
     1333function get_header_video_url() {
     1334        $id = absint( get_theme_mod( 'header_video' ) );
     1335
     1336        if ( ! $id ) {
     1337                return false;
     1338        }
     1339
     1340        if ( $id ) {
     1341                // We have an attachment ID, need the full URL
     1342                $url = wp_get_attachment_url( $id );
     1343        }
     1344
     1345        return esc_url_raw( set_url_scheme( $url ) );
     1346}
     1347
     1348/**
     1349 * Create video tag markup for a custom header video.
     1350 *
     1351 * @since 4.7.0
     1352 *
     1353 * @param array $attr Optional. Additional attributes for the image tag. Can be used
     1354 *                              to override the default attributes. Default empty.
     1355 * @return string HTML image element markup or empty string on failure.
     1356 */
     1357function get_header_video_tag( $attr = array() ) {
     1358        $header = get_custom_header();
     1359        $video = get_header_video_url();
     1360        $image = get_header_image();
     1361
     1362        if ( empty( $video ) ) {
     1363                if ( is_customize_preview() ) { // If there was a video an it was removed, fall back to an image.
     1364                        if ( ! empty( $image ) ) {
     1365                                return get_header_image_tag();
     1366                        }
     1367                }
     1368                return '';
     1369        }
     1370
     1371        $width = absint( $header->width );
     1372        $height = absint( $header->height );
     1373
     1374        $attr = wp_parse_args(
     1375                $attr,
     1376                array(
     1377                        'src' => get_header_video_url(),
     1378                        'width' => $width,
     1379                        'height' => $height,
     1380                        'controls' => '',
     1381                        'autoplay' => '',
     1382                        'loop' => '',
     1383                        'muted' => '',
     1384                )
     1385        );
     1386
     1387        // Use the header image as poster attribute and video fallback.
     1388        if ( ! empty( $image ) ) {
     1389                $attr['poster'] = $header->url;
     1390                $content = get_header_image_tag();
     1391        } else {
     1392                $content = __( 'Your browser cannot play this video.' );
     1393        }
     1394
     1395        $attr = array_map( 'esc_attr', $attr );
     1396        $html = '<video';
     1397
     1398        foreach ( $attr as $name => $value ) {
     1399                $html .= ' ' . $name . '="' . $value . '"';
     1400        }
     1401
     1402        $html .= '>' . $content . '</video>';
     1403
     1404        /**
     1405         * Filters the markup of header videos.
     1406         *
     1407         * @since 4.7.0
     1408         *
     1409         * @param string $html   The HTML image tag markup being filtered.
     1410         * @param object $header The custom header object returned by 'get_custom_header()'.
     1411         * @param array  $attr   Array of the attributes for the image tag.
     1412         */
     1413        return apply_filters( 'get_header_video_tag', $html, $header, $attr );
     1414}
     1415
     1416/**
     1417 * Display the video markup for a custom header video.
     1418 *
     1419 * @since 4.7.0
     1420 *
     1421 * @param array $attr Optional. Attributes for the image markup. Default empty.
     1422 */
     1423function the_header_video_tag( $attr = array() ) {
     1424        echo '<div id="wp-custom-header-video">' . get_header_video_tag( $attr ) . '</div>';
     1425}
     1426
     1427/**
     1428 * Display header video URL.
     1429 *
     1430 * @since 4.7.0
     1431 */
     1432function the_header_video_url() {
     1433        $video = get_header_video_url();
     1434        if ( $video ) {
     1435                echo esc_url( $video );
     1436        }
     1437}
     1438
     1439/**
     1440 * Display the video and image markup for a custom header.
     1441 *
     1442 * @since 4.7.0
     1443 */
     1444function the_custom_header() {
     1445        $video = get_header_video_url();
     1446        $image = get_header_image();
     1447
     1448        if ( ! empty( $video ) ) {
     1449                the_header_video_tag();
     1450        } elseif ( is_customize_preview() ) {
     1451                echo '<div id="wp-custom-header-video"></div>';
     1452                if ( ! empty( $image ) ) {
     1453                        the_header_image_tag();
     1454                }
     1455        } elseif ( ! empty( $image ) ) {
     1456                the_header_image_tag();
     1457        }
     1458}
     1459
     1460/**
    13141461 * Retrieve background image for custom background.
    13151462 *
    13161463 * @since 3.0.0
     
    17061853                                'wp-head-callback' => '',
    17071854                                'admin-head-callback' => '',
    17081855                                'admin-preview-callback' => '',
     1856                                'video' => false,
    17091857                        );
    17101858
    17111859                        $jit = isset( $args[0]['__jit'] );