Ticket #21627: 21627.2.diff

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

@@ -1829 +1829 @@
                         'theme'    => array(
                                 'stylesheet' => $this->get_stylesheet(),
                                 'active'     => $this->is_theme_active(),
+                                'bgElement'  => tag_escape( get_theme_support( 'custom-background', 'background-element' ) ),
+                                'bgClass'    => sanitize_html_class( get_theme_support( 'custom-background', 'background-class' ) ),
+                                'bgSelector' => get_theme_support( 'custom-background', 'background-selector' ),
                         ),
                         'url'      => array(
                                 'preview'       => esc_url_raw( $this->get_preview_url() ),
@@ -1852 +1855 @@
                         'previewableDevices' => $this->get_previewable_devices(),
                 );
 
+                $settings['theme']['bgSelector'] = sprintf( $settings['theme']['bgSelector'], $settings['theme']['bgElement'], $settings['theme']['bgClass'] );
+
                 // Prepare Customize Section objects to pass to JavaScript.
                 foreach ( $this->sections() as $id => $section ) {
                         if ( $section->check_capabilities() ) {

src/wp-includes/js/customize-preview.js

@@ -212 +212 @@
                 });
 
                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
-                        var body = $(document.body),
+                        var element = $(window.parent._wpCustomizeSettings.theme.bgElement),
                                 head = $('head'),
                                 style = $('#custom-background-css'),
                                 update;
 
                         update = function() {
                                 var css = '';
+                                var selector = window.parent._wpCustomizeSettings.theme.bgSelector;
 
                                 // The body will support custom backgrounds if either
                                 // the color or image are set.
                                 //
                                 // See get_body_class() in /wp-includes/post-template.php
-                                body.toggleClass( 'custom-background', !! ( color() || image() ) );
+                                element.toggleClass( 'custom-background', !! ( color() || image() ) );
 
                                 if ( color() )
                                         css += 'background-color: ' + color() + ';';
@@ -238 +239 @@
 
                                 // Refresh the stylesheet by removing and recreating it.
                                 style.remove();
-                                style = $('<style type="text/css" id="custom-background-css">body.custom-background { ' + css + ' }</style>').appendTo( head );
+                                style = $('<style type="text/css" id="custom-background-css">' + selector + ' { ' + css + ' }</style>').appendTo( head );
                         };
 
                         $.each( arguments, function() {

src/wp-includes/post-template.php

@@ -712 +712 @@
         }
 
         if ( get_background_color() !== get_theme_support( 'custom-background', 'default-color' ) || get_background_image() )
-                $classes[] = 'custom-background';
+                $classes[] = sanitize_html_class( get_theme_support( 'custom-background', 'background-class' ) );
 
         if ( has_custom_logo() ) {
                 $classes[] = 'wp-custom-logo';

src/wp-includes/theme.php

@@ -1393 +1393 @@
 
                 $style .= $image . $repeat . $position . $attachment;
         }
+
+        $element    = tag_escape( get_theme_support( 'custom-background', 'background-element' ) );
+        $class      = sanitize_html_class( get_theme_support( 'custom-background', 'background-class' ) );
+        $selector   = get_theme_support( 'custom-background', 'background-selector' );
+
+        $selector = sprintf( $selector, $element, $class );
 ?>
 <style type="text/css" id="custom-background-css">
-body.custom-background { <?php echo trim( $style ); ?> }
+<?php echo $selector; ?> { <?php echo trim( $style ); ?> }
 </style>
 <?php
 }
@@ -1696 +1702 @@
                                 'wp-head-callback'       => '_custom_background_cb',
                                 'admin-head-callback'    => '',
                                 'admin-preview-callback' => '',
+                                'background-element'     => 'body',
+                                'background-class'       => 'custom-background',
+                                'background-selector'    => '%1$s.%2$s',
                         );
 
                         $jit = isset( $args[0]['__jit'] );