WordPress.org

Make WordPress Core

Changeset 38948


Ignore:
Timestamp:
10/26/16 06:51:11 (8 months ago)
Author:
westonruter
Message:

Customize: Improve custom background properties UI.

Introduces new control for managing the background position. Adds control for setting the background-size.

Props cdog, celloexpressions, grapplerulrich, MikeHansenMe, FolioVision, afercia, helen, melchoyce, karmatosed, westonruter, Kelderic, sebastian.pisula.
Fixes #22058.

Location:
trunk/src
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed

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

    r38906 r38948  
    10911091} 
    10921092 
     1093/* Background position control */ 
     1094.customize-control-background_position .background-position-control .button-group { 
     1095    display: block; 
     1096} 
     1097 
    10931098/** 
    10941099 * Custom CSS Section 

  • trunk/src/wp-admin/css/themes.css

    r38813 r38948  
    11771177} 
    11781178 
     1179.background-position-control input[type="radio"]:checked ~ .button { 
     1180    background: #eee; 
     1181    border-color: #999; 
     1182    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); 
     1183    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); 
     1184    z-index: 1; 
     1185} 
     1186 
     1187.background-position-control input[type="radio"]:focus ~ .button { 
     1188    border-color: #5b9dd9; 
     1189    -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 ); 
     1190    box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 ); 
     1191    color: #23282d; 
     1192} 
     1193 
     1194.background-position-control .background-position-center-icon, 
     1195.background-position-control .background-position-center-icon:before { 
     1196    display: inline-block; 
     1197    line-height: 1; 
     1198    text-align: center; 
     1199    -webkit-transition: background-color .1s ease-in 0; 
     1200    transition: background-color .1s ease-in 0; 
     1201} 
     1202 
     1203.background-position-control .background-position-center-icon { 
     1204    height: 20px; 
     1205    margin-top: 13px; 
     1206    vertical-align: top; 
     1207    width: 20px; 
     1208} 
     1209 
     1210.background-position-control .background-position-center-icon:before { 
     1211    background-color: #555; 
     1212    -webkit-border-radius: 50%; 
     1213    border-radius: 50%; 
     1214    content: ""; 
     1215    height: 12px; 
     1216    width: 12px; 
     1217} 
     1218 
     1219.background-position-control .button:hover .background-position-center-icon:before, 
     1220.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { 
     1221    background-color: #23282d; 
     1222} 
     1223 
     1224.background-position-control .button-group { 
     1225    display: block; 
     1226} 
     1227 
     1228.background-position-control .button-group .button { 
     1229    -webkit-border-radius: 0; 
     1230    border-radius: 0; 
     1231    -webkit-box-shadow: none; 
     1232    box-shadow: none; 
     1233    /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ 
     1234    height: 40px !important; 
     1235    line-height: 37px !important; 
     1236    margin: 0 -1px 0 0 !important; 
     1237    padding: 0 10px 1px !important; 
     1238    position: relative; 
     1239} 
     1240 
     1241.background-position-control .button-group .button:active, 
     1242.background-position-control .button-group .button:hover, 
     1243.background-position-control .button-group .button:focus { 
     1244    z-index: 1; 
     1245} 
     1246 
     1247.background-position-control .button-group:last-child .button { 
     1248    -webkit-box-shadow: 0 1px 0 #ccc; 
     1249    box-shadow: 0 1px 0 #ccc; 
     1250} 
     1251 
     1252.background-position-control .button-group > label { 
     1253    margin: 0 !important; 
     1254} 
     1255 
     1256.background-position-control .button-group:first-child > label:first-child .button { 
     1257    -webkit-border-radius: 3px 0 0; 
     1258    border-radius: 3px 0 0; 
     1259} 
     1260 
     1261.background-position-control .button-group:first-child > label:first-child .dashicons { 
     1262    -webkit-transform: rotate( 45deg ); 
     1263    -ms-transform: rotate( 45deg ); 
     1264    transform: rotate( 45deg ); 
     1265} 
     1266 
     1267.background-position-control .button-group:first-child > label:last-child .button { 
     1268    -webkit-border-radius: 0 3px 0 0; 
     1269    border-radius: 0 3px 0 0; 
     1270} 
     1271 
     1272.background-position-control .button-group:first-child > label:last-child .dashicons { 
     1273    -webkit-transform: rotate( -45deg ); 
     1274    -ms-transform: rotate( -45deg ); 
     1275    transform: rotate( -45deg ); 
     1276} 
     1277 
     1278.background-position-control .button-group:last-child > label:first-child .button { 
     1279    -webkit-border-radius: 0 0 0 3px; 
     1280    border-radius: 0 0 0 3px; 
     1281} 
     1282 
     1283.background-position-control .button-group:last-child > label:first-child .dashicons { 
     1284    -webkit-transform: rotate( -45deg ); 
     1285    -ms-transform: rotate( -45deg ); 
     1286    transform: rotate( -45deg ); 
     1287} 
     1288 
     1289.background-position-control .button-group:last-child > label:last-child .button { 
     1290    -webkit-border-radius: 0 0 3px 0; 
     1291    border-radius: 0 0 3px 0; 
     1292} 
     1293 
     1294.background-position-control .button-group:last-child > label:last-child .dashicons { 
     1295    -webkit-transform: rotate( 45deg ); 
     1296    -ms-transform: rotate( 45deg ); 
     1297    transform: rotate( 45deg ); 
     1298} 
     1299 
     1300.background-position-control .button-group .dashicons { 
     1301    margin-top: 9px; 
     1302} 
     1303 
     1304.background-position-control .button-group + .button-group { 
     1305    margin-top: -1px; 
     1306} 
     1307 
    11791308/*------------------------------------------------------------------------------ 
    11801309  23.0 - Full Overlay w/ Sidebar 

  • trunk/src/wp-admin/custom-background.php

    r38719 r38948  
    134134        } 
    135135 
    136         if ( isset($_POST['background-repeat']) ) { 
    137             check_admin_referer('custom-background'); 
    138             if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) ) 
    139                 $repeat = $_POST['background-repeat']; 
    140             else 
     136        if ( isset( $_POST['background-preset'] ) ) { 
     137            check_admin_referer( 'custom-background' ); 
     138 
     139            if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) { 
     140                $preset = $_POST['background-preset']; 
     141            } else { 
     142                $preset = 'default'; 
     143            } 
     144 
     145            set_theme_mod( 'background_preset', $preset ); 
     146        } 
     147 
     148        if ( isset( $_POST['background-position'] ) ) { 
     149            check_admin_referer( 'custom-background' ); 
     150 
     151            $position = explode( ' ', $_POST['background-position'] ); 
     152 
     153            if ( in_array( $position[0], array( 'left', 'center', 'right' ), true ) ) { 
     154                $position_x = $position[0]; 
     155            } else { 
     156                $position_x = 'left'; 
     157            } 
     158 
     159            if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) { 
     160                $position_y = $position[1]; 
     161            } else { 
     162                $position_y = 'top'; 
     163            } 
     164 
     165            set_theme_mod( 'background_position_x', $position_x ); 
     166            set_theme_mod( 'background_position_y', $position_y ); 
     167        } 
     168 
     169        if ( isset( $_POST['background-size'] ) ) { 
     170            check_admin_referer( 'custom-background' ); 
     171 
     172            if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) { 
     173                $size = $_POST['background-size']; 
     174            } else { 
     175                $size = 'auto'; 
     176            } 
     177 
     178            set_theme_mod( 'background_size', $size ); 
     179        } 
     180 
     181        if ( isset( $_POST['background-repeat'] ) ) { 
     182            check_admin_referer( 'custom-background' ); 
     183 
     184            $repeat = $_POST['background-repeat']; 
     185 
     186            if ( 'no-repeat' !== $repeat ) { 
    141187                $repeat = 'repeat'; 
    142             set_theme_mod('background_repeat', $repeat); 
    143         } 
    144  
    145         if ( isset($_POST['background-position-x']) ) { 
    146             check_admin_referer('custom-background'); 
    147             if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) ) 
    148                 $position = $_POST['background-position-x']; 
    149             else 
    150                 $position = 'left'; 
    151             set_theme_mod('background_position_x', $position); 
    152         } 
    153  
    154         if ( isset($_POST['background-attachment']) ) { 
    155             check_admin_referer('custom-background'); 
    156             if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) ) 
    157                 $attachment = $_POST['background-attachment']; 
    158             else 
    159                 $attachment = 'fixed'; 
    160             set_theme_mod('background_attachment', $attachment); 
     188            } 
     189 
     190            set_theme_mod( 'background_repeat', $repeat ); 
     191        } 
     192 
     193        if ( isset( $_POST['background-attachment'] ) ) { 
     194            check_admin_referer( 'custom-background' ); 
     195 
     196            $attachment = $_POST['background-attachment']; 
     197 
     198            if ( 'fixed' !== $attachment ) { 
     199                $attachment = 'scroll'; 
     200            } 
     201 
     202            set_theme_mod( 'background_attachment', $attachment ); 
    161203        } 
    162204 
    … …  
    220262        if ( $background_image_thumb ) { 
    221263            $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) ); 
     264            $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 
     265            $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); 
     266            $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ); 
     267            $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ); 
     268            $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); 
    222269 
    223270            // Background-image URL must be single quote, see below. 
    224             $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');' 
    225                 . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';' 
    226                 . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 
     271            $background_styles .= " background-image: url('$background_image_thumb');" 
     272                . " background-size: $background_size;" 
     273                . " background-position: $background_position_x $background_position_y;" 
     274                . " background-repeat: $background_repeat;" 
     275                . " background-attachment: $background_attachment;"; 
    227276        } 
    228277    ?> 
    … …  
    288337</table> 
    289338 
    290 <h3><?php _e('Display Options') ?></h3> 
     339<h3><?php _e( 'Display Options' ); ?></h3> 
    291340<form method="post"> 
    292341<table class="form-table"> 
    293342<tbody> 
    294343<?php if ( get_background_image() ) : ?> 
    295 <tr> 
    296 <th scope="row"><?php _e( 'Position' ); ?></th> 
    297 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> 
    298 <label> 
    299 <input name="background-position-x" type="radio" value="left"<?php checked( 'left', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> /> 
    300 <?php _e('Left') ?> 
    301 </label> 
    302 <label> 
    303 <input name="background-position-x" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> /> 
    304 <?php _e('Center') ?> 
    305 </label> 
    306 <label> 
    307 <input name="background-position-x" type="radio" value="right"<?php checked( 'right', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> /> 
    308 <?php _e('Right') ?> 
    309 </label> 
     344<input name="background-preset" type="hidden" value="custom"> 
     345 
     346<?php 
     347$background_position = sprintf( 
     348    '%s %s', 
     349    get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ), 
     350    get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ) 
     351); 
     352 
     353$background_position_options = array( 
     354    array( 
     355        'left top'   => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ), 
     356        'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ), 
     357        'right top'  => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ), 
     358    ), 
     359    array( 
     360        'left center'   => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ), 
     361        'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ), 
     362        'right center'  => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ), 
     363    ), 
     364    array( 
     365        'left bottom'   => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ), 
     366        'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ), 
     367        'right bottom'  => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ), 
     368    ), 
     369); 
     370?> 
     371<tr> 
     372<th scope="row"><?php _e( 'Image Position' ); ?></th> 
     373<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend> 
     374<div class="background-position-control"> 
     375<?php foreach ( $background_position_options as $group ) : ?> 
     376    <div class="button-group"> 
     377    <?php foreach ( $group as $value => $input ) : ?> 
     378        <label> 
     379            <input class="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>> 
     380            <span class="button display-options position"><span class="<?php echo esc_attr( $input['icon'] ); ?>" aria-hidden="true"></span></span> 
     381            <span class="screen-reader-text"><?php echo $input['label']; ?></span> 
     382        </label> 
     383    <?php endforeach; ?> 
     384    </div> 
     385<?php endforeach; ?> 
     386</div> 
    310387</fieldset></td> 
    311388</tr> 
    312389 
    313390<tr> 
    314 <th scope="row"><?php _e( 'Repeat' ); ?></th> 
    315 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend> 
    316 <label><input type="radio" name="background-repeat" value="no-repeat"<?php checked( 'no-repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('No Repeat'); ?></label> 
    317     <label><input type="radio" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile'); ?></label> 
    318     <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked( 'repeat-x', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Horizontally'); ?></label> 
    319     <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked( 'repeat-y', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Vertically'); ?></label> 
     391<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th> 
     392<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend> 
     393<select id="background-size" name="background-size"> 
     394<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option> 
     395<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option> 
     396<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option> 
     397</select> 
    320398</fieldset></td> 
    321399</tr> 
    322400 
    323401<tr> 
    324 <th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th> 
    325 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend> 
    326 <label> 
    327 <input name="background-attachment" type="radio" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> /> 
    328 <?php _e( 'Scroll' ); ?> 
    329 </label> 
    330 <label> 
    331 <input name="background-attachment" type="radio" value="fixed" <?php checked( 'fixed', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> /> 
    332 <?php _e( 'Fixed' ); ?> 
    333 </label> 
     402<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th> 
     403<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend> 
     404<input name="background-repeat" type="hidden" value="no-repeat"> 
     405<label><input type="checkbox" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?>> <?php _e( 'Repeat Background Image' ); ?></label> 
     406</fieldset></td> 
     407</tr> 
     408 
     409<tr> 
     410<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th> 
     411<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend> 
     412<input name="background-attachment" type="hidden" value="fixed"> 
     413<label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label> 
    334414</fieldset></td> 
    335415</tr> 
    … …  
    343423    $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"'; 
    344424?> 
    345 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> /> 
     425<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>> 
    346426</fieldset></td> 
    347427</tr> 

  • trunk/src/wp-admin/js/custom-background.js

    r26158 r38948  
    1414        }); 
    1515 
    16         $('input[name="background-position-x"]').change(function() { 
    17             bgImage.css('background-position', $(this).val() + ' top'); 
     16        $( 'select[name="background-size"]' ).change( function() { 
     17            bgImage.css( 'background-size', $( this ).val() ); 
    1818        }); 
    1919 
    20         $('input[name="background-repeat"]').change(function() { 
    21             bgImage.css('background-repeat', $(this).val()); 
     20        $( 'input[name="background-position"]' ).change( function() { 
     21            bgImage.css( 'background-position', $( this ).val() ); 
     22        }); 
     23 
     24        $( 'input[name="background-repeat"]' ).change( function() { 
     25            bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' ); 
     26        }); 
     27 
     28        $( 'input[name="background-attachment"]' ).change( function() { 
     29            bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' ); 
    2230        }); 
    2331 

  • trunk/src/wp-admin/js/customize-controls.js

    r38931 r38948  
    31593159 
    31603160    /** 
     3161     * A control for positioning a background image. 
     3162     * 
     3163     * @since 4.7.0 
     3164     * 
     3165     * @class 
     3166     * @augments wp.customize.Control 
     3167     * @augments wp.customize.Class 
     3168     */ 
     3169    api.BackgroundPositionControl = api.Control.extend( { 
     3170 
     3171        /** 
     3172         * Set up control UI once embedded in DOM and settings are created. 
     3173         * 
     3174         * @since 4.7.0 
     3175         */ 
     3176        ready: function() { 
     3177            var control = this, updateRadios; 
     3178 
     3179            control.container.on( 'change', 'input[name="background-position"]', function() { 
     3180                var position = $( this ).val().split( ' ' ); 
     3181                control.settings.x( position[0] ); 
     3182                control.settings.y( position[1] ); 
     3183            } ); 
     3184 
     3185            updateRadios = _.debounce( function() { 
     3186                var x, y, radioInput, inputValue; 
     3187                x = control.settings.x.get(); 
     3188                y = control.settings.y.get(); 
     3189                inputValue = String( x ) + ' ' + String( y ); 
     3190                radioInput = control.container.find( 'input[name="background-position"][value="' + inputValue + '"]' ); 
     3191                radioInput.click(); 
     3192            } ); 
     3193            control.settings.x.bind( updateRadios ); 
     3194            control.settings.y.bind( updateRadios ); 
     3195 
     3196            updateRadios(); // Set initial UI. 
     3197        } 
     3198    } ); 
     3199 
     3200    /** 
    31613201     * A control for selecting and cropping an image. 
    31623202     * 
    … …  
    45084548    api.settingConstructor = {}; 
    45094549    api.controlConstructor = { 
    4510         color:         api.ColorControl, 
    4511         media:         api.MediaControl, 
    4512         upload:        api.UploadControl, 
    4513         image:         api.ImageControl, 
    4514         cropped_image: api.CroppedImageControl, 
    4515         site_icon:     api.SiteIconControl, 
    4516         header:        api.HeaderControl, 
    4517         background:    api.BackgroundControl, 
    4518         theme:         api.ThemeControl 
     4550        color:               api.ColorControl, 
     4551        media:               api.MediaControl, 
     4552        upload:              api.UploadControl, 
     4553        image:               api.ImageControl, 
     4554        cropped_image:       api.CroppedImageControl, 
     4555        site_icon:           api.SiteIconControl, 
     4556        header:              api.HeaderControl, 
     4557        background:          api.BackgroundControl, 
     4558        background_position: api.BackgroundPositionControl, 
     4559        theme:               api.ThemeControl 
    45194560    }; 
    45204561    api.panelConstructor = { 
    … …  
    55325573        $.each({ 
    55335574            'background_image': { 
    5534                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ], 
     5575                controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ], 
    55355576                callback: function( to ) { return !! to; } 
    55365577            }, 
    … …  
    55575598            }); 
    55585599        }); 
     5600 
     5601        api.control( 'background_preset', function( control ) { 
     5602            var visibility, defaultValues, values, toggleVisibility, updateSettings, preset; 
     5603 
     5604            visibility = { // position, size, repeat, attachment 
     5605                'default': [ false, false, false, false ], 
     5606                'fill': [ true, false, false, false ], 
     5607                'fit': [ true, false, true, false ], 
     5608                'repeat': [ true, false, false, true ], 
     5609                'custom': [ true, true, true, true ] 
     5610            }; 
     5611 
     5612            defaultValues = [ 
     5613                _wpCustomizeBackground.defaults['default-position-x'], 
     5614                _wpCustomizeBackground.defaults['default-position-y'], 
     5615                _wpCustomizeBackground.defaults['default-size'], 
     5616                _wpCustomizeBackground.defaults['default-repeat'], 
     5617                _wpCustomizeBackground.defaults['default-attachment'] 
     5618            ]; 
     5619 
     5620            values = { // position_x, position_y, size, repeat, attachment 
     5621                'default': defaultValues, 
     5622                'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ], 
     5623                'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ], 
     5624                'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ] 
     5625            }; 
     5626 
     5627            // @todo These should actually toggle the active state, but without the preview overriding the state in data.activeControls. 
     5628            toggleVisibility = function( preset ) { 
     5629                api.control( 'background_position' ).container.toggle( visibility[ preset ][0] ); 
     5630                api.control( 'background_size' ).container.toggle( visibility[ preset ][1] ); 
     5631                api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] ); 
     5632                api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] ); 
     5633            }; 
     5634 
     5635            updateSettings = function( preset ) { 
     5636                api( 'background_position_x' ).set( values[ preset ][0] ); 
     5637                api( 'background_position_y' ).set( values[ preset ][1] ); 
     5638                api( 'background_size' ).set( values[ preset ][2] ); 
     5639                api( 'background_repeat' ).set( values[ preset ][3] ); 
     5640                api( 'background_attachment' ).set( values[ preset ][4] ); 
     5641            }; 
     5642 
     5643            preset = control.setting.get(); 
     5644            toggleVisibility( preset ); 
     5645 
     5646            control.setting.bind( 'change', function( preset ) { 
     5647                toggleVisibility( preset ); 
     5648                if ( 'custom' !== preset ) { 
     5649                    updateSettings( preset ); 
     5650                } 
     5651            } ); 
     5652        } ); 
     5653 
     5654        api.control( 'background_repeat', function( control ) { 
     5655            control.elements[0].unsync( api( 'background_repeat' ) ); 
     5656 
     5657            control.element = new api.Element( control.container.find( 'input' ) ); 
     5658            control.element.set( 'no-repeat' !== control.setting() ); 
     5659 
     5660            control.element.bind( function( to ) { 
     5661                control.setting.set( to ? 'repeat' : 'no-repeat' ); 
     5662            } ); 
     5663 
     5664            control.setting.bind( function( to ) { 
     5665                control.element.set( 'no-repeat' !== to ); 
     5666            } ); 
     5667        } ); 
     5668 
     5669        api.control( 'background_attachment', function( control ) { 
     5670            control.elements[0].unsync( api( 'background_attachment' ) ); 
     5671 
     5672            control.element = new api.Element( control.container.find( 'input' ) ); 
     5673            control.element.set( 'fixed' !== control.setting() ); 
     5674 
     5675            control.element.bind( function( to ) { 
     5676                control.setting.set( to ? 'scroll' : 'fixed' ); 
     5677            } ); 
     5678 
     5679            control.setting.bind( function( to ) { 
     5680                control.element.set( 'fixed' !== to ); 
     5681            } ); 
     5682        } ); 
    55595683 
    55605684        // Juggle the two controls that use header_textcolor 

  • trunk/src/wp-includes/class-wp-customize-control.php

    r38933 r38948  
    661661require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); 
    662662 
     663/** WP_Customize_Background_Position_Control class */ 
     664require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' ); 
     665 
    663666/** WP_Customize_Cropped_Image_Control class */ 
    664667require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 

  • trunk/src/wp-includes/class-wp-customize-manager.php

    r38933 r38948  
    280280        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' ); 
    281281        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); 
     282        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' ); 
    282283        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 
    283284        require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' ); 
    … …  
    30273028        $this->register_control_type( 'WP_Customize_Image_Control' ); 
    30283029        $this->register_control_type( 'WP_Customize_Background_Image_Control' ); 
     3030        $this->register_control_type( 'WP_Customize_Background_Position_Control' ); 
    30293031        $this->register_control_type( 'WP_Customize_Cropped_Image_Control' ); 
    30303032        $this->register_control_type( 'WP_Customize_Site_Icon_Control' ); 
    … …  
    32773279            'default'        => get_theme_support( 'custom-background', 'default-image' ), 
    32783280            'theme_supports' => 'custom-background', 
     3281            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
    32793282        ) ); 
    32803283 
    32813284        $this->add_setting( new WP_Customize_Background_Image_Setting( $this, 'background_image_thumb', array( 
    32823285            'theme_supports' => 'custom-background', 
     3286            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
    32833287        ) ) ); 
    32843288 
    32853289        $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 
    32863290 
    3287         $this->add_setting( 'background_repeat', array( 
    3288             'default'        => get_theme_support( 'custom-background', 'default-repeat' ), 
     3291        $this->add_setting( 'background_preset', array( 
     3292            'default'        => get_theme_support( 'custom-background', 'default-preset' ), 
    32893293            'theme_supports' => 'custom-background', 
    3290         ) ); 
    3291  
    3292         $this->add_control( 'background_repeat', array( 
    3293             'label'      => __( 'Background Repeat' ), 
     3294            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3295        ) ); 
     3296 
     3297        $this->add_control( 'background_preset', array( 
     3298            'label'      => _x( 'Preset', 'Background Preset' ), 
    32943299            'section'    => 'background_image', 
    3295             'type'       => 'radio', 
     3300            'type'       => 'select', 
    32963301            'choices'    => array( 
    3297                 'no-repeat'  => __('No Repeat'), 
    3298                 'repeat'     => __('Tile'), 
    3299                 'repeat-x'   => __('Tile Horizontally'), 
    3300                 'repeat-y'   => __('Tile Vertically'), 
     3302                'default' => _x( 'Default', 'Default Preset' ), 
     3303                'fill'    => __( 'Fill Screen' ), 
     3304                'fit'     => __( 'Fit to Screen' ), 
     3305                'repeat'  => _x( 'Repeat', 'Repeat Image' ), 
     3306                'custom'  => _x( 'Custom', 'Custom Preset' ), 
    33013307            ), 
    33023308        ) ); 
    … …  
    33053311            'default'        => get_theme_support( 'custom-background', 'default-position-x' ), 
    33063312            'theme_supports' => 'custom-background', 
    3307         ) ); 
    3308  
    3309         $this->add_control( 'background_position_x', array( 
    3310             'label'      => __( 'Background Position' ), 
     3313            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3314        ) ); 
     3315 
     3316        $this->add_setting( 'background_position_y', array( 
     3317            'default'        => get_theme_support( 'custom-background', 'default-position-y' ), 
     3318            'theme_supports' => 'custom-background', 
     3319            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3320        ) ); 
     3321 
     3322        $this->add_control( new WP_Customize_Background_Position_Control( $this, 'background_position', array( 
     3323            'label'    => __( 'Image Position' ), 
     3324            'section'  => 'background_image', 
     3325            'settings' => array( 
     3326                'x' => 'background_position_x', 
     3327                'y' => 'background_position_y', 
     3328            ), 
     3329        ) ) ); 
     3330 
     3331        $this->add_setting( 'background_size', array( 
     3332            'default'        => get_theme_support( 'custom-background', 'default-size' ), 
     3333            'theme_supports' => 'custom-background', 
     3334            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3335        ) ); 
     3336 
     3337        $this->add_control( 'background_size', array( 
     3338            'label'      => __( 'Image Size' ), 
    33113339            'section'    => 'background_image', 
    3312             'type'       => 'radio', 
     3340            'type'       => 'select', 
    33133341            'choices'    => array( 
    3314                 'left'       => __('Left'), 
    3315                 'center'     => __('Center'), 
    3316                 'right'      => __('Right'), 
     3342                'auto'    => __( 'Original' ), 
     3343                'contain' => __( 'Fit to Screen' ), 
     3344                'cover'   => __( 'Fill Screen' ), 
    33173345            ), 
    33183346        ) ); 
    33193347 
     3348        $this->add_setting( 'background_repeat', array( 
     3349            'default'           => get_theme_support( 'custom-background', 'default-repeat' ), 
     3350            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3351            'theme_supports'    => 'custom-background', 
     3352        ) ); 
     3353 
     3354        $this->add_control( 'background_repeat', array( 
     3355            'label'    => __( 'Repeat Background Image' ), 
     3356            'section'  => 'background_image', 
     3357            'type'     => 'checkbox', 
     3358        ) ); 
     3359 
    33203360        $this->add_setting( 'background_attachment', array( 
    3321             'default'        => get_theme_support( 'custom-background', 'default-attachment' ), 
    3322             'theme_supports' => 'custom-background', 
     3361            'default'           => get_theme_support( 'custom-background', 'default-attachment' ), 
     3362            'sanitize_callback' => array( $this, '_sanitize_background_setting' ), 
     3363            'theme_supports'    => 'custom-background', 
    33233364        ) ); 
    33243365 
    33253366        $this->add_control( 'background_attachment', array( 
    3326             'label'      => __( 'Background Attachment' ), 
    3327             'section'    => 'background_image', 
    3328             'type'       => 'radio', 
    3329             'choices'    => array( 
    3330                 'scroll'     => __('Scroll'), 
    3331                 'fixed'      => __('Fixed'), 
    3332             ), 
    3333         ) ); 
     3367            'label'    => __( 'Scroll with Page' ), 
     3368            'section'  => 'background_image', 
     3369            'type'     => 'checkbox', 
     3370        ) ); 
     3371 
    33343372 
    33353373        // If the theme is using the default background callback, we can update 
    33363374        // the background CSS using postMessage. 
    33373375        if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 
    3338             foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) { 
     3376            foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) { 
    33393377                $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 
    33403378            } 
    … …  
    36253663 
    36263664    /** 
     3665     * Callback for validating a background setting value. 
     3666     * 
     3667     * @since 4.7.0 
     3668     * @access private 
     3669     * 
     3670     * @param string $value Repeat value. 
     3671     * @param WP_Customize_Setting $setting Setting. 
     3672     * @return string|WP_Error Background value or validation error. 
     3673     */ 
     3674    public function _sanitize_background_setting( $value, $setting ) { 
     3675        if ( 'background_repeat' === $setting->id ) { 
     3676            if ( ! in_array( $value, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ) ) ) { 
     3677                return new WP_Error( 'invalid_value', __( 'Invalid value for background repeat.' ) ); 
     3678            } 
     3679        } else if ( 'background_attachment' === $setting->id ) { 
     3680            if ( ! in_array( $value, array( 'fixed', 'scroll' ) ) ) { 
     3681                return new WP_Error( 'invalid_value', __( 'Invalid value for background attachment.' ) ); 
     3682            } 
     3683        } else if ( 'background_position_x' === $setting->id ) { 
     3684            if ( ! in_array( $value, array( 'left', 'center', 'right' ), true ) ) { 
     3685                return new WP_Error( 'invalid_value', __( 'Invalid value for background position X.' ) ); 
     3686            } 
     3687        } else if ( 'background_position_y' === $setting->id ) { 
     3688            if ( ! in_array( $value, array( 'top', 'center', 'bottom' ), true ) ) { 
     3689                return new WP_Error( 'invalid_value', __( 'Invalid value for background position Y.' ) ); 
     3690            } 
     3691        } else if ( 'background_size' === $setting->id ) { 
     3692            if ( ! in_array( $value, array( 'auto', 'contain', 'cover' ), true ) ) { 
     3693                return new WP_Error( 'invalid_value', __( 'Invalid value for background size.' ) ); 
     3694            } 
     3695        } else if ( 'background_preset' === $setting->id ) { 
     3696            if ( ! in_array( $value, array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) { 
     3697                return new WP_Error( 'invalid_value', __( 'Invalid value for background size.' ) ); 
     3698            } 
     3699        } else if ( 'background_image' === $setting->id || 'background_image_thumb' === $setting->id ) { 
     3700            $value = empty( $value ) ? '' : esc_url_raw( $value ); 
     3701        } else { 
     3702            return new WP_Error( 'unrecognized_setting', __( 'Unrecognized background setting.' ) ); 
     3703        } 
     3704        return $value; 
     3705    } 
     3706 
     3707    /** 
    36273708     * Callback for rendering the custom logo, used in the custom_logo partial. 
    36283709     * 

  • trunk/src/wp-includes/customize/class-wp-customize-background-image-control.php

    r35389 r38948  
    4141        parent::enqueue(); 
    4242 
     43        $custom_background = get_theme_support( 'custom-background' ); 
    4344        wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array( 
     45            'defaults' => ! empty( $custom_background[0] ) ? $custom_background[0] : array(), 
    4446            'nonces' => array( 
    4547                'add' => wp_create_nonce( 'background-add' ), 

  • trunk/src/wp-includes/js/customize-preview.js

    r38926 r38948  
    736736 
    737737        /* Custom Backgrounds */ 
    738         bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) { 
     738        bg = $.map( ['color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment'], function( prop ) { 
    739739            return 'background_' + prop; 
    740         }); 
    741  
    742         api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) { 
     740        } ); 
     741 
     742        api.when.apply( api, bg ).done( function( color, image, preset, positionX, positionY, size, repeat, attachment ) { 
    743743            var body = $(document.body), 
    744744                head = $('head'), 
    … …  
    760760                if ( image() ) { 
    761761                    css += 'background-image: url("' + image() + '");'; 
    762                     css += 'background-position: top ' + position_x() + ';'; 
     762                    css += 'background-size: ' + size() + ';'; 
     763                    css += 'background-position: ' + positionX() + ' ' + positionY() + ';'; 
    763764                    css += 'background-repeat: ' + repeat() + ';'; 
    764765                    css += 'background-attachment: ' + attachment() + ';'; 

  • trunk/src/wp-includes/theme.php

    r38829 r38948  
    13751375 
    13761376    if ( $background ) { 
    1377         $image = " background-image: url('$background');"; 
    1378  
     1377        $image = " background-image: url(" . wp_json_encode( $background ) . ");"; 
     1378 
     1379        // Background Position. 
     1380        $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 
     1381        $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); 
     1382 
     1383        if ( ! in_array( $position_x, array( 'left', 'center', 'right' ), true ) ) { 
     1384            $position_x = 'left'; 
     1385        } 
     1386 
     1387        if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ), true ) ) { 
     1388            $position_y = 'top'; 
     1389        } 
     1390 
     1391        $position = " background-position: $position_x $position_y;"; 
     1392 
     1393        // Background Size. 
     1394        $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ); 
     1395 
     1396        if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ), true ) ) { 
     1397            $size = 'auto'; 
     1398        } 
     1399 
     1400        $size = " background-size: $size;"; 
     1401 
     1402        // Background Repeat. 
    13791403        $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ); 
    1380         if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) 
     1404 
     1405        if ( ! in_array( $repeat, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ), true ) ) { 
    13811406            $repeat = 'repeat'; 
     1407        } 
     1408 
    13821409        $repeat = " background-repeat: $repeat;"; 
    13831410 
    1384         $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 
    1385         if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) ) 
    1386             $position = 'left'; 
    1387         $position = " background-position: top $position;"; 
    1388  
     1411        // Background Scroll. 
    13891412        $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); 
    1390         if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) 
     1413 
     1414        if ( 'fixed' !== $attachment ) { 
    13911415            $attachment = 'scroll'; 
     1416        } 
     1417 
    13921418        $attachment = " background-attachment: $attachment;"; 
    13931419 
    1394         $style .= $image . $repeat . $position . $attachment; 
     1420        $style .= $image . $position . $size . $repeat . $attachment; 
    13951421    } 
    13961422?> 
    … …  
    17731799            $defaults = array( 
    17741800                'default-image'          => '', 
     1801                'default-preset'         => 'default', 
     1802                'default-position-x'     => 'left', 
     1803                'default-position-y'     => 'top', 
     1804                'default-size'           => 'auto', 
    17751805                'default-repeat'         => 'repeat', 
    1776                 'default-position-x'     => 'left', 
    17771806                'default-attachment'     => 'scroll', 
    17781807                'default-color'          => '', 
Note: See TracChangeset for help on using the changeset viewer.