WordPress.org

Make WordPress Core

Ticket #22058: 22058.6.diff

File 22058.6.diff, 38.1 KB (added by cdog, 4 years ago)
  • wp-admin/css/customize-controls.css

     
    10181018        float: right;
    10191019}
    10201020
     1021/* Background position control */
     1022.customize-control-background_position .background-position-control .button-group {
     1023        display: block;
     1024}
     1025
    10211026/**
    10221027 * Custom CSS Section
    10231028 *
  • wp-admin/css/themes.css

     
    11761176        max-height: 300px;
    11771177}
    11781178
     1179.background-position-control input[type="radio"] {
     1180        display: none;
     1181}
     1182
     1183.background-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.background-position-control .background-position-center-icon: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.background-position-control .button-group {
     1201        display: block;
     1202}
     1203
     1204.background-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 !important;
     1210        line-height: 37px !important;
     1211        margin: 0 -1px 0 0 !important;
     1212        padding: 0 10px 1px !important;
     1213        position: relative;
     1214}
     1215
     1216.background-position-control .button-group .button:active,
     1217.background-position-control .button-group .button:hover,
     1218.background-position-control .button-group .button:focus {
     1219        z-index: 1;
     1220}
     1221
     1222.background-position-control .button-group:last-child .button {
     1223        -webkit-box-shadow: 0 1px 0 #ccc;
     1224        box-shadow: 0 1px 0 #ccc;
     1225}
     1226
     1227.background-position-control .button-group > label {
     1228        margin: 0 !important;
     1229}
     1230
     1231.background-position-control .button-group:first-child > label:first-child .button {
     1232        -webkit-border-radius: 3px 0 0;
     1233        border-radius: 3px 0 0;
     1234}
     1235
     1236.background-position-control .button-group:first-child > label:first-child .dashicons {
     1237        -webkit-transform: rotate( 45deg );
     1238        -ms-transform: rotate( 45deg );
     1239        transform: rotate( 45deg );
     1240}
     1241
     1242.background-position-control .button-group:first-child > label:last-child .button {
     1243        -webkit-border-radius: 0 3px 0 0;
     1244        border-radius: 0 3px 0 0;
     1245}
     1246
     1247.background-position-control .button-group:first-child > label:last-child .dashicons {
     1248        -webkit-transform: rotate( -45deg );
     1249        -ms-transform: rotate( -45deg );
     1250        transform: rotate( -45deg );
     1251}
     1252
     1253.background-position-control .button-group:last-child > label:first-child .button {
     1254        -webkit-border-radius: 0 0 0 3px;
     1255        border-radius: 0 0 0 3px;
     1256}
     1257
     1258.background-position-control .button-group:last-child > label:first-child .dashicons {
     1259        -webkit-transform: rotate( -45deg );
     1260        -ms-transform: rotate( -45deg );
     1261        transform: rotate( -45deg );
     1262}
     1263
     1264.background-position-control .button-group:last-child > label:last-child .button {
     1265        -webkit-border-radius: 0 0 3px 0;
     1266        border-radius: 0 0 3px 0;
     1267}
     1268
     1269.background-position-control .button-group:last-child > label:last-child .dashicons {
     1270        -webkit-transform: rotate( 45deg );
     1271        -ms-transform: rotate( 45deg );
     1272        transform: rotate( 45deg );
     1273}
     1274
     1275.background-position-control .button-group .dashicons {
     1276        margin-top: 9px;
     1277}
     1278
     1279.background-position-control .button-group + .button-group {
     1280        margin-top: -1px;
     1281}
     1282
    11791283/*------------------------------------------------------------------------------
    11801284  23.0 - Full Overlay w/ Sidebar
    11811285------------------------------------------------------------------------------*/
  • 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_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        ?>
    229278        <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
     
    287336</tbody>
    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() ) : ?>
     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?>
    295371<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>
     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 name="background-position" type="radio" value="<?php echo $value; ?>"<?php checked( $value, $background_position ); ?>>
     380                        <span class="button display-options position"><span class="<?php echo $input['icon']; ?>"></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>
    334406</fieldset></td>
    335407</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>
     414</fieldset></td>
     415</tr>
    336416<?php endif; // get_background_image() ?>
    337417<tr>
    338418<th scope="row"><?php _e( 'Background Color' ); ?></th>
     
    342422if ( current_theme_supports( 'custom-background', 'default-color' ) )
    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>
    348428</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

     
    30613061        });
    30623062
    30633063        /**
     3064         * A control for positioning a background image.
     3065         *
     3066         * @class
     3067         * @augments wp.customize.Control
     3068         * @augments wp.customize.Class
     3069         */
     3070        api.BackgroundPositionControl = api.Control.extend( {
     3071                ready: function() {
     3072                        var control = this,
     3073                                value,
     3074                                position;
     3075
     3076                        control.container.on( 'change', 'input[name="background-position"]', function() {
     3077                                value = $( this ).val();
     3078                                position = value.split( ' ' );
     3079
     3080                                control.settings[0]( position[0] );
     3081                                control.settings[1]( position[1] );
     3082                        } );
     3083                }
     3084        } );
     3085
     3086        /**
    30643087         * A control for selecting and cropping an image.
    30653088         *
    30663089         * @class
     
    44064429
    44074430        api.settingConstructor = {};
    44084431        api.controlConstructor = {
    4409                 color:         api.ColorControl,
    4410                 media:         api.MediaControl,
    4411                 upload:        api.UploadControl,
    4412                 image:         api.ImageControl,
    4413                 cropped_image: api.CroppedImageControl,
    4414                 site_icon:     api.SiteIconControl,
    4415                 header:        api.HeaderControl,
    4416                 background:    api.BackgroundControl,
    4417                 theme:         api.ThemeControl
     4432                color:               api.ColorControl,
     4433                media:               api.MediaControl,
     4434                upload:              api.UploadControl,
     4435                image:               api.ImageControl,
     4436                cropped_image:       api.CroppedImageControl,
     4437                site_icon:           api.SiteIconControl,
     4438                header:              api.HeaderControl,
     4439                background:          api.BackgroundControl,
     4440                background_position: api.BackgroundPositionControl,
     4441                theme:               api.ThemeControl
    44184442        };
    44194443        api.panelConstructor = {
    44204444                themes: api.ThemesPanel
     
    45394563                        if ( 'themes' === panel.id ) {
    45404564                                return; // Don't reflow theme sections, as doing so moves them after the themes container.
    45414565                        }
    4542                        
     4566
    45434567                        var sections = panel.sections(),
    45444568                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
    45454569                        rootNodes.push( panel );
     
    54305454                // Control visibility for default controls
    54315455                $.each({
    54325456                        'background_image': {
    5433                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
     5457                                controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ],
    54345458                                callback: function( to ) { return !! to; }
    54355459                        },
    54365460                        'show_on_front': {
     
    54565480                        });
    54575481                });
    54585482
     5483                api.control( 'background_preset', function( control ) {
     5484                        var visibility = { // position, size, repeat, attachment
     5485                                'default': [ false, false, false, false ],
     5486                                'fill': [ true, false, false, false ],
     5487                                'fit': [ true, false, true, false ],
     5488                                'repeat': [ true, false, false, true ],
     5489                                'custom': [ true, true, true, true ],
     5490                        };
     5491
     5492                        var defaultValues = [
     5493                                _wpCustomizeBackground.defaults['default-position-x'],
     5494                                _wpCustomizeBackground.defaults['default-position-y'],
     5495                                _wpCustomizeBackground.defaults['default-size'],
     5496                                _wpCustomizeBackground.defaults['default-repeat'],
     5497                                _wpCustomizeBackground.defaults['default-attachment'],
     5498                        ];
     5499
     5500                        var values = { // position_x, position_y, size, repeat, attachment
     5501                                'default': defaultValues,
     5502                                'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ],
     5503                                'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ],
     5504                                'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ],
     5505                        };
     5506
     5507                        var toggleVisibility = function( preset ) {
     5508                                api.control( 'background_position' ).container.toggle( visibility[ preset ][0] );
     5509                                api.control( 'background_size' ).container.toggle( visibility[ preset ][1] );
     5510                                api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] );
     5511                                api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] );
     5512                        };
     5513
     5514                        var updateSettings = function( preset ) {
     5515                                api( 'background_position_x' ).set( values[ preset ][0] );
     5516                                api( 'background_position_y' ).set( values[ preset ][1] );
     5517
     5518                                api.control( 'background_position' ).container.find( 'input[name="background-position"]' ).val( [ values[ preset ][0] + ' ' + values[ preset ][1] ] );
     5519
     5520                                api( 'background_size' ).set( values[ preset ][2] );
     5521                                api( 'background_repeat' ).set( values[ preset ][3] );
     5522                                api( 'background_attachment' ).set( values[ preset ][4] );
     5523                        };
     5524
     5525                        var preset = control.setting.get();
     5526
     5527                        toggleVisibility( preset );
     5528
     5529                        control.setting.bind( 'change', function( preset ) {
     5530                                toggleVisibility( preset );
     5531
     5532                                if ( 'custom' === preset ) {
     5533                                        return;
     5534                                }
     5535
     5536                                updateSettings( preset );
     5537                        } );
     5538                } );
     5539
     5540                api.control( 'background_repeat', function( control ) {
     5541                        control.elements[0].unsync( api( 'background_repeat' ) );
     5542
     5543                        control.element = new api.Element( control.container.find( 'input' ) );
     5544                        control.element.set( 'no-repeat' !== control.setting() );
     5545
     5546                        control.element.bind( function( to ) {
     5547                                control.setting.set( to ? 'repeat' : 'no-repeat' );
     5548                        } );
     5549
     5550                        control.setting.bind( function( to ) {
     5551                                control.element.set( 'no-repeat' !== to );
     5552                        } );
     5553                } );
     5554
     5555                api.control( 'background_attachment', function( control ) {
     5556                        control.elements[0].unsync( api( 'background_attachment' ) );
     5557
     5558                        control.element = new api.Element( control.container.find( 'input' ) );
     5559                        control.element.set( 'fixed' !== control.setting() );
     5560
     5561                        control.element.bind( function( to ) {
     5562                                control.setting.set( to ? 'scroll' : 'fixed' );
     5563                        } );
     5564
     5565                        control.setting.bind( function( to ) {
     5566                                control.element.set( 'fixed' !== to );
     5567                        } );
     5568                } );
     5569
    54595570                // Juggle the two controls that use header_textcolor
    54605571                api.control( 'display_header_text', function( control ) {
    54615572                        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_Background_Position_Control class */
     627require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-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-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' );
    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_Background_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_Background_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-background-image-control.php

     
    4141                parent::enqueue();
    4242
    4343                wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array(
     44                        'defaults' => get_theme_support( 'custom-background' )[0],
    4445                        'nonces' => array(
    4546                                'add' => wp_create_nonce( 'background-add' ),
    4647                        ),
  • wp-includes/customize/class-wp-customize-background-position-control.php

     
     1<?php
     2/**
     3 * Customize API: WP_Customize_Background_Position_Control class
     4 *
     5 * @package WordPress
     6 * @subpackage Customize
     7 * @since 4.7.0
     8 */
     9
     10/**
     11 * Customize Background Position Control class.
     12 *
     13 * @since 4.7.0
     14 *
     15 * @see WP_Customize_Control
     16 */
     17class WP_Customize_Background_Position_Control extends WP_Customize_Control {
     18        /**
     19         * @access public
     20         * @var string
     21         */
     22        public $type = 'background_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                $options = array(
     51                        array(
     52                                'left top'   => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     53                                'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
     54                                'right top'  => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     55                        ),
     56                        array(
     57                                'left center'   => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     58                                'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
     59                                'right center'  => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     60                        ),
     61                        array(
     62                                'left bottom'   => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     63                                'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
     64                                'right bottom'  => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     65                        ),
     66                );
     67                ?>
     68                <# var value = data.defaultValue;
     69
     70                if ( data.value ) {
     71                        value = data.value;
     72                } #>
     73                <# if ( data.label ) { #>
     74                        <span class="customize-control-title">{{{ data.label }}}</span>
     75                <# } #>
     76                <# if ( data.description ) { #>
     77                        <span class="description customize-control-description">{{{ data.description }}}</span>
     78                <# } #>
     79                <div class="customize-control-content">
     80                <div class="background-position-control">
     81                <?php foreach ( $options as $group ) : ?>
     82                        <div class="button-group">
     83                        <?php foreach ( $group as $value => $input ) : ?>
     84                                <label>
     85                                        <input name="background-position" type="radio" value="<?php echo $value; ?>"<# if ( '<?php echo $value; ?>' === value ) { #>checked<# } #>>
     86                                        <span class="button display-options position"><span class="<?php echo $input['icon']; ?>"></span></span>
     87                                        <span class="screen-reader-text"><?php echo $input['label']; ?></span>
     88                                </label>
     89                        <?php endforeach; ?>
     90                        </div>
     91                <?php endforeach; ?>
     92                </div>
     93                </div>
     94                <?php
     95        }
     96}
  • 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 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' ) ) ) {
     1384                        $position = 'left';
     1385                }
     1386
     1387                if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ) ) ) {
     1388                        $position = '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' ) ) ) {
     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' ) ) ) {
    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;";
     1411                // Background Scroll
     1412                $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    13881413
    1389                 $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    1390                 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
     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?>
    13971423<style type="text/css" id="custom-background-css">
     
    17721798
    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'          => '',
    17791808                                'wp-head-callback'       => '_custom_background_cb',