Ticket #35210: 35210.2.patch

diff --git a/src/wp-admin/css/customize-controls.css b/src/wp-admin/css/customize-controls.css
index 1d69609..283e68a 100644
--- a/src/wp-admin/css/customize-controls.css
+++ b/src/wp-admin/css/customize-controls.css
@@ -25,12 +25,17 @@ body {
 
 #customize-header-actions .button-primary {
        float: right;
+       position: relative;
+       top: 0;
        margin-top: 9px;
+       margin-right: 15px;
 }
 
 #customize-header-actions .spinner {
        margin-top: 13px;
        margin-right: 4px;
+       position: relative;
+       top: -45px;
 }
 
 .saving #customize-header-actions .spinner {
@@ -39,6 +44,16 @@ body {
 
 #customize-header-actions {
        border-bottom: 1px solid #ddd;
+       padding-top: 0;
+}
+
+#customize-header-actions .notice {
+       margin-top: 46px;
+       margin-bottom: 1px;
+}
+
+#customize-header-actions .notice + .notice {
+       margin-top: 0;
 }
 
 #customize-controls .wp-full-overlay-sidebar-content {
diff --git a/src/wp-admin/css/themes.css b/src/wp-admin/css/themes.css
index 988db99..6b6ef59 100644
--- a/src/wp-admin/css/themes.css
+++ b/src/wp-admin/css/themes.css
@@ -1285,7 +1285,7 @@ body.full-overlay-active {
        left: 0;
        right: 0;
        height: 45px;
-       padding: 0 15px;
+       padding: 0;
        line-height: 45px;
        z-index: 10;
        margin: 0;
diff --git a/src/wp-admin/customize.php b/src/wp-admin/customize.php
index 7f667d3..0591f6b 100644
--- a/src/wp-admin/customize.php
+++ b/src/wp-admin/customize.php
@@ -53,6 +53,7 @@ add_action( 'customize_controls_print_styles',         'print_admin_styles', 20
 do_action( 'customize_controls_init' );
 
 wp_enqueue_script( 'customize-controls' );
+wp_enqueue_script( 'common' );
 wp_enqueue_style( 'customize-controls' );
 
 /**
diff --git a/src/wp-admin/js/customize-controls.js b/src/wp-admin/js/customize-controls.js
index a22aa76..4426be1 100644
--- a/src/wp-admin/js/customize-controls.js
+++ b/src/wp-admin/js/customize-controls.js
@@ -3355,11 +3355,19 @@
                                                                self.save();
                                                                self.preview.iframe.show();
                                                        } );
+                                               } else if( response && response.error_code != undefined ){
+                                                       // inject the error notification div 
+                                                       var template = wp.template('error-notification');
+                                                       $( '#customize-header-actions' ).append( template( response ) );
+
+                                                       // trigger the event that make notices dismissible
+                                                       $(document).trigger( 'wp-plugin-update-error' );
                                                }
                                                api.trigger( 'error', response );
                                        } );
 
                                        request.done( function( response ) {
                                                // Clear setting dirty states
                                                api.each( function ( value ) {
                                                        value._dirty = false;
diff --git a/src/wp-includes/class-wp-customize-manager.php b/src/wp-includes/class-wp-customize-manager.php
index ea30b93..714d3cf 100644
--- a/src/wp-includes/class-wp-customize-manager.php
+++ b/src/wp-includes/class-wp-customize-manager.php
@@ -301,6 +301,7 @@ final class WP_Customize_Manager {
                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_panel_templates' ), 1 );
                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_section_templates' ), 1 );
                add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_control_templates' ), 1 );
+               add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_error_notification_templates' ), 1 );
 
                // Export the settings to JS via the _wpCustomizeSettings variable.
                add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
@@ -2181,6 +2182,32 @@ final class WP_Customize_Manager {
                                'type'       => 'dropdown-pages',
                        ) );
                }
+
+               // This is only for demonstration purpose
+               $this->add_section( 'test-errors', array(
+                       'title'          => __( 'Test error notification' ),
+                       'priority'       => 10,
+               ) );
+               $this->add_setting( 'test_errors_trigger', array(
+                       'type'          => 'option',
+                       'transport'     => 'postMessage',
+               ) );
+               $this->add_control( 'test_errors_trigger', array(
+                       'label'    => __( 'Enter a message to trigger an error' ),
+                       'setting'  => 'test_errors_trigger',
+                       'section'  => 'test-errors',
+               ) );
+
+               add_filter( 'pre_update_option_test_errors_trigger', function($value){
+                       // if an error message has been entered, trigger the test error
+                       if( trim($value) != '' ){
+                               wp_send_json_error( array(
+                                       'error_code' => 'test-error-code',
+                                       'error_message' => $value,
+                               ) );
+                       }
+                       return $value;
+               });
        }
 
        /**
@@ -2236,6 +2263,17 @@ final class WP_Customize_Manager {
        public function _render_custom_logo_partial() {
                return get_custom_logo();
        }
+       
+       public function render_error_notification_templates(){
+               ?><script type="text/html" id="tmpl-error-notification">
+                       <div class="notice is-dismissible error {{ data.error_code }}">
+                               <p>{{ data.error_message }}</p>
+                               <button type="button" class="notice-dismiss">
+                                       <span class="screen-reader-text"><?php _e( 'Dismiss this notice' ); ?>.</span>
+                               </button>
+                       </div>
+               </script><?php
+       }
 }
 
 /**
-- 
2.2.2