From c959c4d4b38415f1a043b510db23ab5501bf18de Mon Sep 17 00:00:00 2001 From: "Dominik Schilling (ocean90)" Date: Mon, 15 Dec 2014 23:27:17 +0000 Subject: [PATCH] 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. git-svn-id: https://develop.svn.wordpress.org/trunk@30885 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-admin/css/customize-controls.css | 15 +++++++ src/wp-admin/custom-background.php | 38 +++++++++++++++++- src/wp-admin/js/customize-controls.js | 39 ++++++++++++++++++- .../class-wp-customize-control.php | 17 +++++++- .../class-wp-customize-manager.php | 1 + 5 files changed, 105 insertions(+), 5 deletions(-) diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css index d58c632b5a..599fdac310 100644 --- a/src/wp-admin/css/customize-controls.css +++ b/src/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; } diff --git a/src/wp-admin/custom-background.php b/src/wp-admin/custom-background.php index 16bf27ad5c..8fb1901c25 100644 --- a/src/wp-admin/custom-background.php +++ b/src/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']); diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js index db16114b15..880e5839a8 100644 --- a/src/wp-admin/js/customize-controls.js +++ b/src/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 = {}; diff --git a/src/wp-includes/class-wp-customize-control.php b/src/wp-includes/class-wp-customize-control.php index 380b0c7abe..3c8a8bd9ce 100644 --- a/src/wp-includes/class-wp-customize-control.php +++ b/src/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', ) ); diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php index e8b6198284..60303e6714 100644 --- a/src/wp-includes/class-wp-customize-manager.php +++ b/src/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 */