-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
-
@@ -374,11 +402,17 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
public function __construct( $manager ) {
parent::__construct( $manager, 'header_image', array(
- 'label' => __( 'Header Image' ),
- 'section' => 'header',
- 'context' => 'custom-header',
- 'removed' => 'remove-header',
- 'get_url' => 'get_header_image',
+ 'label' => __( 'Header Image' ),
+ 'section' => 'header',
+ 'context' => 'custom-header',
+ 'removed' => 'remove-header',
+ 'get_url' => 'get_header_image',
+ 'statuses' => array(
+ '' => __('Default'),
+ 'remove-header' => __('No Image'),
+ 'random-default-image' => __('Random Default Image'),
+ 'random-uploaded-image' => __('Random Uploaded Image'),
+ )
) );
$this->add_tab( 'default', __('Default'), array( $this, 'tab_default_headers' ) );
diff --git a/wp-includes/class-wp-customize.php b/wp-includes/class-wp-customize.php
index d6acb74b61..73b75c05c0 100644
--- a/wp-includes/class-wp-customize.php
+++ b/wp-includes/class-wp-customize.php
@@ -539,7 +539,6 @@ final class WP_Customize {
$this->add_setting( 'header_textcolor', array(
// @todo: replace with a new accept() setting method
// 'sanitize_callback' => 'sanitize_hexcolor',
- 'control' => 'color',
'theme_supports' => array( 'custom-header', 'header-text' ),
'default' => get_theme_support( 'custom-header', 'default-text-color' ),
) );
@@ -551,11 +550,10 @@ final class WP_Customize {
'type' => 'checkbox',
) );
- $this->add_control( 'header_textcolor', array(
+ $this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
'label' => __( 'Text Color' ),
'section' => 'header',
- 'type' => 'color',
- ) );
+ ) ) );
// Input type: checkbox
// With custom value
@@ -583,21 +581,19 @@ final class WP_Customize {
'transport' => 'postMessage',
) );
- $this->add_control( 'background_color', array(
+ $this->add_control( new WP_Customize_Color_Control( $this, 'background_color', array(
'label' => __( 'Background Color' ),
'section' => 'background',
- 'type' => 'color',
- ) );
+ ) ) );
$this->add_setting( 'background_image', array(
'default' => get_theme_support( 'custom-background', 'default-image' ),
'theme_supports' => 'custom-background',
) );
- $this->add_control( new WP_Customize_Upload_Control( $this, 'background_image', array(
+ $this->add_control( new WP_Customize_Image_Control( $this, 'background_image', array(
'label' => __( 'Background Image' ),
'section' => 'background',
- 'type' => 'upload',
'context' => 'custom-background',
) ) );
diff --git a/wp-includes/css/customize-controls.dev.css b/wp-includes/css/customize-controls.dev.css
index 01687ebfbc..45fdde4097 100644
--- a/wp-includes/css/customize-controls.dev.css
+++ b/wp-includes/css/customize-controls.dev.css
@@ -141,6 +141,10 @@ body {
margin-right: 10px;
line-height: 28px;
}
+.customize-control-content {
+ float: right;
+ width: 140px;
+}
.customize-control-text input,
.customize-control-select select,
@@ -217,14 +221,18 @@ body {
overflow: hidden;
float: left;
min-width: 30px;
- height: 24px;
- line-height: 24px;
+ height: 16px;
+ line-height: 16px;
margin-right: 16px;
- padding: 0 5px;
+ padding: 4px 5px;
background-color: #eee;
border: 1px solid #ccc;
-webkit-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
+
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
}
.customize-control .dropdown-arrow {
@@ -269,29 +277,41 @@ body {
border-color: #aaa transparent;
}
+.customize-control .dropdown-status {
+ display: none;
+ max-width: 112px;
+ color: #999;
+}
+
/*
* Color Picker
*/
-.customize-control .color-picker-control {
+.customize-control-color .color-picker-hex,
+.customize-control-color .farbtastic-placeholder {
display: none;
}
-.customize-control.open .color-picker-control {
+.customize-control-color.open .color-picker-hex,
+.customize-control-color.open .farbtastic-placeholder {
display: block;
}
-.customize-control .dropdown .color-picker-spot {
+.customize-control-color .dropdown {
+ margin-right: 5px;
+ margin-bottom: 5px;
+}
+
+.customize-control-color .dropdown .dropdown-content {
background-color: #fff;
border: 1px solid rgba( 0, 0, 0, 0.15 );
}
-.customize-section .dropdown:hover .color-picker-spot {
+.customize-control-color .dropdown:hover .dropdown-content {
border-color: rgba( 0, 0, 0, 0.25 );
}
.customize-section .color-picker-hex {
float: left;
width: 70px;
- margin-left: 5px;
font-family: monospace;
background-color: #fff;
color: #777;
@@ -322,13 +342,13 @@ body {
border-radius: 0 3px 3px 0;
}
-.customize-section .color-picker-control.farbtastic-placeholder {
+.customize-control-color .farbtastic-placeholder {
width: 235px;
margin: 5px 0 10px 25px;
float: left;
}
-.customize-section .color-picker-control .farbtastic {
+.customize-control-color .farbtastic {
margin: 0 auto;
}
@@ -339,6 +359,7 @@ body {
.customize-control-image .library,
.customize-control-image .actions {
display: none;
+ float: left;
}
.customize-control-image.open .library,
.customize-control-image.open .actions {
@@ -352,6 +373,10 @@ body {
padding: 0;
}
+.customize-section .customize-control-image .dropdown-status {
+ padding: 4px 5px;
+}
+
.customize-section .customize-control-image .preview-thumbnail img {
display: block;
max-width: 122px;
@@ -397,7 +422,7 @@ body {
.customize-section .customize-control-image .library-content {
display: none;
- width: 260px;
+ width: 100%;
float: left;
padding: 10px 0;
}
diff --git a/wp-includes/js/customize-controls.dev.js b/wp-includes/js/customize-controls.dev.js
index 8dd812eaab..ec63f44c83 100644
--- a/wp-includes/js/customize-controls.dev.js
+++ b/wp-includes/js/customize-controls.dev.js
@@ -90,14 +90,30 @@
element.set( setting() );
});
});
+ },
+
+ ready: function() {},
+
+ dropdownInit: function() {
+ var control = this,
+ statuses = this.container.find('.dropdown-status'),
+ params = this.params,
+ update = function( to ) {
+ if ( typeof to === 'string' && params.statuses && params.statuses[ to ] )
+ statuses.html( params.statuses[ to ] ).show();
+ else
+ statuses.hide();
+ };
// Support the .dropdown class to open/close complex elements
this.container.on( 'click', '.dropdown', function( event ) {
event.preventDefault();
control.container.toggleClass('open');
});
- },
- ready: function() {}
+
+ this.setting.bind( update );
+ update( this.setting() );
+ }
});
api.ColorControl = api.Control.extend({
@@ -105,9 +121,9 @@
var control = this,
spot, text, update;
- spot = this.container.find('.color-picker-spot');
+ spot = this.container.find('.dropdown-content');
update = function( color ) {
- color = '#' + color;
+ color = color ? '#' + color : '';
spot.css( 'background', color );
control.farbtastic.setColor( color );
};
@@ -118,6 +134,8 @@
this.setting.bind( update );
update( this.setting() );
+
+ this.dropdownInit();
}
});
@@ -218,6 +236,8 @@
if ( ! this.tabs.uploaded.panel.find('.thumbnail').length )
this.tabs.uploaded.both.addClass('hidden');
}
+
+ this.dropdownInit();
},
success: function( attachment ) {
api.UploadControl.prototype.success.call( this, attachment );
diff --git a/wp-includes/js/customize-preview.dev.js b/wp-includes/js/customize-preview.dev.js
index d416d69ef5..89adb96334 100644
--- a/wp-includes/js/customize-preview.dev.js
+++ b/wp-includes/js/customize-preview.dev.js
@@ -50,7 +50,7 @@
// Auto update background color by default
api( 'background_color', function( value ) {
value.bind( function( to ) {
- body.css( 'background-color', '#' + to );
+ body.css( 'background-color', to ? '#' + to : '' );
});
});
});