Customizer: Add `_wp_attachment_is_custom_background` meta to uploaded background images.

Adds `$type` property to `WP_Customize_Background_Image_Control` (PHP) and introduces `wp.customize.BackgroundControl` (JS).

see #30707.
Built from https://develop.svn.wordpress.org/trunk@30885


git-svn-id: http://core.svn.wordpress.org/trunk@30873 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -581,6 +581,7 @@ p.customize-section-description {
 
 .customize-control-upload .current,
 .customize-control-image .current,
+.customize-control-background .current,
 .customize-control-header .current {
 	margin-bottom: 8px;
 }
@@ -610,6 +611,9 @@ p.customize-section-description {
 .customize-control-image .remove-button,
 .customize-control-image .default-button,
 .customize-control-image .upload-button,
+.customize-control-background .remove-button,
+.customize-control-background .default-button,
+.customize-control-background .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
 	white-space: normal;
@@ -619,6 +623,7 @@ p.customize-section-description {
 
 .customize-control-upload .current .container,
 .customize-control-image .current .container,
+.customize-control-background .current .container,
 .customize-control-header .current .container {
 	overflow: hidden;
 	-webkit-border-radius: 2px;
@@ -628,12 +633,14 @@ p.customize-section-description {
 }
 
 .customize-control-upload .current .container,
+.customize-control-background .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
 
 .customize-control-upload .placeholder,
 .customize-control-image .placeholder,
+.customize-control-background .placeholder,
 .customize-control-header .placeholder {
 	width: 100%;
 	position: relative;
@@ -643,6 +650,7 @@ p.customize-section-description {
 
 .customize-control-upload .inner,
 .customize-control-image .inner,
+.customize-control-background .inner,
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
@@ -654,6 +662,7 @@ p.customize-section-description {
 }
 
 .customize-control-upload .inner,
+.customize-control-background .inner,
 .customize-control-image .inner {
 	display: block;
 	min-height: 40px;
@@ -661,6 +670,7 @@ p.customize-section-description {
 
 .customize-control-upload .inner,
 .customize-control-image .inner,
+.customize-control-background .inner,
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
 	line-height: 20px;
@@ -777,6 +787,7 @@ p.customize-section-description {
 
 .customize-control-upload .actions,
 .customize-control-image .actions,
+.customize-control-background .actions,
 .customize-control-header .actions {
 	margin-bottom: 32px;
 }
@@ -793,6 +804,7 @@ p.customize-section-description {
 
 .customize-control-upload img,
 .customize-control-image img,
+.customize-control-background img,
 .customize-control-header img {
 	width: 100%;
 	-webkit-border-radius: 2px;
@@ -803,6 +815,8 @@ p.customize-section-description {
 .customize-control-upload .default-button,
 .customize-control-image .remove-button,
 .customize-control-image .default-button,
+.customize-control-background .remove-button,
+.customize-control-background .default-button,
 .customize-control-header .remove {
 	float: right;
 	margin-left: 3px;
@@ -810,6 +824,7 @@ p.customize-section-description {
 
 .customize-control-upload .upload-button,
 .customize-control-image .upload-button,
+.customize-control-background .upload-button,
 .customize-control-header .new {
 	float: left;
 }

wp-admin/css/customize-controls.css

@@ -581,6 +581,7 @@ p.customize-section-description {
 
 .customize-control-upload .current,
 .customize-control-image .current,
+.customize-control-background .current,
 .customize-control-header .current {
 	margin-bottom: 8px;
 }
@@ -610,6 +611,9 @@ p.customize-section-description {
 .customize-control-image .remove-button,
 .customize-control-image .default-button,
 .customize-control-image .upload-button,
+.customize-control-background .remove-button,
+.customize-control-background .default-button,
+.customize-control-background .upload-button,
 .customize-control-header button.new,
 .customize-control-header button.remove {
 	white-space: normal;
@@ -619,6 +623,7 @@ p.customize-section-description {
 
 .customize-control-upload .current .container,
 .customize-control-image .current .container,
+.customize-control-background .current .container,
 .customize-control-header .current .container {
 	overflow: hidden;
 	-webkit-border-radius: 2px;
@@ -628,12 +633,14 @@ p.customize-section-description {
 }
 
 .customize-control-upload .current .container,
+.customize-control-background .current .container,
 .customize-control-image .current .container {
 	min-height: 40px;
 }
 
 .customize-control-upload .placeholder,
 .customize-control-image .placeholder,
+.customize-control-background .placeholder,
 .customize-control-header .placeholder {
 	width: 100%;
 	position: relative;
@@ -643,6 +650,7 @@ p.customize-section-description {
 
 .customize-control-upload .inner,
 .customize-control-image .inner,
+.customize-control-background .inner,
 .customize-control-header .inner {
 	display: none;
 	position: absolute;
@@ -654,6 +662,7 @@ p.customize-section-description {
 }
 
 .customize-control-upload .inner,
+.customize-control-background .inner,
 .customize-control-image .inner {
 	display: block;
 	min-height: 40px;
@@ -661,6 +670,7 @@ p.customize-section-description {
 
 .customize-control-upload .inner,
 .customize-control-image .inner,
+.customize-control-background .inner,
 .customize-control-header .inner,
 .customize-control-header .inner .dashicons {
 	line-height: 20px;
@@ -777,6 +787,7 @@ p.customize-section-description {
 
 .customize-control-upload .actions,
 .customize-control-image .actions,
+.customize-control-background .actions,
 .customize-control-header .actions {
 	margin-bottom: 32px;
 }
@@ -793,6 +804,7 @@ p.customize-section-description {
 
 .customize-control-upload img,
 .customize-control-image img,
+.customize-control-background img,
 .customize-control-header img {
 	width: 100%;
 	-webkit-border-radius: 2px;
@@ -803,6 +815,8 @@ p.customize-section-description {
 .customize-control-upload .default-button,
 .customize-control-image .remove-button,
 .customize-control-image .default-button,
+.customize-control-background .remove-button,
+.customize-control-background .default-button,
 .customize-control-header .remove {
 	float: left;
 	margin-right: 3px;
@@ -810,6 +824,7 @@ p.customize-section-description {
 
 .customize-control-upload .upload-button,
 .customize-control-image .upload-button,
+.customize-control-background .upload-button,
 .customize-control-header .new {
 	float: right;
 }

wp-admin/custom-background.php

@@ -60,6 +60,10 @@ class Custom_Background {
 		$this->admin_image_div_callback = $admin_image_div_callback;
 
 		add_action( 'admin_menu', array( $this, 'init' ) );
+
+		add_action( 'wp_ajax_custom-background-add', array( $this, 'ajax_background_add' ) );
+
+		// Unused since 3.5.0.
 		add_action( 'wp_ajax_set-background-image', array( $this, 'wp_set_background_image' ) );
 	}
 
@@ -464,23 +468,53 @@ if ( current_theme_supports( 'custom-background', 'default-color' ) )
 	}
 
 	/**
-	 * Unused since 3.5.0.
+	 * AJAX handler for adding custom background context to an attachment.
+	 *
+	 * Triggered when the user adds a new background image from the
+	 * Media Manager.
+	 *
+	 * @since 4.1.0
+	 */
+	public function ajax_background_add() {
+		check_ajax_referer( 'background-add', 'nonce' );
+
+		if ( ! current_user_can( 'edit_theme_options' ) ) {
+			wp_send_json_error();
+		}
+
+		$attachment_id = absint( $_POST['attachment_id'] );
+		if ( $attachment_id < 1 ) {
+			wp_send_json_error();
+		}
+
+		update_post_meta( $attachment_id, '_wp_attachment_is_custom_background', get_stylesheet() );
+
+		wp_send_json_success();
+	}
+
+	/**
 	 *
 	 * @since 3.4.0
+	 * @deprecated 3.5.0
 	 */
 	public function attachment_fields_to_edit( $form_fields ) {
 		return $form_fields;
 	}
 
 	/**
-	 * Unused since 3.5.0.
 	 *
 	 * @since 3.4.0
+	 * @deprecated 3.5.0
 	 */
 	public function filter_upload_tabs( $tabs ) {
 		return $tabs;
 	}
 
+	/**
+	 *
+	 * @since 3.4.0
+	 * @deprecated 3.5.0
+	 */
 	public function wp_set_background_image() {
 		if ( ! current_user_can('edit_theme_options') || ! isset( $_POST['attachment_id'] ) ) exit;
 		$attachment_id = absint($_POST['attachment_id']);

wp-admin/js/customize-controls.js

@@ -1,4 +1,4 @@
-/* globals _wpCustomizeHeader, _wpMediaViewsL10n */
+/* globals _wpCustomizeHeader, _wpCustomizeBackground, _wpMediaViewsL10n */
 (function( exports, $ ){
 	var Container, focus, api = wp.customize;
 
@@ -1143,6 +1143,40 @@
 		thumbnailSrc: function() {}
 	});
 
+	/**
+	 * A control for uploading background images.
+	 *
+	 * @class
+	 * @augments wp.customize.UploadControl
+	 * @augments wp.customize.Control
+	 * @augments wp.customize.Class
+	 */
+	api.BackgroundControl = api.UploadControl.extend({
+
+		/**
+		 * When the control's DOM structure is ready,
+		 * set up internal event bindings.
+		 */
+		ready: function() {
+			api.UploadControl.prototype.ready.apply( this, arguments );
+		},
+
+		/**
+		 * Callback handler for when an attachment is selected in the media modal.
+		 * Does an additional AJAX request for setting the background context.
+		 */
+		select: function() {
+			api.UploadControl.prototype.select.apply( this, arguments );
+
+			wp.ajax.post( 'custom-background-add', {
+				nonce: _wpCustomizeBackground.nonces.add,
+				wp_customize: 'on',
+				theme: api.settings.theme.stylesheet,
+				attachment_id: this.params.attachment.id
+			} );
+		}
+	});
+
 	/**
 	 * @class
 	 * @augments wp.customize.Control
@@ -1822,7 +1856,8 @@
 		color:  api.ColorControl,
 		upload: api.UploadControl,
 		image:  api.ImageControl,
-		header: api.HeaderControl
+		header: api.HeaderControl,
+		background: api.BackgroundControl
 	};
 	api.panelConstructor = {};
 	api.sectionConstructor = {};

wp-includes/class-wp-customize-control.php

@@ -879,6 +879,7 @@ class WP_Customize_Image_Control extends WP_Customize_Upload_Control {
  * @since 3.4.0
  */
 class WP_Customize_Background_Image_Control extends WP_Customize_Image_Control {
+	public $type = 'background';
 
 	/**
 	 * Constructor.
@@ -894,6 +895,21 @@ class WP_Customize_Background_Image_Control extends WP_Customize_Image_Control {
 			'section'  => 'background_image',
 		) );
 	}
+
+	/**
+	 * Enqueue control related scripts/styles.
+	 *
+	 * @since 4.1.0
+	 */
+	public function enqueue() {
+		parent::enqueue();
+
+		wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array(
+			'nonces' => array(
+				'add' => wp_create_nonce( 'background-add' ),
+			),
+		) );
+	}
 }
 
 class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
@@ -912,7 +928,6 @@ class WP_Customize_Header_Image_Control extends WP_Customize_Image_Control {
 				'data'    => 'header_image_data',
 			),
 			'section'  => 'header_image',
-			'context'  => 'custom-header',
 			'removed'  => 'remove-header',
 			'get_url'  => 'get_header_image',
 		) );

wp-includes/class-wp-customize-manager.php

@@ -974,6 +974,7 @@ final class WP_Customize_Manager {
 		$this->register_control_type( 'WP_Customize_Color_Control' );
 		$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' );
 
 		/* Site Title & Tagline */