Ticket #22058: 22058.6.diff
File 22058.6.diff, 38.1 KB (added by , 8 years ago) |
---|
-
wp-admin/css/customize-controls.css
1018 1018 float: right; 1019 1019 } 1020 1020 1021 /* Background position control */ 1022 .customize-control-background_position .background-position-control .button-group { 1023 display: block; 1024 } 1025 1021 1026 /** 1022 1027 * Custom CSS Section 1023 1028 * -
wp-admin/css/themes.css
1176 1176 max-height: 300px; 1177 1177 } 1178 1178 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 1179 1283 /*------------------------------------------------------------------------------ 1180 1284 23.0 - Full Overlay w/ Sidebar 1181 1285 ------------------------------------------------------------------------------*/ -
wp-admin/custom-background.php
133 133 return; 134 134 } 135 135 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 ); 143 146 } 144 147 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 ); 152 167 } 153 168 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 ); 161 179 } 162 180 181 if ( isset( $_POST['background-repeat'] ) ) { 182 check_admin_referer( 'custom-background' ); 183 184 $repeat = $_POST['background-repeat']; 185 186 if ( 'no-repeat' !== $repeat ) { 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 163 205 if ( isset($_POST['background-color']) ) { 164 206 check_admin_referer('custom-background'); 165 207 $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']); … … 219 261 $background_image_thumb = get_background_image(); 220 262 if ( $background_image_thumb ) { 221 263 $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' ) ); 222 269 223 270 // 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;"; 227 276 } 228 277 ?> 229 278 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?> … … 287 336 </tbody> 288 337 </table> 289 338 290 <h3><?php _e( 'Display Options')?></h3>339 <h3><?php _e( 'Display Options' ); ?></h3> 291 340 <form method="post"> 292 341 <table class="form-table"> 293 342 <tbody> 294 343 <?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 ?> 295 371 <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> 310 387 </fieldset></td> 311 388 </tr> 312 389 313 390 <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> 320 398 </fieldset></td> 321 399 </tr> 322 400 323 401 <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> 334 406 </fieldset></td> 335 407 </tr> 408 409 <tr> 410 <th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th> 411 <td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend> 412 <input name="background-attachment" type="hidden" value="fixed"> 413 <label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label> 414 </fieldset></td> 415 </tr> 336 416 <?php endif; // get_background_image() ?> 337 417 <tr> 338 418 <th scope="row"><?php _e( 'Background Color' ); ?></th> … … 342 422 if ( current_theme_supports( 'custom-background', 'default-color' ) ) 343 423 $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"'; 344 424 ?> 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 ?>> 346 426 </fieldset></td> 347 427 </tr> 348 428 </tbody> -
wp-admin/js/custom-background.js
13 13 } 14 14 }); 15 15 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() ); 18 18 }); 19 19 20 $( 'input[name="background-repeat"]').change(function() {21 bgImage.css( 'background-repeat', $(this).val());20 $( 'input[name="background-position"]' ).change( function() { 21 bgImage.css( 'background-position', $( this ).val() ); 22 22 }); 23 23 24 $( 'input[name="background-repeat"]' ).change( function() { 25 bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' ); 26 }); 27 28 $( 'input[name="background-attachment"]' ).change( function() { 29 bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' ); 30 }); 31 24 32 $('#choose-from-library-link').click( function( event ) { 25 33 var $el = $(this); 26 34 -
wp-admin/js/customize-controls.js
3061 3061 }); 3062 3062 3063 3063 /** 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 /** 3064 3087 * A control for selecting and cropping an image. 3065 3088 * 3066 3089 * @class … … 4406 4429 4407 4430 api.settingConstructor = {}; 4408 4431 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 4418 4442 }; 4419 4443 api.panelConstructor = { 4420 4444 themes: api.ThemesPanel … … 4539 4563 if ( 'themes' === panel.id ) { 4540 4564 return; // Don't reflow theme sections, as doing so moves them after the themes container. 4541 4565 } 4542 4566 4543 4567 var sections = panel.sections(), 4544 4568 sectionHeadContainers = _.pluck( sections, 'headContainer' ); 4545 4569 rootNodes.push( panel ); … … 5430 5454 // Control visibility for default controls 5431 5455 $.each({ 5432 5456 'background_image': { 5433 controls: [ 'background_ repeat', 'background_position_x', 'background_attachment' ],5457 controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ], 5434 5458 callback: function( to ) { return !! to; } 5435 5459 }, 5436 5460 'show_on_front': { … … 5456 5480 }); 5457 5481 }); 5458 5482 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 5459 5570 // Juggle the two controls that use header_textcolor 5460 5571 api.control( 'display_header_text', function( control ) { 5461 5572 var last = ''; -
wp-includes/class-wp-customize-control.php
623 623 /** WP_Customize_Background_Image_Control class */ 624 624 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); 625 625 626 /** WP_Customize_Background_Position_Control class */ 627 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' ); 628 626 629 /** WP_Customize_Cropped_Image_Control class */ 627 630 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 628 631 -
wp-includes/class-wp-customize-manager.php
279 279 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-upload-control.php' ); 280 280 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' ); 281 281 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' ); 282 283 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 283 284 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' ); 284 285 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' ); … … 3004 3005 $this->register_control_type( 'WP_Customize_Upload_Control' ); 3005 3006 $this->register_control_type( 'WP_Customize_Image_Control' ); 3006 3007 $this->register_control_type( 'WP_Customize_Background_Image_Control' ); 3008 $this->register_control_type( 'WP_Customize_Background_Position_Control' ); 3007 3009 $this->register_control_type( 'WP_Customize_Cropped_Image_Control' ); 3008 3010 $this->register_control_type( 'WP_Customize_Site_Icon_Control' ); 3009 3011 $this->register_control_type( 'WP_Customize_Theme_Control' ); … … 3260 3262 3261 3263 $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 3262 3264 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' ), 3265 3267 'theme_supports' => 'custom-background', 3266 3268 ) ); 3267 3269 3268 $this->add_control( 'background_ repeat', array(3269 'label' => _ _( 'Background Repeat' ),3270 $this->add_control( 'background_preset', array( 3271 'label' => _x( 'Preset', 'Background Preset' ), 3270 3272 'section' => 'background_image', 3271 'type' => ' radio',3273 'type' => 'select', 3272 3274 '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' ), 3277 3280 ), 3278 3281 ) ); 3279 3282 … … 3282 3285 'theme_supports' => 'custom-background', 3283 3286 ) ); 3284 3287 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' ), 3287 3306 'section' => 'background_image', 3288 'type' => ' radio',3307 'type' => 'select', 3289 3308 'choices' => array( 3290 ' left' => __('Left'),3291 'c enter' => __('Center'),3292 ' right' => __('Right'),3309 'auto' => __( 'Original' ), 3310 'contain' => __( 'Fit to Screen' ), 3311 'cover' => __( 'Fill Screen' ), 3293 3312 ), 3294 3313 ) ); 3295 3314 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 3296 3327 $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', 3299 3331 ) ); 3300 3332 3301 3333 $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', 3309 3337 ) ); 3310 3338 3339 3311 3340 // If the theme is using the default background callback, we can update 3312 3341 // the background CSS using postMessage. 3313 3342 if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 3314 foreach ( array( 'color', 'image', 'p osition_x', 'repeat', 'attachment' ) as $prop ) {3343 foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) { 3315 3344 $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 3316 3345 } 3317 3346 } … … 3595 3624 } 3596 3625 3597 3626 /** 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 /** 3598 3659 * Callback for rendering the custom logo, used in the custom_logo partial. 3599 3660 * 3600 3661 * This method exists because the partial object and context data are passed -
wp-includes/customize/class-wp-customize-background-image-control.php
41 41 parent::enqueue(); 42 42 43 43 wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array( 44 'defaults' => get_theme_support( 'custom-background' )[0], 44 45 'nonces' => array( 45 46 'add' => wp_create_nonce( 'background-add' ), 46 47 ), -
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 */ 17 class 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
736 736 }); 737 737 738 738 /* 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 ) { 740 740 return 'background_' + prop; 741 } );741 } ); 742 742 743 api.when.apply( api, bg ).done( function( color, image, p osition_x, repeat, attachment ) {743 api.when.apply( api, bg ).done( function( color, image, preset, position_x, position_y, size, repeat, attachment ) { 744 744 var body = $(document.body), 745 745 head = $('head'), 746 746 style = $('#custom-background-css'), … … 760 760 761 761 if ( image() ) { 762 762 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() + ';'; 764 765 css += 'background-repeat: ' + repeat() + ';'; 765 766 css += 'background-attachment: ' + attachment() + ';'; 766 767 } -
wp-includes/theme.php
1376 1376 if ( $background ) { 1377 1377 $image = " background-image: url('$background');"; 1378 1378 1379 // Background Position 1380 $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 1381 $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); 1382 1383 if ( ! in_array( $position_x, array( 'left', 'center', 'right' ) ) ) { 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 1379 1403 $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' ) ) ) { 1381 1406 $repeat = 'repeat'; 1407 } 1408 1382 1409 $repeat = " background-repeat: $repeat;"; 1383 1410 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' ) ); 1388 1413 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 ) { 1391 1415 $attachment = 'scroll'; 1416 } 1417 1392 1418 $attachment = " background-attachment: $attachment;"; 1393 1419 1394 $style .= $image . $ repeat . $position. $attachment;1420 $style .= $image . $position . $size . $repeat . $attachment; 1395 1421 } 1396 1422 ?> 1397 1423 <style type="text/css" id="custom-background-css"> … … 1772 1798 1773 1799 $defaults = array( 1774 1800 'default-image' => '', 1801 'default-preset' => 'default', 1802 'default-position-x' => 'left', 1803 'default-position-y' => 'top', 1804 'default-size' => 'auto', 1775 1805 'default-repeat' => 'repeat', 1776 'default-position-x' => 'left',1777 1806 'default-attachment' => 'scroll', 1778 1807 'default-color' => '', 1779 1808 'wp-head-callback' => '_custom_background_cb',