Ticket #21627: 21627.5.diff

src/wp-admin/customize.php

@@ -224 +224 @@
                 'theme'    => array(
                         'stylesheet' => $wp_customize->get_stylesheet(),
                         'active'     => $wp_customize->is_theme_active(),
+                        'bgElement'  => get_theme_support( 'custom-background', 'element-selector' ),
+                        'bgClass'    => get_theme_support( 'custom-background', 'html-class' ),
                 ),
                 'url'      => array(
                         'preview'       => esc_url_raw( $url ? $url : home_url( '/' ) ),

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

@@ -594 +594 @@
          */
         public function customize_preview_settings() {
                 $settings = array(
-                        'values'  => array(),
-                        'channel' => wp_unslash( $_POST['customize_messenger_channel'] ),
-                        'activePanels' => array(),
+                        'values'         => array(),
+                        'channel'        => wp_unslash( $_POST['customize_messenger_channel'] ),
+                        'activePanels'   => array(),
                         'activeSections' => array(),
                         'activeControls' => array(),
+                        'theme'          => array(
+                                'bgElement'      => get_theme_support( 'custom-background', 'element-selector' ), 
+                                'bgClass'        => get_theme_support( 'custom-background', 'html-class' ),
+                                
+                        ),
                         'l10n' => array(
-                                'loading'  => __( 'Loading ...' ),
+                                'loading'    => __( 'Loading ...' ),
                         ),
                 );
 

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

@@ -131 +131 @@
                 });
 
                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
-                        var body = $(document.body),
+                        var elementSelector = api.settings.theme.bgElement,
+                                element = $(elementSelector),
                                 head = $('head'),
                                 style = $('#custom-background-css'),
                                 update;
 
                         update = function() {
                                 var css = '';
+                                var bgClass = api.settings.theme.bgClass;
+                                var selector = elementSelector + '.' + bgClass;
 
                                 // 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( bgClass, !! ( color() || image() ) );
 
                                 if ( color() )
                                         css += 'background-color: ' + color() + ';';
@@ -157 +160 @@
 
                                 // 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

@@ -669 +669 @@
         }
 
         if ( get_background_color() !== get_theme_support( 'custom-background', 'default-color' ) || get_background_image() )
-                $classes[] = 'custom-background';
+                $classes[] = get_theme_support( 'custom-background', 'html-class' );
 
         $page = $wp_query->get( 'page' );
 

src/wp-includes/theme.php

@@ -1356 +1356 @@
 
                 $style .= $image . $repeat . $position . $attachment;
         }
+
+        $element    = get_theme_support( 'custom-background', 'element-selector' );
+        $html_class = get_theme_support( 'custom-background', 'html-class' );
+        $selector   = $element . '.' . $html_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
 }
@@ -1603 +1607 @@
                                 'wp-head-callback'       => '_custom_background_cb',
                                 'admin-head-callback'    => '',
                                 'admin-preview-callback' => '',
+                                'element-selector'       => 'body',
+                                'html-class'             => 'custom-background'
                         );
 
                         $jit = isset( $args[0]['__jit'] );