Ticket #22058: 22058.2.diff
File 22058.2.diff, 23.0 KB (added by , 8 years ago) |
---|
-
src/wp-admin/css/customize-controls.css
608 608 float: left; 609 609 } 610 610 611 /* Background Property Controls */ 612 .customize-control-background_property .choice { 613 position: relative; 614 margin: 0 4px 4px 0; 615 padding: 0; 616 width: 82px; 617 height: 62px; 618 border: 1px solid #ddd; 619 background: #fff; 620 color: #555; 621 border-radius: 0; 622 float: left; 623 overflow: hidden; 624 } 625 626 .customize-control-background_property .selected { 627 border-color: #23282d; 628 box-shadow: 0 0 0 3px #23282d; 629 } 630 631 .customize-control-background_property .choice:hover, 632 .customize-control-background_property .choice:focus { 633 box-shadow: 0 0 0 3px #0073aa; 634 border-color: #0073aa; 635 cursor: pointer; 636 outline: none; 637 } 638 639 .customize-control-background_property .choice:before { 640 content: ""; 641 font: 40px/50px dashicons; 642 width: 60px; 643 height: 50px; 644 position: absolute; 645 left: 10px; 646 top: 5px; 647 } 648 649 #customize-control-background_size .choice:before, 650 #customize-control-background_position .choice:before { 651 content: "\f128"; 652 background: #555; 653 color: #fff; 654 } 655 656 #customize-control-background_size .choice:hover:before, 657 #customize-control-background_size .choice:focus:before, 658 #customize-control-background_position .choice:hover:before, 659 #customize-control-background_position .choice:focus:before { 660 background: #0073aa; 661 } 662 663 #customize-control-background_size .choice:before { 664 font: 30px/40px dashicons; 665 width: 40px; 666 height: 40px; 667 position: absolute; 668 left: 20px; 669 top: 10px; 670 } 671 672 #customize-control-background_size .choice:nth-of-type(2):before { 673 height: 60px; /* Emulate background-size: contain. */ 674 top: 0; 675 width: 60px; 676 left: 10px; 677 font-size: 40px; 678 line-height: 60px; 679 } 680 681 #customize-control-background_size .choice:nth-of-type(3):before { 682 height: 60px; /* Emulate background-size: cover. */ 683 top: 0; 684 width: 80px; 685 left: 0; 686 font-size: 60px; 687 line-height: 80px; /* cut off the bottom of the icon */ 688 } 689 690 #customize-control-background_repeat .choice { 691 width: 60px; 692 } 693 694 #customize-control-background_repeat .choice:before { 695 content: "\f128"; 696 font-size: 19px; 697 left: -1px; 698 } 699 700 #customize-control-background_repeat .choice:nth-of-type(2):before { 701 content: "\f128\f128\f128"; /* Three image dashicons. */ 702 } 703 704 #customize-control-background_repeat .choice:nth-of-type(3):before { 705 content: "\f128\f128\f128"; /* Three image dashicons. */ 706 font-size: 20px; 707 width: 20px; 708 line-height: 20px; 709 left: 19px; 710 height: 60px; 711 top: 0; 712 word-wrap: break-word; 713 } 714 715 #customize-control-background_repeat .choice:nth-of-type(4):before { 716 content: "\f128\f128\f128\f128\f128\f128\f128\f128\f128"; /* Nine image dashicons. */ 717 line-height: 20px; 718 height: 60px; 719 top: 0; 720 word-wrap: break-word; 721 } 722 723 #customize-control-background_repeat .choice:hover:before, 724 #customize-control-background_repeat .choice:focus:before { 725 color: #0073aa; 726 } 727 728 #customize-control-background_position { 729 max-width: 300px; 730 } 731 732 #customize-control-background_position .choice:before { 733 font-size: 20px; 734 line-height: 30px; 735 width: 40px; 736 height: 30px; 737 top: 15px; 738 left: 20px; 739 } 740 741 #customize-control-background_position .choice:nth-of-type(1):before, 742 #customize-control-background_position .choice:nth-of-type(2):before, 743 #customize-control-background_position .choice:nth-of-type(3):before { 744 top: 0; 745 } 746 747 #customize-control-background_position .choice:nth-of-type(7):before, 748 #customize-control-background_position .choice:nth-of-type(8):before, 749 #customize-control-background_position .choice:nth-of-type(9):before { 750 top: 30px; 751 } 752 753 #customize-control-background_position .choice:nth-of-type(3n):before { 754 left: 40px; 755 } 756 757 #customize-control-background_position .choice:nth-of-type(3n - 2):before { 758 left: 0; 759 } 760 611 761 #customize-preview iframe { 612 762 width: 100%; 613 763 height: 100%; -
src/wp-admin/custom-background.php
151 151 set_theme_mod('background_position_x', $position); 152 152 } 153 153 154 if ( isset($_POST['background-position-y']) ) { 155 check_admin_referer('custom-background'); 156 if ( in_array($_POST['background-position-y'], array('center', 'top', 'bottom')) ) 157 $position = $_POST['background-position-y']; 158 else 159 $position = 'top'; 160 set_theme_mod('background_position_y', $position); 161 } 162 154 163 if ( isset($_POST['background-attachment']) ) { 155 164 check_admin_referer('custom-background'); 156 165 if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) ) … … 223 232 // Background-image URL must be single quote, see below. 224 233 $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');' 225 234 . ' 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' ) );235 . ' background-position: '. get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) .' ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 227 236 } 228 237 ?> 229 238 <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?> … … 293 302 <tbody> 294 303 <?php if ( get_background_image() ) : ?> 295 304 <tr> 296 <th scope="row"><?php _e( 'Position ' ); ?></th>305 <th scope="row"><?php _e( 'Position X' ); ?></th> 297 306 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> 298 307 <label> 299 308 <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' ) ) ); ?> /> … … 310 319 </fieldset></td> 311 320 </tr> 312 321 322 <tr> 323 <th scope="row"><?php _e( 'Position Y' ); ?></th> 324 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend> 325 <label> 326 <input name="background-position-y" type="radio" value="left"<?php checked( 'top', get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ) ); ?> /> 327 <?php _e('Top') ?> 328 </label> 329 <label> 330 <input name="background-position-y" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ) ); ?> /> 331 <?php _e('Center') ?> 332 </label> 333 <label> 334 <input name="background-position-y" type="radio" value="right"<?php checked( 'bottom', get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ) ); ?> /> 335 <?php _e('Bottom') ?> 336 </label> 337 </fieldset></td> 338 </tr> 339 313 340 <tr> 314 341 <th scope="row"><?php _e( 'Repeat' ); ?></th> 315 342 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend> -
src/wp-admin/js/customize-controls.js
2173 2173 }); 2174 2174 2175 2175 /** 2176 * A control for setting properties for custom backgrounds. 2177 * 2178 * @class 2179 * @augments wp.customize.Control 2180 * @augments wp.customize.Class 2181 */ 2182 api.BackgroundPropertyControl = api.Control.extend({ 2183 2184 /** 2185 * When the control's DOM structure is ready, 2186 * set up internal event bindings. 2187 */ 2188 ready: function() { 2189 var control = this, value, values; 2190 2191 // Update setting when a choice is selected. 2192 control.container.on( 'click', '.choice', function( e ) { 2193 value = $( e.target ).val(); 2194 if ( 'background_position' === control.id ) { 2195 // Handle multiple settings associated with one control. 2196 values = value.split( '-' ); 2197 control.settings[0]( values[0] ); // background_position_x 2198 control.settings[1]( values[1] ); // background_position_y 2199 } else { 2200 control.setting( value ); 2201 } 2202 control.container.find( '.choice.selected' ).removeClass( 'selected' ); 2203 $( e.target ).addClass( 'selected' ); 2204 }); 2205 2206 // Set initial selection. 2207 if ( 'background_position' === control.id ) { 2208 // Handle multiple settings associated with one control. 2209 value = control.settings[0]() + '-' + control.settings[1](); // background_position_x|y 2210 } else { 2211 value = control.setting(); 2212 } 2213 control.container.find( '.choice' ).each( function () { 2214 if ( value === $( this ).val() ) { 2215 $( this ).addClass( 'selected' ); 2216 } 2217 }); 2218 }, 2219 }); 2220 2221 /** 2176 2222 * A control for selecting and cropping an image. 2177 2223 * 2178 2224 * @class … … 3404 3450 3405 3451 api.settingConstructor = {}; 3406 3452 api.controlConstructor = { 3407 color: api.ColorControl, 3408 media: api.MediaControl, 3409 upload: api.UploadControl, 3410 image: api.ImageControl, 3411 cropped_image: api.CroppedImageControl, 3412 site_icon: api.SiteIconControl, 3413 header: api.HeaderControl, 3414 background: api.BackgroundControl, 3415 theme: api.ThemeControl 3453 color: api.ColorControl, 3454 media: api.MediaControl, 3455 upload: api.UploadControl, 3456 image: api.ImageControl, 3457 cropped_image: api.CroppedImageControl, 3458 site_icon: api.SiteIconControl, 3459 header: api.HeaderControl, 3460 background: api.BackgroundControl, 3461 background_property: api.BackgroundPropertyControl, 3462 theme: api.ThemeControl 3416 3463 }; 3417 3464 api.panelConstructor = {}; 3418 3465 api.sectionConstructor = { … … 4110 4157 4111 4158 // Control visibility for default controls 4112 4159 $.each({ 4160 'background_size': { 4161 controls: [ 'background_repeat' ], 4162 callback: function( to ) { return ( 'cover' !== to && !! api( 'background_image' ) ); } // Hide background repeat when size is cover. 4163 }, 4113 4164 'background_image': { 4114 controls: [ 'background_ repeat', 'background_position_x', 'background_attachment' ],4165 controls: [ 'background_size', 'background_repeat', 'background_position', 'background_attachment' ], 4115 4166 callback: function( to ) { return !! to; } 4116 4167 }, 4117 4168 'show_on_front': { -
src/wp-includes/class-wp-customize-manager.php
215 215 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-upload-control.php' ); 216 216 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' ); 217 217 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); 218 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-property-control.php' ); 218 219 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); 219 220 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' ); 220 221 require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' ); … … 1977 1978 $this->register_control_type( 'WP_Customize_Upload_Control' ); 1978 1979 $this->register_control_type( 'WP_Customize_Image_Control' ); 1979 1980 $this->register_control_type( 'WP_Customize_Background_Image_Control' ); 1981 $this->register_control_type( 'WP_Customize_Background_Property_Control' ); 1980 1982 $this->register_control_type( 'WP_Customize_Cropped_Image_Control' ); 1981 1983 $this->register_control_type( 'WP_Customize_Site_Icon_Control' ); 1982 1984 $this->register_control_type( 'WP_Customize_Theme_Control' ); … … 2206 2208 2207 2209 $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); 2208 2210 2211 $this->add_setting( 'background_size', array( 2212 'default' => get_theme_support( 'custom-background', 'default-size' ), 2213 'theme_supports' => 'custom-background', 2214 ) ); 2215 2216 $this->add_control( new WP_Customize_Background_Property_Control( $this, 'background_size', array( 2217 'label' => __( 'Background Size' ), 2218 'description' => __( 'Preview your site at different screen sizes to see how these work.' ), 2219 'section' => 'background_image', 2220 'choices' => array( 2221 'auto' => __( 'Auto' ), 2222 'contain' => __( 'Contain' ), 2223 'cover' => __( 'Cover' ), 2224 ), 2225 ) ) ); 2226 2227 $this->add_setting( 'background_attachment', array( 2228 'default' => get_theme_support( 'custom-background', 'default-attachment' ), 2229 'theme_supports' => 'custom-background', 2230 'sanitize_callback' => array( $this, '_sanitize_background_attachment' ), 2231 ) ); 2232 2233 $this->add_control( 'background_attachment', array( 2234 'label' => __( 'Scroll image with page' ), 2235 'section' => 'background_image', 2236 'type' => 'checkbox', 2237 ) ); 2238 2209 2239 $this->add_setting( 'background_repeat', array( 2210 2240 'default' => get_theme_support( 'custom-background', 'default-repeat' ), 2211 2241 'theme_supports' => 'custom-background', 2212 2242 ) ); 2213 2243 2214 $this->add_control( 'background_repeat', array(2215 'label' => __( ' Background Repeat' ),2244 $this->add_control( new WP_Customize_Background_Property_Control( $this, 'background_repeat', array( 2245 'label' => __( 'Tile Background' ), 2216 2246 'section' => 'background_image', 2217 'type' => 'radio',2218 2247 'choices' => array( 2219 2248 'no-repeat' => __('No Repeat'), 2220 'repeat' => __('Tile'),2221 2249 'repeat-x' => __('Tile Horizontally'), 2222 2250 'repeat-y' => __('Tile Vertically'), 2251 'repeat' => __('Tile'), 2223 2252 ), 2224 ) ) ;2253 ) ) ); 2225 2254 2226 2255 $this->add_setting( 'background_position_x', array( 2227 2256 'default' => get_theme_support( 'custom-background', 'default-position-x' ), 2228 'theme_supports' => 'custom-background', 2257 'theme_supports' => 'custom-background', // @todo sanitize callback 2229 2258 ) ); 2230 2259 2231 $this->add_control( 'background_position_x', array( 2232 'label' => __( 'Background Position' ), 2233 'section' => 'background_image', 2234 'type' => 'radio', 2235 'choices' => array( 2236 'left' => __('Left'), 2237 'center' => __('Center'), 2238 'right' => __('Right'), 2239 ), 2240 ) ); 2241 2242 $this->add_setting( 'background_attachment', array( 2243 'default' => get_theme_support( 'custom-background', 'default-attachment' ), 2260 $this->add_setting( 'background_position_y', array( 2261 'default' => get_theme_support( 'custom-background', 'default-position-y' ), 2244 2262 'theme_supports' => 'custom-background', 2245 2263 ) ); 2246 2264 2247 $this->add_control( 'background_attachment', array( 2248 'label' => __( 'Background Attachment' ), 2249 'section' => 'background_image', 2250 'type' => 'radio', 2251 'choices' => array( 2252 'scroll' => __('Scroll'), 2253 'fixed' => __('Fixed'), 2265 $this->add_control( new WP_Customize_Background_Property_Control( $this, 'background_position', array( 2266 'label' => __( 'Background Position' ), 2267 'section' => 'background_image', 2268 'settings' => array( 'background_position_x', 'background_position_y' ), 2269 'choices' => array( 2270 'left-top' => __( 'Left, Top' ), 2271 'center-top' => __( 'Center, Top' ), 2272 'right-top' => __( 'Right, Top' ), 2273 'left-center' => __( 'Left, Center' ), 2274 'center-center' => __( 'Center, Center' ), 2275 'right-center' => __( 'Right, Center' ), 2276 'left-bottom' => __( 'Left, Bottom' ), 2277 'center-bottom' => __( 'Center, Bottom' ), 2278 'right-bottom' => __( 'Right, Bottom' ), 2254 2279 ), 2255 ) ) ;2280 ) ) ); 2256 2281 2282 2257 2283 // If the theme is using the default background callback, we can update 2258 2284 // the background CSS using postMessage. 2259 2285 if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { 2260 foreach ( array( 'color', 'image', ' position_x', 'repeat', 'attachment' ) as $prop ) {2286 foreach ( array( 'color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment' ) as $prop ) { 2261 2287 $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; 2262 2288 } 2263 2289 } … … 2352 2378 } 2353 2379 2354 2380 /** 2381 * Callback for sanitizing the background_attachment value. 2382 * 2383 * Converts the current checkbox UI to `fixed` or `scroll`. 2384 * 2385 * @since 4.7.0 2386 * 2387 * @param string $value 2388 * @return mixed 2389 */ 2390 public function _sanitize_background_attachment( $value ) { 2391 if ( ! $value || 'fixed' === $value ) { 2392 return 'fixed'; 2393 } else { 2394 return 'scroll'; 2395 } 2396 } 2397 2398 /** 2355 2399 * Callback for rendering the custom logo, used in the custom_logo partial. 2356 2400 * 2357 2401 * This method exists because the partial object and context data are passed -
src/wp-includes/customize/class-wp-customize-background-property-control.php
1 <?php 2 /** 3 * Customize API: WP_Customize_Background_Property_Control class 4 * 5 * @package WordPress 6 * @subpackage Customize 7 * @since 4.7.0 8 */ 9 10 /** 11 * Customize Background Property Control Class. 12 * 13 * Used to display a series of css-formetted buttons to control various properties. 14 * @since 4.7.0 15 */ 16 class WP_Customize_Background_Property_Control extends WP_Customize_Control { 17 18 /** 19 * Control type. 20 * 21 * @since 4.7.0 22 * @access public 23 * @var string 24 */ 25 public $type = 'background_property'; 26 27 /** 28 * Don't render the control's content - it uses a JS template instead. 29 * 30 * @since 4.7.0 31 * @access public 32 */ 33 public function render_content() {} 34 35 /** 36 * JS/Underscore template for the control UI. 37 * 38 * @since 4.7.0 39 * @access public 40 */ 41 public function content_template() { 42 ?> 43 <# if ( data.label ) { #> 44 <span class="customize-control-title">{{ data.label }}</span> 45 <# } if ( data.description ) { #> 46 <span class="description customize-control-description">{{ data.description }}</span> 47 <# } 48 49 jQuery.each( data.choices, function ( key, value ) { #> 50 <?php /* translators: $1%s: control label, $2%s: choice label */ ?> 51 <button type="button" value="{{ key }}" class="choice"><span class="screen-reader-text"><?php printf( __( 'Set %1$s to %2$s' ), '{{ data.label }}', '{{ value }}' ); ?></span></button> 52 <# }); #> 53 <?php 54 } 55 56 /** 57 * Return parameters for this control to export to JS. 58 * 59 * @since 4.7.0 60 * @access public 61 * 62 * @return array Exported parameters. 63 */ 64 public function json() { 65 $exported = parent::json(); 66 $exported['choices'] = $this->choices; 67 68 return $exported; 69 } 70 } -
src/wp-includes/js/customize-preview.js
185 185 }); 186 186 187 187 /* Custom Backgrounds */ 188 bg = $.map(['color', 'image', ' position_x', 'repeat', 'attachment'], function( prop ) {188 bg = $.map(['color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment'], function( prop ) { 189 189 return 'background_' + prop; 190 190 }); 191 191 192 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {192 api.when.apply( api, bg ).done( function( color, image, size, position_x, position_y, repeat, attachment ) { 193 193 var body = $(document.body), 194 194 head = $('head'), 195 195 style = $('#custom-background-css'), … … 196 196 update; 197 197 198 198 update = function() { 199 var css = '' ;199 var css = '', attachmentString; 200 200 201 201 // The body will support custom backgrounds if either 202 202 // the color or image are set. … … 204 204 // See get_body_class() in /wp-includes/post-template.php 205 205 body.toggleClass( 'custom-background', !! ( color() || image() ) ); 206 206 207 if ( color() ) 207 if ( color() ) { 208 208 css += 'background-color: ' + color() + ';'; 209 } 209 210 210 211 if ( image() ) { 212 if ( ! attachment() || 'fixed' === attachment() ) { 213 attachmentString = 'fixed'; 214 } else { 215 attachmentString = 'scroll'; 216 } 211 217 css += 'background-image: url("' + image() + '");'; 212 css += 'background-position: top ' + position_x() + ';'; 218 css += 'background-size: ' + size() + ';'; 219 css += 'background-position: ' + position_x() + ' ' + position_y() + ';'; 213 220 css += 'background-repeat: ' + repeat() + ';'; 214 css += 'background-attachment: ' + attachment ()+ ';';221 css += 'background-attachment: ' + attachmentString + ';'; 215 222 } 216 223 217 224 // Refresh the stylesheet by removing and recreating it. -
src/wp-includes/theme.php
1376 1376 if ( $background ) { 1377 1377 $image = " background-image: url('$background');"; 1378 1378 1379 $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ); 1380 if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ) ) ) { 1381 $size = 'auto'; 1382 } 1383 1384 $size = " background-size: $size;"; 1385 1379 1386 $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' ) ) ) 1387 if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) { 1381 1388 $repeat = 'repeat'; 1389 } 1382 1390 $repeat = " background-repeat: $repeat;"; 1383 1391 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;";1392 $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); 1393 if ( ! in_array( $position_x, array( 'center', 'right', 'left' ) ) ) { 1394 $position_x = 'left'; 1395 } 1388 1396 1397 $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); 1398 if ( ! in_array( $position_y, array( 'center', 'top', 'bottom' ) ) ) { 1399 $position_y = 'top'; 1400 } 1401 1402 $position = " background-position: $position_y $position_x;"; 1403 1389 1404 $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); 1390 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) 1405 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) { 1391 1406 $attachment = 'scroll'; 1407 } 1392 1408 $attachment = " background-attachment: $attachment;"; 1393 1409 1394 $style .= $image . $ repeat . $position . $attachment;1410 $style .= $image . $size . $repeat . $position . $attachment; 1395 1411 } 1396 1412 ?> 1397 1413 <style type="text/css" id="custom-background-css">