Index: wp-admin/css/customize-controls.css =================================================================== --- wp-admin/css/customize-controls.css (revision 38535) +++ wp-admin/css/customize-controls.css (working copy) @@ -955,6 +955,11 @@ float: right; } +/* Position control */ +.customize-control-position .position-control .button-group { + display: block; +} + /** * Themes */ Index: wp-admin/css/themes.css =================================================================== --- wp-admin/css/themes.css (revision 38535) +++ wp-admin/css/themes.css (working copy) @@ -1176,6 +1176,105 @@ max-height: 300px; } +.position-control input[type="radio"] { + display: none; +} + +.position-control input[type="radio"]:checked ~ .button { + background: #eee; + border-color: #999; + -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); + box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ); + z-index: 1; +} + +.position-control .circle:before { + content: "\25cf"; + display: inline-block; + height: 20px; + text-align: center; + width: 20px; + font-size: 25px; +} + +.position-control .button-group { + display: block; +} + +.position-control .button-group .button { + -webkit-border-radius: 0; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + height: 40px; + line-height: 37px; + margin: 0 -1px 0 0 !important; + position: relative; +} + +.position-control .button-group .button:active, +.position-control .button-group .button:hover, +.position-control .button-group .button:focus { + z-index: 1; +} + +.position-control .button-group:last-child .button { + -webkit-box-shadow: 0 1px 0 #ccc; + box-shadow: 0 1px 0 #ccc; +} + +.position-control .button-group:first-child > label:first-child .button { + -webkit-border-radius: 3px 0 0; + border-radius: 3px 0 0; +} + +.position-control .button-group:first-child > label:first-child .dashicons { + -webkit-transform: rotate( 45deg ); + -ms-transform: rotate( 45deg ); + transform: rotate( 45deg ); +} + +.position-control .button-group:first-child > label:last-child .button { + -webkit-border-radius: 0 3px 0 0; + border-radius: 0 3px 0 0; +} + +.position-control .button-group:first-child > label:last-child .dashicons { + -webkit-transform: rotate( -45deg ); + -ms-transform: rotate( -45deg ); + transform: rotate( -45deg ); +} + +.position-control .button-group:last-child > label:first-child .button { + -webkit-border-radius: 0 0 0 3px; + border-radius: 0 0 0 3px; +} + +.position-control .button-group:last-child > label:first-child .dashicons { + -webkit-transform: rotate( -45deg ); + -ms-transform: rotate( -45deg ); + transform: rotate( -45deg ); +} + +.position-control .button-group:last-child > label:last-child .button { + -webkit-border-radius: 0 0 3px 0; + border-radius: 0 0 3px 0; +} + +.position-control .button-group:last-child > label:last-child .dashicons { + -webkit-transform: rotate( 45deg ); + -ms-transform: rotate( 45deg ); + transform: rotate( 45deg ); +} + +.position-control .button-group .dashicons { + margin-top: 9px; +} + +.position-control .button-group + .button-group { + margin-top: -1px; +} + /*------------------------------------------------------------------------------ 23.0 - Full Overlay w/ Sidebar ------------------------------------------------------------------------------*/ Index: wp-admin/custom-background.php =================================================================== --- wp-admin/custom-background.php (revision 38535) +++ wp-admin/custom-background.php (working copy) @@ -133,33 +133,63 @@ return; } - if ( isset($_POST['background-repeat']) ) { - check_admin_referer('custom-background'); - if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) ) - $repeat = $_POST['background-repeat']; - else - $repeat = 'repeat'; - set_theme_mod('background_repeat', $repeat); + if ( isset( $_POST['background-size'] ) ) { + check_admin_referer( 'custom-background' ); + + if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ) ) ) { + $size = $_POST['background-size']; + } else { + $size = 'auto'; + } + + set_theme_mod( 'background_size', $size ); } - if ( isset($_POST['background-position-x']) ) { - check_admin_referer('custom-background'); - if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) ) - $position = $_POST['background-position-x']; - else - $position = 'left'; - set_theme_mod('background_position_x', $position); + if ( isset( $_POST['background-position'] ) ) { + check_admin_referer( 'custom-background' ); + + $position = explode( ' ', $_POST['background-position'] ); + + if ( in_array( $position[0], array( 'left', 'center', 'right' ) ) ) { + $position_x = $position[0]; + } else { + $position_x = 'left'; + } + + if ( in_array( $position[1], array( 'top', 'center', 'bottom' ) ) ) { + $position_y = $position[1]; + } else { + $position_y = 'top'; + } + + set_theme_mod( 'background_position_x', $position_x ); + set_theme_mod( 'background_position_y', $position_y ); } - if ( isset($_POST['background-attachment']) ) { - check_admin_referer('custom-background'); - if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) ) - $attachment = $_POST['background-attachment']; - else - $attachment = 'fixed'; - set_theme_mod('background_attachment', $attachment); + if ( isset( $_POST['background-repeat'] ) ) { + check_admin_referer( 'custom-background' ); + + $repeat = $_POST['background-repeat']; + + if ( 'no-repeat' !== $repeat ) { + $repeat = 'repeat'; + } + + set_theme_mod( 'background_repeat', $repeat ); } + if ( isset( $_POST['background-attachment'] ) ) { + check_admin_referer( 'custom-background' ); + + $attachment = $_POST['background-attachment']; + + if ( 'fixed' !== $attachment ) { + $attachment = 'scroll'; + } + + set_theme_mod( 'background_attachment', $attachment ); + } + if ( isset($_POST['background-color']) ) { check_admin_referer('custom-background'); $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']); @@ -219,11 +249,18 @@ $background_image_thumb = get_background_image(); if ( $background_image_thumb ) { $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) ); + $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ); + $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); + $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); + $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ); + $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); // Background-image URL must be single quote, see below. - $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');' - . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';' - . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); + $background_styles .= " background-image: url('$background_image_thumb');" + . " background-size: $background_size;" + . " background-position: $background_position_x $background_position_y;" + . " background-repeat: $background_repeat;" + . " background-attachment: $background_attachment;"; } ?>
@@ -287,50 +324,101 @@ -

+

- + + + + + + + - + - - + @@ -342,7 +430,7 @@ if ( current_theme_supports( 'custom-background', 'default-color' ) ) $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"'; ?> - /> +> Index: wp-admin/js/custom-background.js =================================================================== --- wp-admin/js/custom-background.js (revision 38535) +++ wp-admin/js/custom-background.js (working copy) @@ -13,14 +13,22 @@ } }); - $('input[name="background-position-x"]').change(function() { - bgImage.css('background-position', $(this).val() + ' top'); + $( 'select[name="background-size"]' ).change( function() { + bgImage.css( 'background-size', $( this ).val() ); }); - $('input[name="background-repeat"]').change(function() { - bgImage.css('background-repeat', $(this).val()); + $( 'input[name="background-position"]' ).change( function() { + bgImage.css( 'background-position', $( this ).val() ); }); + $( 'input[name="background-repeat"]' ).change( function() { + bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' ); + }); + + $( 'input[name="background-attachment"]' ).change( function() { + bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' ); + }); + $('#choose-from-library-link').click( function( event ) { var $el = $(this); Index: wp-admin/js/customize-controls.js =================================================================== --- wp-admin/js/customize-controls.js (revision 38535) +++ wp-admin/js/customize-controls.js (working copy) @@ -2378,6 +2378,29 @@ }); /** + * A position control. + * + * @class + * @augments wp.customize.Control + * @augments wp.customize.Class + */ + api.PositionControl = api.Control.extend({ + ready: function() { + var control = this, + value, + position; + + control.container.on( 'change', 'input[name="background-position"]', function() { + value = $( this ).val(); + position = value.split( ' ' ); + + control.settings[0]( position[0] ); + control.settings[1]( position[1] ); + } ); + } + }); + + /** * A control for selecting and cropping Site Icons. * * @class @@ -3430,6 +3453,7 @@ site_icon: api.SiteIconControl, header: api.HeaderControl, background: api.BackgroundControl, + position: api.PositionControl, theme: api.ThemeControl }; api.panelConstructor = {}; @@ -4137,7 +4161,7 @@ // Control visibility for default controls $.each({ 'background_image': { - controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ], + controls: [ 'background_size', 'background_position', 'background_repeat', 'background_attachment' ], callback: function( to ) { return !! to; } }, 'show_on_front': { @@ -4163,6 +4187,36 @@ }); }); + api.control( 'background_repeat', function( control ) { + control.elements[0].unsync( api( 'background_repeat' ) ); + + control.element = new api.Element( control.container.find( 'input' ) ); + control.element.set( 'no-repeat' !== control.setting() ); + + control.element.bind( function( to ) { + control.setting.set( to ? 'repeat' : 'no-repeat' ); + }); + + control.setting.bind( function( to ) { + control.element.set( 'no-repeat' !== to ); + }); + }); + + api.control( 'background_attachment', function( control ) { + control.elements[0].unsync( api( 'background_attachment' ) ); + + control.element = new api.Element( control.container.find( 'input' ) ); + control.element.set( 'fixed' !== control.setting() ); + + control.element.bind( function( to ) { + control.setting.set( to ? 'scroll' : 'fixed' ); + }); + + control.setting.bind( function( to ) { + control.element.set( 'fixed' !== to ); + }); + }); + // Juggle the two controls that use header_textcolor api.control( 'display_header_text', function( control ) { var last = ''; Index: wp-includes/class-wp-customize-control.php =================================================================== --- wp-includes/class-wp-customize-control.php (revision 38535) +++ wp-includes/class-wp-customize-control.php (working copy) @@ -617,6 +617,9 @@ /** WP_Customize_Cropped_Image_Control class */ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); +/** WP_Customize_Position_Control class */ +require_once( ABSPATH . WPINC . '/customize/class-wp-customize-position-control.php' ); + /** WP_Customize_Site_Icon_Control class */ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' ); Index: wp-includes/class-wp-customize-manager.php =================================================================== --- wp-includes/class-wp-customize-manager.php (revision 38535) +++ wp-includes/class-wp-customize-manager.php (working copy) @@ -216,6 +216,7 @@ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' ); require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' ); require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' ); + require_once( ABSPATH . WPINC . '/customize/class-wp-customize-position-control.php' ); require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' ); require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' ); require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' ); @@ -1970,6 +1971,7 @@ $this->register_control_type( 'WP_Customize_Image_Control' ); $this->register_control_type( 'WP_Customize_Background_Image_Control' ); $this->register_control_type( 'WP_Customize_Cropped_Image_Control' ); + $this->register_control_type( 'WP_Customize_Position_Control' ); $this->register_control_type( 'WP_Customize_Site_Icon_Control' ); $this->register_control_type( 'WP_Customize_Theme_Control' ); @@ -2198,20 +2200,19 @@ $this->add_control( new WP_Customize_Background_Image_Control( $this ) ); - $this->add_setting( 'background_repeat', array( - 'default' => get_theme_support( 'custom-background', 'default-repeat' ), + $this->add_setting( 'background_size', array( + 'default' => get_theme_support( 'custom-background', 'default-size' ), 'theme_supports' => 'custom-background', ) ); - $this->add_control( 'background_repeat', array( - 'label' => __( 'Background Repeat' ), + $this->add_control( 'background_size', array( + 'label' => __( 'Image Size' ), 'section' => 'background_image', - 'type' => 'radio', + 'type' => 'select', 'choices' => array( - 'no-repeat' => __('No Repeat'), - 'repeat' => __('Tile'), - 'repeat-x' => __('Tile Horizontally'), - 'repeat-y' => __('Tile Vertically'), + 'auto' => __( 'Original' ), + 'contain' => __( 'Fit to Screen' ), + 'cover' => __( 'Fill Screen' ), ), ) ); @@ -2220,36 +2221,49 @@ 'theme_supports' => 'custom-background', ) ); - $this->add_control( 'background_position_x', array( - 'label' => __( 'Background Position' ), - 'section' => 'background_image', - 'type' => 'radio', - 'choices' => array( - 'left' => __('Left'), - 'center' => __('Center'), - 'right' => __('Right'), - ), + $this->add_setting( 'background_position_y', array( + 'default' => get_theme_support( 'custom-background', 'default-position-y' ), + 'theme_supports' => 'custom-background', ) ); + $this->add_control( new WP_Customize_Position_Control( $this, 'background_position', array( + 'label' => _x( 'Position', 'Background Position' ), + 'section' => 'background_image', + 'settings' => array( 'background_position_x', 'background_position_y' ), + ) ) ); + + + $this->add_setting( 'background_repeat', array( + 'default' => get_theme_support( 'custom-background', 'default-repeat' ), + 'sanitize_callback' => array( $this, '_sanitize_background_repeat' ), + 'theme_supports' => 'custom-background', + ) ); + + $this->add_control( 'background_repeat', array( + 'label' => __( 'Repeat Background Image' ), + 'section' => 'background_image', + 'settings' => 'background_repeat', + 'type' => 'checkbox', + ) ); + $this->add_setting( 'background_attachment', array( - 'default' => get_theme_support( 'custom-background', 'default-attachment' ), - 'theme_supports' => 'custom-background', + 'default' => get_theme_support( 'custom-background', 'default-attachment' ), + 'sanitize_callback' => array( $this, '_sanitize_background_attachment' ), + 'theme_supports' => 'custom-background', ) ); $this->add_control( 'background_attachment', array( - 'label' => __( 'Background Attachment' ), - 'section' => 'background_image', - 'type' => 'radio', - 'choices' => array( - 'scroll' => __('Scroll'), - 'fixed' => __('Fixed'), - ), + 'label' => __( 'Scroll with Page' ), + 'section' => 'background_image', + 'settings' => 'background_attachment', + 'type' => 'checkbox', ) ); + // If the theme is using the default background callback, we can update // the background CSS using postMessage. if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) { - foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) { + foreach ( array( 'color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment' ) as $prop ) { $this->get_setting( 'background_' . $prop )->transport = 'postMessage'; } } @@ -2344,6 +2358,38 @@ } /** + * Callback for validating the background_repeat value. + * + * @since 4.7.0 + * + * @param string $repeat + * @return string Background repeat. + */ + public function _sanitize_background_repeat( $repeat ) { + if ( 'no-repeat' !== $repeat ) { + $repeat = 'repeat'; + } + + return $repeat; + } + + /** + * Callback for validating the background_attachment value. + * + * @since 4.7.0 + * + * @param string $attachment + * @return string Background attachment. + */ + public function _sanitize_background_attachment( $attachment ) { + if ( 'fixed' !== $attachment ) { + $attachment = 'scroll'; + } + + return $attachment; + } + + /** * Callback for rendering the custom logo, used in the custom_logo partial. * * This method exists because the partial object and context data are passed Index: wp-includes/js/customize-preview.js =================================================================== --- wp-includes/js/customize-preview.js (revision 38535) +++ wp-includes/js/customize-preview.js (working copy) @@ -207,11 +207,11 @@ }); /* Custom Backgrounds */ - bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) { + bg = $.map( ['color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment'], function( prop ) { return 'background_' + prop; - }); + } ); - api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) { + api.when.apply( api, bg ).done( function( color, image, size, position_x, position_y, repeat, attachment ) { var body = $(document.body), head = $('head'), style = $('#custom-background-css'), @@ -231,7 +231,8 @@ if ( image() ) { css += 'background-image: url("' + image() + '");'; - css += 'background-position: top ' + position_x() + ';'; + css += 'background-size: ' + size() + ';'; + css += 'background-position: ' + position_x() + ' ' + position_y() + ';'; css += 'background-repeat: ' + repeat() + ';'; css += 'background-attachment: ' + attachment() + ';'; } Index: wp-includes/theme.php =================================================================== --- wp-includes/theme.php (revision 38535) +++ wp-includes/theme.php (working copy) @@ -1376,22 +1376,48 @@ if ( $background ) { $image = " background-image: url('$background');"; + // Background Size + $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ); + + if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ) ) ) { + $size = 'auto'; + } + + $size = " background-size: $size;"; + + // Background Position + $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); + $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) ); + + if ( ! in_array( $position_x, array( 'left', 'center', 'right' ) ) ) { + $position = 'left'; + } + + if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ) ) ) { + $position = 'top'; + } + + $position = " background-position: $position_x $position_y;"; + + // Background Repeat $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ); - if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) ) + + if ( ! in_array( $repeat, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ) ) ) { $repeat = 'repeat'; + } + $repeat = " background-repeat: $repeat;"; - $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ); - if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) ) - $position = 'left'; - $position = " background-position: top $position;"; + // Background Scroll + $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); - $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ); - if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) ) + if ( 'fixed' !== $attachment ) { $attachment = 'scroll'; + } + $attachment = " background-attachment: $attachment;"; - $style .= $image . $repeat . $position . $attachment; + $style .= $image . $size . $position . $repeat . $attachment; } ?>
+ +
+
+
+
+
+ + + +
+
+ + + +
+
- - - - + +
- - +
+ +