Changeset 41374 for trunk/src/wp-admin/customize.php

Timestamp:

09/12/2017 07:02:49 AM (7 years ago)

Author:

westonruter

Message:

Customize: Add global notifications area.

• Displays an error notification in the global area when a save attempt is rejected due to invalid settings. An error notification is also displayed when saving fails due to a network error or server error.
• Introduces wp.customize.Notifications subclass of wp.customize.Values to contain instances of wp.customize.Notification and manage their rendering into a container.
• Exposes the global notification area as wp.customize.notifications collection instance.
• Updates the notifications object on Control to use Notifications rather than Values and to re-use the rendering logic from the former. The old Control#renderNotifications method is deprecated.
• Allows notifications to be dismissed by instantiating them with a dismissible property.
• Allows wp.customize.Notification to be extended with custom templates and render functions.
• Triggers a removed event on wp.customize.Values instances _after_ a value has been removed from the collection.

Props delawski, westonruter, karmatosed, celloexpressions, Fab1en, melchoyce, Kelderic, afercia, adamsilverstein.
See #34893, #39896.
Fixes #35210, #31582, #37727, #37269.

File:

• trunk/src/wp-admin/customize.php (modified) (1 diff)

trunk/src/wp-admin/customize.php

@@ -152 +152 @@
 
         <div id="widgets-right" class="wp-clearfix"><!-- For Widget Customizer, many widgets try to look for instances under div#widgets-right, so we have to add that ID to a container div in the Customizer for compat -->
-        <div class="wp-full-overlay-sidebar-content" tabindex="-1">
-            <div id="customize-info" class="accordion-section customize-info">
-                <div class="accordion-section-title">
-                    <span class="preview-notice"><?php
-                        echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
-                    ?></span>
-                    <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+            <div id="customize-notifications-area" class="customize-control-notifications-container">
+                <ul></ul>
+            </div>
+            <div class="wp-full-overlay-sidebar-content" tabindex="-1">
+                <div id="customize-info" class="accordion-section customize-info">
+                    <div class="accordion-section-title">
+                        <span class="preview-notice"><?php
+                            echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
+                        ?></span>
+                        <button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
+                    </div>
+                    <div class="customize-panel-description"><?php
+                        _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements.' );
+                    ?></div>
                 </div>
-                <div class="customize-panel-description"><?php
-                    _e( 'The Customizer allows you to preview changes to your site before publishing them. You can navigate to different pages on your site within the preview. Edit shortcuts are shown for some editable elements.' );
-                ?></div>
+
+                <div id="customize-theme-controls">
+                    <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
+                </div>
             </div>
-
-            <div id="customize-theme-controls">
-                <ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
-            </div>
-        </div>
         </div>