Ticket #22058: 22058.9.diff
File 22058.9.diff, 39.3 KB (added by , 8 years ago) |
---|
-
wp-admin/css/customize-controls.css
1090 1090 float: right; 1091 1091 } 1092 1092 1093 /* Background position control */ 1094 .customize-control-background_position .background-position-control .button-group { 1095 display: block; 1096 } 1097 1093 1098 /** 1094 1099 * Custom CSS Section 1095 1100 * -
wp-admin/css/themes.css
1176 1176 max-height: 300px; 1177 1177 } 1178 1178 1179 .background-position-control input[type="radio"]:checked ~ .button { 1180 background: #eee; 1181 border-color: #999; 1182 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); 1183 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); 1184 z-index: 1; 1185 } 1186 1187 .background-position-control input[type="radio"]:focus ~ .button { 1188 border-color: #5b9dd9; 1189 -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 ); 1190 box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 ); 1191 color: #23282d; 1192 } 1193 1194 .background-position-control .background-position-center-icon, 1195 .background-position-control .background-position-center-icon:before { 1196 display: inline-block; 1197 line-height: 1; 1198 text-align: center; 1199 -webkit-transition: background-color .1s ease-in 0; 1200 transition: background-color .1s ease-in 0; 1201 } 1202 1203 .background-position-control .background-position-center-icon { 1204 height: 20px; 1205 margin-top: 13px; 1206 vertical-align: top; 1207 width: 20px; 1208 } 1209 1210 .background-position-control .background-position-center-icon:before { 1211 background-color: #555; 1212 -webkit-border-radius: 50%; 1213 border-radius: 50%; 1214 content: ""; 1215 height: 12px; 1216 width: 12px; 1217 } 1218 1219 .background-position-control .button:hover .background-position-center-icon:before, 1220 .background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before { 1221 background-color: #23282d; 1222 } 1223 1224 .background-position-control .button-group { 1225 display: block; 1226 } 1227 1228 .background-position-control .button-group .button { 1229 -webkit-border-radius: 0; 1230 border-radius: 0; 1231 -webkit-box-shadow: none; 1232 box-shadow: none; 1233 /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */ 1234 height: 40px !important; 1235 line-height: 37px !important; 1236 margin: 0 -1px 0 0 !important; 1237 padding: 0 10px 1px !important; 1238 position: relative; 1239 } 1240 1241 .background-position-control .button-group .button:active, 1242 .background-position-control .button-group .button:hover, 1243 .background-position-control .button-group .button:focus { 1244 z-index: 1; 1245 } 1246 1247 .background-position-control .button-group:last-child .button { 1248 -webkit-box-shadow: 0 1px 0 #ccc; 1249 box-shadow: 0 1px 0 #ccc; 1250 } 1251 1252 .background-position-control .button-group > label { 1253 margin: 0 !important; 1254 } 1255 1256 .background-position-control .button-group:first-child > label:first-child .button { 1257 -webkit-border-radius: 3px 0 0; 1258 border-radius: 3px 0 0; 1259 } 1260 1261 .background-position-control .button-group:first-child > label:first-child .dashicons { 1262 -webkit-transform: rotate( 45deg ); 1263 -ms-transform: rotate( 45deg ); 1264 transform: rotate( 45deg ); 1265 } 1266 1267 .background-position-control .button-group:first-child > label:last-child .button { 1268 -webkit-border-radius: 0 3px 0 0; 1269 border-radius: 0 3px 0 0; 1270 } 1271 1272 .background-position-control .button-group:first-child > label:last-child .dashicons { 1273 -webkit-transform: rotate( -45deg ); 1274 -ms-transform: rotate( -45deg ); 1275 transform: rotate( -45deg ); 1276 } 1277 1278 .background-position-control .button-group:last-child > label:first-child .button { 1279 -webkit-border-radius: 0 0 0 3px; 1280 border-radius: 0 0 0 3px; 1281 } 1282 1283 .background-position-control .button-group:last-child > label:first-child .dashicons { 1284 -webkit-transform: rotate( -45deg ); 1285 -ms-transform: rotate( -45deg ); 1286 transform: rotate( -45deg ); 1287 } 1288 1289 .background-position-control .button-group:last-child > label:last-child .button { 1290 -webkit-border-radius: 0 0 3px 0; 1291 border-radius: 0 0 3px 0; 1292 } 1293 1294 .background-position-control .button-group:last-child > label:last-child .dashicons { 1295 -webkit-transform: rotate( 45deg ); 1296 -ms-transform: rotate( 45deg ); 1297 transform: rotate( 45deg ); 1298 } 1299 1300 .background-position-control .button-group .dashicons { 1301 margin-top: 9px; 1302 } 1303 1304 .background-position-control .button-group + .button-group { 1305 margin-top: -1px; 1306 } 1307 1179 1308 /*------------------------------------------------------------------------------ 1180 1309 23.0 - Full Overlay w/ Sidebar 1181 1310 ------------------------------------------------------------------------------*/ -
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 class="screen-reader-text" 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']; ?>" aria-hidden="true"></span></span> 381 <span class="screen-reader-text"><?php echo $input['label']; ?></span> 382 </label> 383 <?php endforeach; ?> 384 </div> 385 <?php endforeach; ?> 386 </div> 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
3136 3136 }); 3137 3137 3138 3138 /** 3139 * A control for positioning a background image. 3140 * 3141 * @class 3142 * @augments wp.customize.Control 3143 * @augments wp.customize.Class 3144 */ 3145 api.BackgroundPositionControl = api.Control.extend( { 3146 ready: function() { 3147 var control = this, 3148 value, 3149 position; 3150 3151 control.container.on( 'change', 'input[name="background-position"]', function() { 3152 value = $( this ).val(); 3153 position = value.split( ' ' ); 3154 3155 control.settings[0]( position[0] ); 3156 control.settings[1]( position[1] ); 3157 } ); 3158 } 3159 } ); 3160 3161 /** 3139 3162 * A control for selecting and cropping an image. 3140 3163 * 3141 3164 * @class … … 4485 4508 4486 4509 api.settingConstructor = {}; 4487 4510 api.controlConstructor = { 4488 color: api.ColorControl, 4489 media: api.MediaControl, 4490 upload: api.UploadControl, 4491 image: api.ImageControl, 4492 cropped_image: api.CroppedImageControl, 4493 site_icon: api.SiteIconControl, 4494 header: api.HeaderControl, 4495 background: api.BackgroundControl, 4496 theme: api.ThemeControl 4511 color: api.ColorControl, 4512 media: api.MediaControl, 4513 upload: api.UploadControl, 4514 image: api.ImageControl, 4515 cropped_image: api.CroppedImageControl, 4516 site_icon: api.SiteIconControl, 4517 header: api.HeaderControl, 4518 background: api.BackgroundControl, 4519 background_position: api.BackgroundPositionControl, 4520 theme: api.ThemeControl 4497 4521 }; 4498 4522 api.panelConstructor = { 4499 4523 themes: api.ThemesPanel … … 4618 4642 if ( 'themes' === panel.id ) { 4619 4643 return; // Don't reflow theme sections, as doing so moves them after the themes container. 4620 4644 } 4621 4645 4622 4646 var sections = panel.sections(), 4623 4647 sectionHeadContainers = _.pluck( sections, 'headContainer' ); 4624 4648 rootNodes.push( panel ); … … 5509 5533 // Control visibility for default controls 5510 5534 $.each({ 5511 5535 'background_image': { 5512 controls: [ 'background_ repeat', 'background_position_x', 'background_attachment' ],5536 controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ], 5513 5537 callback: function( to ) { return !! to; } 5514 5538 }, 5515 5539 'show_on_front': { … … 5535 5559 }); 5536 5560 }); 5537 5561 5562 api.control( 'background_preset', function( control ) { 5563 var visibility = { // position, size, repeat, attachment 5564 'default': [ false, false, false, false ], 5565 'fill': [ true, false, false, false ], 5566 'fit': [ true, false, true, false ], 5567 'repeat': [ true, false, false, true ], 5568 'custom': [ true, true, true, true ], 5569 }; 5570 5571 var defaultValues = [ 5572 _wpCustomizeBackground.defaults['default-position-x'], 5573 _wpCustomizeBackground.defaults['default-position-y'], 5574 _wpCustomizeBackground.defaults['default-size'], 5575 _wpCustomizeBackground.defaults['default-repeat'], 5576 _wpCustomizeBackground.defaults['default-attachment'], 5577 ]; 5578 5579 var values = { // position_x, position_y, size, repeat, attachment 5580 'default': defaultValues, 5581 'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ], 5582 'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ], 5583 'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ], 5584 }; 5585 5586 var toggleVisibility = function( preset ) { 5587 api.control( 'background_position' ).container.toggle( visibility[ preset ][0] ); 5588 api.control( 'background_size' ).container.toggle( visibility[ preset ][1] ); 5589 api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] ); 5590 api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] ); 5591 }; 5592 5593 var updateSettings = function( preset ) { 5594 api( 'background_position_x' ).set( values[ preset ][0] ); 5595 api( 'background_position_y' ).set( values[ preset ][1] ); 5596 5597 api.control( 'background_position' ).container.find( 'input[name="background-position"]' ).val( [ values[ preset ][0] + ' ' + values[ preset ][1] ] ); 5598 5599 api( 'background_size' ).set( values[ preset ][2] ); 5600 api( 'background_repeat' ).set( values[ preset ][3] ); 5601 api( 'background_attachment' ).set( values[ preset ][4] ); 5602 }; 5603 5604 var preset = control.setting.get(); 5605 5606 toggleVisibility( preset ); 5607 5608 control.setting.bind( 'change', function( preset ) { 5609 toggleVisibility( preset ); 5610 5611 if ( 'custom' === preset ) { 5612 return; 5613 } 5614 5615 updateSettings( preset ); 5616 } ); 5617 } ); 5618 5619 api.control( 'background_repeat', function( control ) { 5620 control.elements[0].unsync( api( 'background_repeat' ) ); 5621 5622 control.element = new api.Element( control.container.find( 'input' ) ); 5623 control.element.set( 'no-repeat' !== control.setting() ); 5624 5625 control.element.bind( function( to ) { 5626 control.setting.set( to ? 'repeat' : 'no-repeat' ); 5627 } ); 5628 5629 control.setting.bind( function( to ) { 5630 control.element.set( 'no-repeat' !== to ); 5631 } ); 5632 } ); 5633 5634 api.control( 'background_attachment', function( control ) { 5635 control.elements[0].unsync( api( 'background_attachment' ) ); 5636 5637 control.element = new api.Element( control.container.find( 'input' ) ); 5638 control.element.set( 'fixed' !== control.setting() ); 5639 5640 control.element.bind( function( to ) { 5641 control.setting.set( to ? 'scroll' : 'fixed' ); 5642 } ); 5643 5644 control.setting.bind( function( to ) { 5645 control.element.set( 'fixed' !== to ); 5646 } ); 5647 } ); 5648 5538 5649 // Juggle the two controls that use header_textcolor 5539 5650 api.control( 'display_header_text', function( control ) { 5540 5651 var last = ''; -
wp-includes/class-wp-customize-control.php
660 660 /** WP_Customize_Background_Image_Control class */ 661 661 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); 662 662 663 /** WP_Customize_Background_Position_Control class */ 664 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' ); 665 663 666 /** WP_Customize_Cropped_Image_Control class */ 664 667 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 665 668 -
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' ); … … 3262 3264 3263 3265 $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 3264 3266 3265 $this->add_setting( 'background_ repeat', array(3266 'default' => get_theme_support( 'custom-background', 'default- repeat' ),3267 $this->add_setting( 'background_preset', array( 3268 'default' => get_theme_support( 'custom-background', 'default-preset' ), 3267 3269 'theme_supports' => 'custom-background', 3268 3270 ) ); 3269 3271 3270 $this->add_control( 'background_ repeat', array(3271 'label' => _ _( 'Background Repeat' ),3272 $this->add_control( 'background_preset', array( 3273 'label' => _x( 'Preset', 'Background Preset' ), 3272 3274 'section' => 'background_image', 3273 'type' => ' radio',3275 'type' => 'select', 3274 3276 'choices' => array( 3275 'no-repeat' => __('No Repeat'), 3276 'repeat' => __('Tile'), 3277 'repeat-x' => __('Tile Horizontally'), 3278 'repeat-y' => __('Tile Vertically'), 3277 'default' => _x( 'Default', 'Default Preset' ), 3278 'fill' => __( 'Fill Screen' ), 3279 'fit' => __( 'Fit to Screen' ), 3280 'repeat' => _x( 'Repeat', 'Repeat Image' ), 3281 'custom' => _x( 'Custom', 'Custom Preset' ), 3279 3282 ), 3280 3283 ) ); 3281 3284 … … 3284 3287 'theme_supports' => 'custom-background', 3285 3288 ) ); 3286 3289 3287 $this->add_control( 'background_position_x', array( 3288 'label' => __( 'Background Position' ), 3290 $this->add_setting( 'background_position_y', array( 3291 'default' => get_theme_support( 'custom-background', 'default-position-y' ), 3292 'theme_supports' => 'custom-background', 3293 ) ); 3294 3295 $this->add_control( new WP_Customize_Background_Position_Control( $this, 'background_position', array( 3296 'label' => __( 'Image Position' ), 3297 'section' => 'background_image', 3298 'settings' => array( 'background_position_x', 'background_position_y' ), 3299 ) ) ); 3300 3301 $this->add_setting( 'background_size', array( 3302 'default' => get_theme_support( 'custom-background', 'default-size' ), 3303 'theme_supports' => 'custom-background', 3304 ) ); 3305 3306 $this->add_control( 'background_size', array( 3307 'label' => __( 'Image Size' ), 3289 3308 'section' => 'background_image', 3290 'type' => ' radio',3309 'type' => 'select', 3291 3310 'choices' => array( 3292 ' left' => __('Left'),3293 'c enter' => __('Center'),3294 ' right' => __('Right'),3311 'auto' => __( 'Original' ), 3312 'contain' => __( 'Fit to Screen' ), 3313 'cover' => __( 'Fill Screen' ), 3295 3314 ), 3296 3315 ) ); 3297 3316 3317 $this->add_setting( 'background_repeat', array( 3318 'default' => get_theme_support( 'custom-background', 'default-repeat' ), 3319 'sanitize_callback' => array( $this, '_sanitize_background_repeat' ), 3320 'theme_supports' => 'custom-background', 3321 ) ); 3322 3323 $this->add_control( 'background_repeat', array( 3324 'label' => __( 'Repeat Background Image' ), 3325 'section' => 'background_image', 3326 'type' => 'checkbox', 3327 ) ); 3328 3298 3329 $this->add_setting( 'background_attachment', array( 3299 'default' => get_theme_support( 'custom-background', 'default-attachment' ), 3300 'theme_supports' => 'custom-background', 3330 'default' => get_theme_support( 'custom-background', 'default-attachment' ), 3331 'sanitize_callback' => array( $this, '_sanitize_background_attachment' ), 3332 'theme_supports' => 'custom-background', 3301 3333 ) ); 3302 3334 3303 3335 $this->add_control( 'background_attachment', array( 3304 'label' => __( 'Background Attachment' ), 3305 'section' => 'background_image', 3306 'type' => 'radio', 3307 'choices' => array( 3308 'scroll' => __('Scroll'), 3309 'fixed' => __('Fixed'), 3310 ), 3336 'label' => __( 'Scroll with Page' ), 3337 'section' => 'background_image', 3338 'type' => 'checkbox', 3311 3339 ) ); 3312 3340 3341 3313 3342 // If the theme is using the default background callback, we can update 3314 3343 // the background CSS using postMessage. 3315 3344 if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 3316 foreach ( array( 'color', 'image', 'p osition_x', 'repeat', 'attachment' ) as $prop ) {3345 foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) { 3317 3346 $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 3318 3347 } 3319 3348 } … … 3599 3628 } 3600 3629 3601 3630 /** 3631 * Callback for validating the background_repeat value. 3632 * 3633 * @since 4.7.0 3634 * 3635 * @param string $repeat 3636 * @return string Background repeat. 3637 */ 3638 public function _sanitize_background_repeat( $repeat ) { 3639 if ( 'no-repeat' !== $repeat ) { 3640 $repeat = 'repeat'; 3641 } 3642 3643 return $repeat; 3644 } 3645 3646 /** 3647 * Callback for validating the background_attachment value. 3648 * 3649 * @since 4.7.0 3650 * 3651 * @param string $attachment 3652 * @return string Background attachment. 3653 */ 3654 public function _sanitize_background_attachment( $attachment ) { 3655 if ( 'fixed' !== $attachment ) { 3656 $attachment = 'scroll'; 3657 } 3658 3659 return $attachment; 3660 } 3661 3662 /** 3602 3663 * Callback for rendering the custom logo, used in the custom_logo partial. 3603 3664 * 3604 3665 * 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 <fieldset> 81 <legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend> 82 <div class="background-position-control"> 83 <?php foreach ( $options as $group ) : ?> 84 <div class="button-group"> 85 <?php foreach ( $group as $value => $input ) : ?> 86 <label> 87 <input class="screen-reader-text" name="background-position" type="radio" value="<?php echo $value; ?>"<# if ( '<?php echo $value; ?>' === value ) { #>checked<# } #>> 88 <span class="button display-options position"><span class="<?php echo $input['icon']; ?>" aria-hidden="true"></span></span> 89 <span class="screen-reader-text"><?php echo $input['label']; ?></span> 90 </label> 91 <?php endforeach; ?> 92 </div> 93 <?php endforeach; ?> 94 </div> 95 </fieldset> 96 </div> 97 <?php 98 } 99 } -
wp-includes/js/customize-preview.js
735 735 }); 736 736 737 737 /* Custom Backgrounds */ 738 bg = $.map( ['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {738 bg = $.map( ['color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment'], function( prop ) { 739 739 return 'background_' + prop; 740 } );740 } ); 741 741 742 api.when.apply( api, bg ).done( function( color, image, p osition_x, repeat, attachment ) {742 api.when.apply( api, bg ).done( function( color, image, preset, position_x, position_y, size, repeat, attachment ) { 743 743 var body = $(document.body), 744 744 head = $('head'), 745 745 style = $('#custom-background-css'), … … 759 759 760 760 if ( image() ) { 761 761 css += 'background-image: url("' + image() + '");'; 762 css += 'background-position: top ' + position_x() + ';'; 762 css += 'background-size: ' + size() + ';'; 763 css += 'background-position: ' + position_x() + ' ' + position_y() + ';'; 763 764 css += 'background-repeat: ' + repeat() + ';'; 764 765 css += 'background-attachment: ' + attachment() + ';'; 765 766 } -
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',