Site Icon: Add Customizer UI.

Second part of the Site Icon feature after [32994] introduced it for Settings. Props celloexpressions. See #16434. Built from https://develop.svn.wordpress.org/trunk@33154 git-svn-id: http://core.svn.wordpress.org/trunk@33126 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2015-07-10 21:33:24 +00:00
parent 75d6c10b01
commit f29e5044cd
16 changed files with 552 additions and 21 deletions
--- a/wp-includes/class-wp-customize-control.php
+++ b/wp-includes/class-wp-customize-control.php
@@ -1000,6 +1000,134 @@ class WP_Customize_Background_Image_Control extends WP_Customize_Image_Control {
 	}
 }

+/**
+ * Customize Cropped Image Control class.
+ *
+ * @since 4.3.0
+ *
+ * @see WP_Customize_Image_Control
+ */
+class WP_Customize_Cropped_Image_Control extends WP_Customize_Image_Control {
+
+	/**
+	 * Control type.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'cropped_image';
+
+	/**
+	 * Suggested width for cropped image.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var int
+	 */
+	public $width = 150;
+
+	/**
+	 * Suggested height for cropped image.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var int
+	 */
+	public $height = 150;
+
+	/**
+	 * Whether the width is flexible.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var bool
+	 */
+	public $flex_width = false;
+
+	/**
+	 * Whether the height is flexible.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var bool
+	 */
+	public $flex_height = false;
+
+	/**
+	 * Enqueue control related scripts/styles.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 */
+	public function enqueue() {
+		wp_enqueue_script( 'customize-views' );
+
+		parent::enqueue();
+	}
+
+	/**
+	 * Refresh the parameters passed to the JavaScript via JSON.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @uses WP_Customize_Image_Control::to_json()
+	 * @see WP_Customize_Control::to_json()
+	 */
+	public function to_json() {
+		parent::to_json();
+
+		$this->json['width']       = absint( $this->width );
+		$this->json['height']      = absint( $this->height );
+		$this->json['flex_width']  = absint( $this->flex_width );
+		$this->json['flex_height'] = absint( $this->flex_height );
+	}
+
+}
+
+/**
+ * Customize Site Icon control class.
+ *
+ * Used only for custom functionality in JavaScript.
+ *
+ * @since 4.3.0
+ *
+ * @see WP_Customize_Cropped_Image_Control
+ */
+class WP_Customize_Site_Icon_Control extends WP_Customize_Cropped_Image_Control {
+
+	/**
+	 * Control type.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @access public
+	 * @var string
+	 */
+	public $type = 'site_icon';
+
+	/**
+	 * Constructor.
+	 *
+	 * @since 4.3.0
+	 *
+	 * @param WP_Customize_Manager $manager
+	 * @param string               $id
+	 * @param array                $args
+	 */
+	public function __construct( $manager, $id, $args = array() ) {
+		parent::__construct( $manager, $id, $args );
+		add_action( 'customize_controls_print_styles', 'wp_site_icon', 99 );
+	}
+}
+
 /**
 * Customize Header Image Control class.
 *
--- a/wp-includes/class-wp-customize-manager.php
+++ b/wp-includes/class-wp-customize-manager.php
@@ -1278,6 +1278,8 @@ final class WP_Customize_Manager {
 		$this->register_control_type( 'WP_Customize_Upload_Control' );
 		$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_Site_Icon_Control' );
 		$this->register_control_type( 'WP_Customize_Theme_Control' );

 		/* Themes */
@@ -1324,10 +1326,10 @@ final class WP_Customize_Manager {
 			) ) );
 		}

-		/* Site Title & Tagline */
+		/* Site Identity */

 		$this->add_section( 'title_tagline', array(
-			'title'    => __( 'Site Title & Tagline' ),
+			'title'    => __( 'Site Identity' ),
 			'priority' => 20,
 		) );

@@ -1353,6 +1355,23 @@ final class WP_Customize_Manager {
 			'section'    => 'title_tagline',
 		) );

+		$icon = wp_get_attachment_image_src( absint( get_option( 'site_icon' ) ), 'full' );
+		$this->add_setting( 'site_icon', array(
+			'default'    => $icon[0] ? $icon[0] : '',
+			'type'       => 'option',
+			'capability' => 'manage_options',
+			'transport'  => 'postMessage', // Previewed with JS in the Customizer controls window.
+		) );
+
+		$this->add_control( new WP_Customize_Site_Icon_Control( $this, 'site_icon', array(
+			'label'       => __( 'Site Icon' ),
+			'description' => __( 'The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall.' ),
+			'section'     => 'title_tagline',
+			'priority'    => 60,
+			'height'      => 512,
+			'width'       => 512,
+		) ) );
+
 		/* Colors */

 		$this->add_section( 'colors', array(
@@ -1375,6 +1394,7 @@ final class WP_Customize_Manager {
 			'label'    => __( 'Display Header Text' ),
 			'section'  => 'title_tagline',
 			'type'     => 'checkbox',
+			'priority' => 40,
 		) );

 		$this->add_control( new WP_Customize_Color_Control( $this, 'header_textcolor', array(
--- a/wp-includes/general-template.php
+++ b/wp-includes/general-template.php
@@ -2445,7 +2445,7 @@ function wp_no_robots() {
 * @link http://www.whatwg.org/specs/web-apps/current-work/multipage/links.html#rel-icon HTML5 specification link icon.
 */
 function wp_site_icon() {
-	if ( ! has_site_icon() ) {
+	if ( ! has_site_icon() && ! is_customize_preview() ) {
 		return;
 	}

--- a/wp-includes/js/customize-views.js
+++ b/wp-includes/js/customize-views.js
@@ -3,6 +3,26 @@
 	if ( ! wp || ! wp.customize ) { return; }
 	var api = wp.customize;

+	/**
+	 * Use a custom ajax action for cropped image controls.
+	 */
+	wp.media.controller.customizeImageCropper = wp.media.controller.Cropper.extend( {
+		doCrop: function( attachment ) {
+			var cropDetails = attachment.get( 'cropDetails' ),
+				control = this.get( 'control' );
+
+			cropDetails.dst_width  = control.params.width;
+			cropDetails.dst_height = control.params.height;
+
+			return wp.ajax.post( 'crop-image', {
+				wp_customize: 'on',
+				nonce: attachment.get( 'nonces' ).edit,
+				id: attachment.get( 'id' ),
+				context: control.id,
+				cropDetails: cropDetails
+			} );
+		}
+	} );

 	/**
 	 * wp.customize.HeaderTool.CurrentView
--- a/wp-includes/js/customize-views.min.js
+++ b/wp-includes/js/customize-views.min.js
@@ -1 +1 @@
-!function(a,b,c){if(b&&b.customize){var d=b.customize;d.HeaderTool.CurrentView=b.Backbone.View.extend({template:b.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setPlaceholder(),this.setButtons(),this},getHeight:function(){var a,b,c,e=this.$el.find("img");return e.length?(this.$el.find(".inner").hide(),a=this.model.get("savedHeight"),b=e.height()||a,b||(c=d.get().header_image_data,b=c&&c.width&&c.height?260/c.width*c.height:40),b):(this.$el.find(".inner").show(),40)},setPlaceholder:function(a){var b=a||this.getHeight();this.model.set("savedHeight",b),this.$el.add(this.$el.find(".placeholder")).height(b)},setButtons:function(){var b=a("#customize-control-header_image .actions .remove");this.model.get("choice")?b.show():b.hide()}}),d.HeaderTool.ChoiceView=b.Backbone.View.extend({template:b.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var a=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),c.contains(a,d.get().header_image)&&d.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var a=this.model.get("collection");return c.extend(this.model.toJSON(),{type:a.type})},getHeight:d.HeaderTool.CurrentView.prototype.getHeight,setPlaceholder:d.HeaderTool.CurrentView.prototype.setPlaceholder,select:function(){this.preventJump(),this.model.save(),d.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var b=a(".wp-full-overlay-sidebar-content"),d=b.scrollTop();c.defer(function(){b.scrollTop(d)})},removeImage:function(a){a.stopPropagation(),this.model.destroy(),this.remove()}}),d.HeaderTool.ChoiceListView=b.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(a){var b;a.set({collection:this.collection}),b=new d.HeaderTool.ChoiceView({model:a}),this.$el.append(b.render().el)},toggleList:function(){var a=this.$el.parents().prev(".customize-control-title"),b=this.$el.find(".random").parent();this.collection.shouldHideTitle()?a.add(b).hide():a.add(b).show()}}),d.HeaderTool.CombinedList=b.Backbone.View.extend({initialize:function(a){this.collections=a,this.on("all",this.propagate,this)},propagate:function(a,b){c.each(this.collections,function(c){c.trigger(a,b)})}})}}(jQuery,window.wp,_);
+!function(a,b,c){if(b&&b.customize){var d=b.customize;b.media.controller.customizeImageCropper=b.media.controller.Cropper.extend({doCrop:function(a){var c=a.get("cropDetails"),d=this.get("control");return c.dst_width=d.params.width,c.dst_height=d.params.height,b.ajax.post("crop-image",{wp_customize:"on",nonce:a.get("nonces").edit,id:a.get("id"),context:d.id,cropDetails:c})}}),d.HeaderTool.CurrentView=b.Backbone.View.extend({template:b.template("header-current"),initialize:function(){this.listenTo(this.model,"change",this.render),this.render()},render:function(){return this.$el.html(this.template(this.model.toJSON())),this.setPlaceholder(),this.setButtons(),this},getHeight:function(){var a,b,c,e=this.$el.find("img");return e.length?(this.$el.find(".inner").hide(),a=this.model.get("savedHeight"),b=e.height()||a,b||(c=d.get().header_image_data,b=c&&c.width&&c.height?260/c.width*c.height:40),b):(this.$el.find(".inner").show(),40)},setPlaceholder:function(a){var b=a||this.getHeight();this.model.set("savedHeight",b),this.$el.add(this.$el.find(".placeholder")).height(b)},setButtons:function(){var b=a("#customize-control-header_image .actions .remove");this.model.get("choice")?b.show():b.hide()}}),d.HeaderTool.ChoiceView=b.Backbone.View.extend({template:b.template("header-choice"),className:"header-view",events:{"click .choice,.random":"select","click .close":"removeImage"},initialize:function(){var a=[this.model.get("header").url,this.model.get("choice")];this.listenTo(this.model,"change:selected",this.toggleSelected),c.contains(a,d.get().header_image)&&d.HeaderTool.currentHeader.set(this.extendedModel())},render:function(){return this.$el.html(this.template(this.extendedModel())),this.toggleSelected(),this},toggleSelected:function(){this.$el.toggleClass("selected",this.model.get("selected"))},extendedModel:function(){var a=this.model.get("collection");return c.extend(this.model.toJSON(),{type:a.type})},getHeight:d.HeaderTool.CurrentView.prototype.getHeight,setPlaceholder:d.HeaderTool.CurrentView.prototype.setPlaceholder,select:function(){this.preventJump(),this.model.save(),d.HeaderTool.currentHeader.set(this.extendedModel())},preventJump:function(){var b=a(".wp-full-overlay-sidebar-content"),d=b.scrollTop();c.defer(function(){b.scrollTop(d)})},removeImage:function(a){a.stopPropagation(),this.model.destroy(),this.remove()}}),d.HeaderTool.ChoiceListView=b.Backbone.View.extend({initialize:function(){this.listenTo(this.collection,"add",this.addOne),this.listenTo(this.collection,"remove",this.render),this.listenTo(this.collection,"sort",this.render),this.listenTo(this.collection,"change",this.toggleList),this.render()},render:function(){this.$el.empty(),this.collection.each(this.addOne,this),this.toggleList()},addOne:function(a){var b;a.set({collection:this.collection}),b=new d.HeaderTool.ChoiceView({model:a}),this.$el.append(b.render().el)},toggleList:function(){var a=this.$el.parents().prev(".customize-control-title"),b=this.$el.find(".random").parent();this.collection.shouldHideTitle()?a.add(b).hide():a.add(b).show()}}),d.HeaderTool.CombinedList=b.Backbone.View.extend({initialize:function(a){this.collections=a,this.on("all",this.propagate,this)},propagate:function(a,b){c.each(this.collections,function(c){c.trigger(a,b)})}})}}(jQuery,window.wp,_);
--- a/wp-includes/version.php
+++ b/wp-includes/version.php
@@ -4,7 +4,7 @@
 *
 * @global string $wp_version
 */
-$wp_version = '4.3-beta2-33153';
+$wp_version = '4.3-beta2-33154';

 /**
 * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.