WordPress.org
Get WordPress

Make WordPress Core

Ticket #22058: 22058.5.diff

File 22058.5.diff, 39.1 KB (added by cdog, 8 years ago)

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

     
    10221022        height: 553px;
    10231023}
    10241024
     1025/* Position control */
     1026.customize-control-position .position-control .button-group {
     1027        display: block;
     1028}
     1029
    10251030/**
    10261031 * Themes
    10271032 */

  • wp-admin/css/themes.css

     
    11761176        max-height: 300px;
    11771177}
    11781178
     1179.position-control input[type="radio"] {
     1180        display: none;
     1181}
     1182
     1183.position-control input[type="radio"]:checked ~ .button {
     1184        background: #eee;
     1185        border-color: #999;
     1186        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1187        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1188        z-index: 1;
     1189}
     1190
     1191.position-control .circle:before {
     1192        content: "\25cf";
     1193        display: inline-block;
     1194        height: 20px;
     1195        text-align: center;
     1196        width: 20px;
     1197        font-size: 25px;
     1198}
     1199
     1200.position-control .button-group {
     1201        display: block;
     1202}
     1203
     1204.position-control .button-group .button {
     1205        -webkit-border-radius: 0;
     1206        border-radius: 0;
     1207        -webkit-box-shadow: none;
     1208        box-shadow: none;
     1209        height: 40px;
     1210        line-height: 37px;
     1211        margin: 0 -1px 0 0 !important;
     1212        position: relative;
     1213}
     1214
     1215.position-control .button-group .button:active,
     1216.position-control .button-group .button:hover,
     1217.position-control .button-group .button:focus {
     1218        z-index: 1;
     1219}
     1220
     1221.position-control .button-group:last-child .button {
     1222        -webkit-box-shadow: 0 1px 0 #ccc;
     1223        box-shadow: 0 1px 0 #ccc;
     1224}
     1225
     1226.position-control .button-group:first-child > label:first-child .button {
     1227        -webkit-border-radius: 3px 0 0;
     1228        border-radius: 3px 0 0;
     1229}
     1230
     1231.position-control .button-group:first-child > label:first-child .dashicons {
     1232        -webkit-transform: rotate( 45deg );
     1233        -ms-transform: rotate( 45deg );
     1234        transform: rotate( 45deg );
     1235}
     1236
     1237.position-control .button-group:first-child > label:last-child .button {
     1238        -webkit-border-radius: 0 3px 0 0;
     1239        border-radius: 0 3px 0 0;
     1240}
     1241
     1242.position-control .button-group:first-child > label:last-child .dashicons {
     1243        -webkit-transform: rotate( -45deg );
     1244        -ms-transform: rotate( -45deg );
     1245        transform: rotate( -45deg );
     1246}
     1247
     1248.position-control .button-group:last-child > label:first-child .button {
     1249        -webkit-border-radius: 0 0 0 3px;
     1250        border-radius: 0 0 0 3px;
     1251}
     1252
     1253.position-control .button-group:last-child > label:first-child .dashicons {
     1254        -webkit-transform: rotate( -45deg );
     1255        -ms-transform: rotate( -45deg );
     1256        transform: rotate( -45deg );
     1257}
     1258
     1259.position-control .button-group:last-child > label:last-child .button {
     1260        -webkit-border-radius: 0 0 3px 0;
     1261        border-radius: 0 0 3px 0;
     1262}
     1263
     1264.position-control .button-group:last-child > label:last-child .dashicons {
     1265        -webkit-transform: rotate( 45deg );
     1266        -ms-transform: rotate( 45deg );
     1267        transform: rotate( 45deg );
     1268}
     1269
     1270.position-control .button-group .dashicons {
     1271        margin-top: 9px;
     1272}
     1273
     1274.position-control .button-group + .button-group {
     1275        margin-top: -1px;
     1276}
     1277
    11791278/*------------------------------------------------------------------------------
    11801279  23.0 - Full Overlay w/ Sidebar
    11811280------------------------------------------------------------------------------*/

  • wp-admin/custom-background.php

     
    133133                        return;
    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
    141                                 $repeat = 'repeat';
    142                         set_theme_mod('background_repeat', $repeat);
     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' ) ) ) {
     140                                $preset = $_POST['background-preset'];
     141                        } else {
     142                                $preset = 'default';
     143                        }
     144
     145                        set_theme_mod( 'background_preset', $preset );
    143146                }
    144147
    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);
     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' ) ) ) {
     154                                $position_x = $position[0];
     155                        } else {
     156                                $position_x = 'left';
     157                        }
     158
     159                        if ( in_array( $position[1], array( 'top', 'center', 'bottom' ) ) ) {
     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 );
    152167                }
    153168
    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);
     169                if ( isset( $_POST['background-size'] ) ) {
     170                        check_admin_referer( 'custom-background' );
     171
     172                        if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ) ) ) {
     173                                $size = $_POST['background-size'];
     174                        } else {
     175                                $size = 'auto';
     176                        }
     177
     178                        set_theme_mod( 'background_size', $size );
    161179                }
    162180
     181                if ( isset( $_POST['background-repeat'] ) ) {
     182                        check_admin_referer( 'custom-background' );
     183
     184                        $repeat = $_POST['background-repeat'];
     185
     186                        if ( 'no-repeat' !== $repeat ) {
     187                                $repeat = 'repeat';
     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 );
     203                }
     204
    163205                if ( isset($_POST['background-color']) ) {
    164206                        check_admin_referer('custom-background');
    165207                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
    … …  
    219261                $background_image_thumb = get_background_image();
    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_preset = get_theme_mod( 'background_preset', get_theme_support( 'custom-background', 'default-preset' ) );
     265                        $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     266                        $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     267                        $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     268                        $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
     269                        $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    222270
    223271                        // 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' ) );
     272                        $background_styles .= " background-image: url('$background_image_thumb');"
     273                                . " background-size: $background_size;"
     274                                . " background-position: $background_position_x $background_position_y;"
     275                                . " background-repeat: $background_repeat;"
     276                                . " background-attachment: $background_attachment;";
    227277                }
    228278        ?>
    229279        <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
    … …  
    287337</tbody>
    288338</table>
    289339
    290 <h3><?php _e('Display Options') ?></h3>
     340<h3><?php _e( 'Display Options' ); ?></h3>
    291341<form method="post">
    292342<table class="form-table">
    293343<tbody>
    294344<?php if ( get_background_image() ) : ?>
     345<input name="background-preset" type="hidden" value="custom">
     346
     347<?php
     348$background_position = sprintf(
     349        '%s %s',
     350        get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
     351        get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
     352);
     353?>
    295354<tr>
    296 <th scope="row"><?php _e( 'Position' ); ?></th>
    297 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
     355<th scope="row"><?php _e( 'Image Position' ); ?></th>
     356<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
     357<div class="position-control">
     358<div class="button-group">
    298359<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') ?>
     360        <input name="background-position" type="radio" value="left top"<?php checked( 'left top', $background_position ); ?>>
     361        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     362        <span class="screen-reader-text"><?php _e( 'Top Left' ); ?></span>
    301363</label>
    302364<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') ?>
     365        <input name="background-position" type="radio" value="center top"<?php checked( 'center top', $background_position ); ?>>
     366        <span class="button display-options position"><span class="dashicons dashicons-arrow-up-alt"></span></span>
     367        <span class="screen-reader-text"><?php _e( 'Top' ); ?></span>
    305368</label>
    306369<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') ?>
     370        <input name="background-position" type="radio" value="right top"<?php checked( 'right top', $background_position ); ?>>
     371        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     372        <span class="screen-reader-text"><?php _e( 'Top Right' ); ?></span>
    309373</label>
     374</div>
     375<div class="button-group">
     376<label>
     377        <input name="background-position" type="radio" value="left center"<?php checked( 'left center', $background_position ); ?>>
     378        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     379        <span class="screen-reader-text"><?php _e( 'Left' ); ?></span>
     380</label>
     381<label>
     382        <input name="background-position" type="radio" value="center center"<?php checked( 'center center', $background_position ); ?>>
     383        <span class="button display-options position"><span class="circle"></span></span>
     384        <span class="screen-reader-text"><?php _e( 'Center' ); ?></span>
     385</label>
     386<label>
     387        <input name="background-position" type="radio" value="right center"<?php checked( 'right center', $background_position ); ?>>
     388        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     389        <span class="screen-reader-text"><?php _e( 'Right' ); ?></span>
     390</label>
     391</div>
     392<div class="button-group">
     393<label>
     394        <input name="background-position" type="radio" value="left bottom"<?php checked( 'left bottom', $background_position ); ?>>
     395        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     396        <span class="screen-reader-text"><?php _e( 'Bottom Left' ); ?></span>
     397</label>
     398<label>
     399        <input name="background-position" type="radio" value="center bottom"<?php checked( 'center bottom', $background_position ); ?>>
     400        <span class="button display-options position"><span class="dashicons dashicons-arrow-down-alt"></span></span>
     401        <span class="screen-reader-text"><?php _e( 'Bottom' ); ?></span>
     402</label>
     403<label>
     404        <input name="background-position" type="radio" value="right bottom"<?php checked( 'right bottom', $background_position ); ?>>
     405        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     406        <span class="screen-reader-text"><?php _e( 'Bottom Right' ); ?></span>
     407</label>
     408</div>
     409</div>
    310410</fieldset></td>
    311411</tr>
    312412
    313413<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>
     414<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
     415<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
     416<select id="background-size" name="background-size">
     417<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
     418<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
     419<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
     420</select>
    320421</fieldset></td>
    321422</tr>
    322423
    323424<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>
     425<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
     426<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend>
     427<input name="background-repeat" type="hidden" value="no-repeat">
     428<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>
    334429</fieldset></td>
    335430</tr>
     431
     432<tr>
     433<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
     434<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend>
     435<input name="background-attachment" type="hidden" value="fixed">
     436<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>
     437</fieldset></td>
     438</tr>
    336439<?php endif; // get_background_image() ?>
    337440<tr>
    338441<th scope="row"><?php _e( 'Background Color' ); ?></th>
    … …  
    342445if ( current_theme_supports( 'custom-background', 'default-color' ) )
    343446        $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
    344447?>
    345 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
     448<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
    346449</fieldset></td>
    347450</tr>
    348451</tbody>

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

     
    1313                        }
    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() );
    2222                });
    2323
     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' );
     30                });
     31
    2432                $('#choose-from-library-link').click( function( event ) {
    2533                        var $el = $(this);
    2634

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

     
    30533053        });
    30543054
    30553055        /**
     3056         * A 2-axis positioning control.
     3057         *
     3058         * @class
     3059         * @augments wp.customize.Control
     3060         * @augments wp.customize.Class
     3061         */
     3062        api.PositionControl = api.Control.extend( {
     3063                ready: function() {
     3064                        var control = this,
     3065                                value,
     3066                                position;
     3067
     3068                        control.container.on( 'change', 'input[name="background-position"]', function() {
     3069                                value = $( this ).val();
     3070                                position = value.split( ' ' );
     3071
     3072                                control.settings[0]( position[0] );
     3073                                control.settings[1]( position[1] );
     3074                        } );
     3075                }
     3076        } );
     3077
     3078        /**
    30563079         * A control for selecting and cropping an image.
    30573080         *
    30583081         * @class
    … …  
    44064429                site_icon:     api.SiteIconControl,
    44074430                header:        api.HeaderControl,
    44084431                background:    api.BackgroundControl,
     4432                position:      api.PositionControl,
    44094433                theme:         api.ThemeControl
    44104434        };
    44114435        api.panelConstructor = {
    … …  
    45314555                        if ( 'themes' === panel.id ) {
    45324556                                return; // Don't reflow theme sections, as doing so moves them after the themes container.
    45334557                        }
    4534                        
     4558
    45354559                        var sections = panel.sections(),
    45364560                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
    45374561                        rootNodes.push( panel );
    … …  
    52595283                // Control visibility for default controls
    52605284                $.each({
    52615285                        'background_image': {
    5262                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
     5286                                controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ],
    52635287                                callback: function( to ) { return !! to; }
    52645288                        },
    52655289                        'show_on_front': {
    … …  
    52855309                        });
    52865310                });
    52875311
     5312                api.control( 'background_preset', function( control ) {
     5313                        var visibility = { // position, size, repeat, attachment
     5314                                'default': [ false, false, false, false ],
     5315                                'fill': [ false, false, false, false ],
     5316                                'fit': [ true, false, true, false ],
     5317                                'repeat': [ true, false, false, true ],
     5318                                'custom': [ true, true, true, true ],
     5319                        };
     5320
     5321                        var values = { // position_x, position_y, size, repeat, attachment
     5322                                'default': [ 'left', 'top', 'auto', 'no-repeat', 'scroll' ], // TODO: get defaults
     5323                                'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ],
     5324                                'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ],
     5325                                'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ],
     5326                        };
     5327
     5328                        var toggleVisibility = function( preset ) {
     5329                                api.control( 'background_position' ).container.toggle( visibility[ preset ][0] );
     5330                                api.control( 'background_size' ).container.toggle( visibility[ preset ][1] );
     5331                                api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] );
     5332                                api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] );
     5333                        };
     5334
     5335                        var updateSettings = function( preset ) {
     5336                                api( 'background_position_x' ).set( values[ preset ][0] );
     5337                                api( 'background_position_y' ).set( values[ preset ][1] );
     5338
     5339                                api.control( 'background_position' ).container.find( 'input[name="background-position"]' ).val( [ values[ preset ][0] + ' ' + values[ preset ][1] ] );
     5340
     5341                                api( 'background_size' ).set( values[ preset ][2] );
     5342                                api( 'background_repeat' ).set( values[ preset ][3] );
     5343                                api( 'background_attachment' ).set( values[ preset ][4] );
     5344                        };
     5345
     5346                        var preset = control.setting.get();
     5347
     5348                        toggleVisibility( preset );
     5349
     5350                        control.setting.bind( 'change', function( preset ) {
     5351                                toggleVisibility( preset );
     5352
     5353                                if ( 'custom' === preset ) {
     5354                                        return;
     5355                                }
     5356
     5357                                updateSettings( preset );
     5358                        } );
     5359                } );
     5360
     5361                api.control( 'background_repeat', function( control ) {
     5362                        control.elements[0].unsync( api( 'background_repeat' ) );
     5363
     5364                        control.element = new api.Element( control.container.find( 'input' ) );
     5365                        control.element.set( 'no-repeat' !== control.setting() );
     5366
     5367                        control.element.bind( function( to ) {
     5368                                control.setting.set( to ? 'repeat' : 'no-repeat' );
     5369                        } );
     5370
     5371                        control.setting.bind( function( to ) {
     5372                                control.element.set( 'no-repeat' !== to );
     5373                        } );
     5374                } );
     5375
     5376                api.control( 'background_attachment', function( control ) {
     5377                        control.elements[0].unsync( api( 'background_attachment' ) );
     5378
     5379                        control.element = new api.Element( control.container.find( 'input' ) );
     5380                        control.element.set( 'fixed' !== control.setting() );
     5381
     5382                        control.element.bind( function( to ) {
     5383                                control.setting.set( to ? 'scroll' : 'fixed' );
     5384                        } );
     5385
     5386                        control.setting.bind( function( to ) {
     5387                                control.element.set( 'fixed' !== to );
     5388                        } );
     5389                } );
     5390
    52885391                // Juggle the two controls that use header_textcolor
    52895392                api.control( 'display_header_text', function( control ) {
    52905393                        var last = '';

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

     
    623623/** WP_Customize_Background_Image_Control class */
    624624require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
    625625
     626/** WP_Customize_Position_Control class */
     627require_once( ABSPATH . WPINC . '/customize/class-wp-customize-position-control.php' );
     628
    626629/** WP_Customize_Cropped_Image_Control class */
    627630require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
    628631

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

     
    279279                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-upload-control.php' );
    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-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' );
    284285                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
    … …  
    30043005                $this->register_control_type( 'WP_Customize_Upload_Control' );
    30053006                $this->register_control_type( 'WP_Customize_Image_Control' );
    30063007                $this->register_control_type( 'WP_Customize_Background_Image_Control' );
     3008                $this->register_control_type( 'WP_Customize_Position_Control' );
    30073009                $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
    30083010                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    30093011                $this->register_control_type( 'WP_Customize_Theme_Control' );
    … …  
    32603262
    32613263                $this->add_control( new WP_Customize_Background_Image_Control( $this ) );
    32623264
    3263                 $this->add_setting( 'background_repeat', array(
    3264                         'default'        => get_theme_support( 'custom-background', 'default-repeat' ),
     3265                $this->add_setting( 'background_preset', array(
     3266                        'default'        => get_theme_support( 'custom-background', 'default-preset' ),
    32653267                        'theme_supports' => 'custom-background',
    32663268                ) );
    32673269
    3268                 $this->add_control( 'background_repeat', array(
    3269                         'label'      => __( 'Background Repeat' ),
     3270                $this->add_control( 'background_preset', array(
     3271                        'label'      => _x( 'Preset', 'Background Preset' ),
    32703272                        'section'    => 'background_image',
    3271                         'type'       => 'radio',
     3273                        'type'       => 'select',
    32723274                        'choices'    => array(
    3273                                 'no-repeat'  => __('No Repeat'),
    3274                                 'repeat'     => __('Tile'),
    3275                                 'repeat-x'   => __('Tile Horizontally'),
    3276                                 'repeat-y'   => __('Tile Vertically'),
     3275                                'default' => _x( 'Default', 'Default Preset' ),
     3276                                'fill'    => __( 'Fill Screen' ),
     3277                                'fit'     => __( 'Fit to Screen' ),
     3278                                'repeat'  => _x( 'Repeat', 'Repeat Image' ),
     3279                                'custom'  => _x( 'Custom', 'Custom Preset' ),
    32773280                        ),
    32783281                ) );
    32793282
    … …  
    32823285                        'theme_supports' => 'custom-background',
    32833286                ) );
    32843287
    3285                 $this->add_control( 'background_position_x', array(
    3286                         'label'      => __( 'Background Position' ),
     3288                $this->add_setting( 'background_position_y', array(
     3289                        'default'        => get_theme_support( 'custom-background', 'default-position-y' ),
     3290                        'theme_supports' => 'custom-background',
     3291                ) );
     3292
     3293                $this->add_control( new WP_Customize_Position_Control( $this, 'background_position', array(
     3294                        'label'    => __( 'Image Position' ),
     3295                        'section'  => 'background_image',
     3296                        'settings' => array( 'background_position_x', 'background_position_y' ),
     3297                ) ) );
     3298
     3299                $this->add_setting( 'background_size', array(
     3300                        'default'        => get_theme_support( 'custom-background', 'default-size' ),
     3301                        'theme_supports' => 'custom-background',
     3302                ) );
     3303
     3304                $this->add_control( 'background_size', array(
     3305                        'label'      => __( 'Image Size' ),
    32873306                        'section'    => 'background_image',
    3288                         'type'       => 'radio',
     3307                        'type'       => 'select',
    32893308                        'choices'    => array(
    3290                                 'left'       => __('Left'),
    3291                                 'center'     => __('Center'),
    3292                                 'right'      => __('Right'),
     3309                                'auto'    => __( 'Original' ),
     3310                                'contain' => __( 'Fit to Screen' ),
     3311                                'cover'   => __( 'Fill Screen' ),
    32933312                        ),
    32943313                ) );
    32953314
     3315                $this->add_setting( 'background_repeat', array(
     3316                        'default'           => get_theme_support( 'custom-background', 'default-repeat' ),
     3317                        'sanitize_callback' => array( $this, '_sanitize_background_repeat' ),
     3318                        'theme_supports'    => 'custom-background',
     3319                ) );
     3320
     3321                $this->add_control( 'background_repeat', array(
     3322                        'label'    => __( 'Repeat Background Image' ),
     3323                        'section'  => 'background_image',
     3324                        'type'     => 'checkbox',
     3325                ) );
     3326
    32963327                $this->add_setting( 'background_attachment', array(
    3297                         'default'        => get_theme_support( 'custom-background', 'default-attachment' ),
    3298                         'theme_supports' => 'custom-background',
     3328                        'default'           => get_theme_support( 'custom-background', 'default-attachment' ),
     3329                        'sanitize_callback' => array( $this, '_sanitize_background_attachment' ),
     3330                        'theme_supports'    => 'custom-background',
    32993331                ) );
    33003332
    33013333                $this->add_control( 'background_attachment', array(
    3302                         'label'      => __( 'Background Attachment' ),
    3303                         'section'    => 'background_image',
    3304                         'type'       => 'radio',
    3305                         'choices'    => array(
    3306                                 'scroll'     => __('Scroll'),
    3307                                 'fixed'      => __('Fixed'),
    3308                         ),
     3334                        'label'    => __( 'Scroll with Page' ),
     3335                        'section'  => 'background_image',
     3336                        'type'     => 'checkbox',
    33093337                ) );
    33103338
     3339
    33113340                // If the theme is using the default background callback, we can update
    33123341                // the background CSS using postMessage.
    33133342                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
    3314                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
     3343                        foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) {
    33153344                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage';
    33163345                        }
    33173346                }
    … …  
    35953624        }
    35963625
    35973626        /**
     3627         * Callback for validating the background_repeat value.
     3628         *
     3629         * @since 4.7.0
     3630         *
     3631         * @param string $repeat
     3632         * @return string Background repeat.
     3633         */
     3634        public function _sanitize_background_repeat( $repeat ) {
     3635                if ( 'no-repeat' !== $repeat ) {
     3636                        $repeat = 'repeat';
     3637                }
     3638
     3639                return $repeat;
     3640        }
     3641
     3642        /**
     3643         * Callback for validating the background_attachment value.
     3644         *
     3645         * @since 4.7.0
     3646         *
     3647         * @param string $attachment
     3648         * @return string Background attachment.
     3649         */
     3650        public function _sanitize_background_attachment( $attachment ) {
     3651                if ( 'fixed' !== $attachment ) {
     3652                        $attachment = 'scroll';
     3653                }
     3654
     3655                return $attachment;
     3656        }
     3657
     3658        /**
    35983659         * Callback for rendering the custom logo, used in the custom_logo partial.
    35993660         *
    36003661         * This method exists because the partial object and context data are passed

  • wp-includes/customize/class-wp-customize-position-control.php

     
     1<?php
     2/**
     3 * Customize API: WP_Customize_Position_Control class
     4 *
     5 * @package WordPress
     6 * @subpackage Customize
     7 * @since 4.7.0
     8 */
     9
     10/**
     11 * Customize Position Control class.
     12 *
     13 * @since 4.7.0
     14 *
     15 * @see WP_Customize_Control
     16 */
     17class WP_Customize_Position_Control extends WP_Customize_Control {
     18        /**
     19         * @access public
     20         * @var string
     21         */
     22        public $type = 'position';
     23
     24        /**
     25         * Refresh the parameters passed to the JavaScript via JSON.
     26         *
     27         * @since 4.7.0
     28         * @uses WP_Customize_Control::to_json()
     29         */
     30        public function to_json() {
     31                parent::to_json();
     32
     33                $this->json['value'] = $this->settings[0]->value() . ' ' . $this->settings[1]->value();
     34                $this->json['defaultValue'] = $this->settings[0]->default . ' ' . $this->settings[1]->default;
     35        }
     36
     37        /**
     38         * Don't render the control content from PHP, as it's rendered via JS on load.
     39         *
     40         * @since 4.7.0
     41         */
     42        public function render_content() {}
     43
     44        /**
     45         * Render a JS template for the content of the position control.
     46         *
     47         * @since 4.7.0
     48         */
     49        public function content_template() {
     50                ?>
     51                <# var value = data.defaultValue;
     52
     53                if ( data.value ) {
     54                        value = data.value;
     55                } #>
     56                <# if ( data.label ) { #>
     57                        <span class="customize-control-title">{{{ data.label }}}</span>
     58                <# } #>
     59                <# if ( data.description ) { #>
     60                        <span class="description customize-control-description">{{{ data.description }}}</span>
     61                <# } #>
     62                <div class="customize-control-content">
     63                <div class="position-control">
     64                <div class="button-group">
     65                <label>
     66                        <input name="background-position" type="radio" value="left top"<# if ( 'left top' === value ) { #>checked<# } #>>
     67                        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     68                        <span class="screen-reader-text"><?php _e( 'Top Left' ); ?></span>
     69                </label>
     70                <label>
     71                        <input name="background-position" type="radio" value="center top"<# if ( 'center top' === value ) { #>checked<# } #>>
     72                        <span class="button display-options position"><span class="dashicons dashicons-arrow-up-alt"></span></span>
     73                        <span class="screen-reader-text"><?php _e( 'Top' ); ?></span>
     74                </label>
     75                <label>
     76                        <input name="background-position" type="radio" value="right top"<# if ( 'right top' === value ) { #>checked<# } #>>
     77                        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     78                        <span class="screen-reader-text"><?php _e( 'Top Right' ); ?></span>
     79                </label>
     80                </div>
     81                <div class="button-group">
     82                <label>
     83                        <input name="background-position" type="radio" value="left center"<# if ( 'left center' === value ) { #>checked<# } #>>
     84                        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     85                        <span class="screen-reader-text"><?php _e( 'Left' ); ?></span>
     86                </label>
     87                <label>
     88                        <input name="background-position" type="radio" value="center center"<# if ( 'center center' === value ) { #>checked<# } #>>
     89                        <span class="button display-options position"><span class="circle"></span></span>
     90                        <span class="screen-reader-text"><?php _e( 'Center' ); ?></span>
     91                </label>
     92                <label>
     93                        <input name="background-position" type="radio" value="right center"<# if ( 'right center' === value ) { #>checked<# } #>>
     94                        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     95                        <span class="screen-reader-text"><?php _e( 'Right' ); ?></span>
     96                </label>
     97                </div>
     98                <div class="button-group">
     99                <label>
     100                        <input name="background-position" type="radio" value="left bottom"<# if ( 'left bottom' === value ) { #>checked<# } #>>
     101                        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     102                        <span class="screen-reader-text"><?php _e( 'Bottom Left' ); ?></span>
     103                </label>
     104                <label>
     105                        <input name="background-position" type="radio" value="center bottom"<# if ( 'center bottom' === value ) { #>checked<# } #>>
     106                        <span class="button display-options position"><span class="dashicons dashicons-arrow-down-alt"></span></span>
     107                        <span class="screen-reader-text"><?php _e( 'Bottom' ); ?></span>
     108                </label>
     109                <label>
     110                        <input name="background-position" type="radio" value="right bottom"<# if ( 'right bottom' === value ) { #>checked<# } #>>
     111                        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     112                        <span class="screen-reader-text"><?php _e( 'Bottom Right' ); ?></span>
     113                </label>
     114                </div>
     115                </div>
     116                </div>
     117                <?php
     118        }
     119}

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

     
    736736                });
    737737
    738738                /* Custom Backgrounds */
    739                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
     739                bg = $.map( ['color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment'], function( prop ) {
    740740                        return 'background_' + prop;
    741                 });
     741                } );
    742742
    743                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
     743                api.when.apply( api, bg ).done( function( color, image, preset, position_x, position_y, size, repeat, attachment ) {
    744744                        var body = $(document.body),
    745745                                head = $('head'),
    746746                                style = $('#custom-background-css'),
    … …  
    760760
    761761                                if ( image() ) {
    762762                                        css += 'background-image: url("' + image() + '");';
    763                                         css += 'background-position: top ' + position_x() + ';';
     763                                        css += 'background-size: ' + size() + ';';
     764                                        css += 'background-position: ' + position_x() + ' ' + position_y() + ';';
    764765                                        css += 'background-repeat: ' + repeat() + ';';
    765766                                        css += 'background-attachment: ' + attachment() + ';';
    766767                                }

  • wp-includes/theme.php

     
    13761376        if ( $background ) {
    13771377                $image = " background-image: url('$background');";
    13781378
     1379                // Background Preset
     1380                $preset = get_theme_mod( 'background_preset', get_theme_support( 'custom-background', 'default-preset' ) );
     1381
     1382                if ( ! in_array( $preset, array( 'default', 'fill', 'fit', 'repeat', 'custom' ) ) ) {
     1383                        $preset = 'custom';
     1384                }
     1385
     1386                // Background Position
     1387                $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     1388                $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     1389
     1390                if ( ! in_array( $position_x, array( 'left', 'center', 'right' ) ) ) {
     1391                        $position = 'left';
     1392                }
     1393
     1394                if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ) ) ) {
     1395                        $position = 'top';
     1396                }
     1397
     1398                $position = " background-position: $position_x $position_y;";
     1399
     1400                // Background Size
     1401                $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     1402
     1403                if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ) ) ) {
     1404                        $size = 'auto';
     1405                }
     1406
     1407                $size = " background-size: $size;";
     1408
     1409                // Background Repeat
    13791410                $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' ) ) )
     1411
     1412                if ( ! in_array( $repeat, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ) ) ) {
    13811413                        $repeat = 'repeat';
     1414                }
     1415
    13821416                $repeat = " background-repeat: $repeat;";
    13831417
    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;";
     1418                // Background Scroll
     1419                $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    13881420
    1389                 $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    1390                 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
     1421                if ( 'fixed' !== $attachment ) {
    13911422                        $attachment = 'scroll';
     1423                }
     1424
    13921425                $attachment = " background-attachment: $attachment;";
    13931426
    1394                 $style .= $image . $repeat . $position . $attachment;
     1427                $style .= $image . $position . $size . $repeat . $attachment;
    13951428        }
    13961429?>
    13971430<style type="text/css" id="custom-background-css">
    … …  
    17721805
    17731806                        $defaults = array(
    17741807                                'default-image'          => '',
     1808                                'default-preset'         => 'default',
     1809                                'default-position-x'     => 'left',
     1810                                'default-position-y'     => 'top',
     1811                                'default-size'           => 'auto',
    17751812                                'default-repeat'         => 'repeat',
    1776                                 'default-position-x'     => 'left',
    17771813                                'default-attachment'     => 'scroll',
    17781814                                'default-color'          => '',
    17791815                                'wp-head-callback'       => '_custom_background_cb',