Skip to content

Commit 594a416

Browse files
westonruterwestonruter
committed
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. git-svn-id: https://develop.svn.wordpress.org/trunk@41374 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 8448761 commit 594a416

10 files changed

Lines changed: 557 additions & 59 deletions

File tree

‎src/wp-admin/css/customize-controls.css‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -766,7 +766,6 @@ p.customize-section-description {
766766
#customize-controls .customize-control-notifications-container { /* Scoped to #customize-controls for specificity over notification styles in common.css. */
767767
margin: 4px 0 8px 0;
768768
padding: 0;
769-
display: none;
770769
cursor: default;
771770
}
772771

@@ -798,6 +797,33 @@ p.customize-section-description {
798797
outline: 2px solid #dc3232;
799798
}
800799

800+
#customize-controls #customize-notifications-area {
801+
position: absolute;
802+
top: 46px;
803+
width: 100%;
804+
max-height: 210px;
805+
overflow-x: hidden;
806+
overflow-y: auto;
807+
border-bottom: 1px solid #ddd;
808+
display: block;
809+
padding: 0;
810+
margin: 0;
811+
}
812+
813+
#customize-controls #customize-notifications-area > ul,
814+
#customize-controls #customize-notifications-area .notice {
815+
margin: 0;
816+
}
817+
#customize-controls #customize-notifications-area .notice {
818+
padding: 9px 14px;
819+
}
820+
#customize-controls #customize-notifications-area .notice.is-dismissible {
821+
padding-right: 38px;
822+
}
823+
#customize-controls #customize-notifications-area .notice + .notice {
824+
margin-top: 1px;
825+
}
826+
801827
/* Style for custom settings */
802828

803829
/**

‎src/wp-admin/customize.php‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -151,24 +151,27 @@
151151
</div>
152152

153153
<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 -->
154-
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
155-
<div id="customize-info" class="accordion-section customize-info">
156-
<div class="accordion-section-title">
157-
<span class="preview-notice"><?php
158-
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
159-
?></span>
160-
<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
161-
</div>
162-
<div class="customize-panel-description"><?php
163-
_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.' );
164-
?></div>
154+
<div id="customize-notifications-area" class="customize-control-notifications-container">
155+
<ul></ul>
165156
</div>
157+
<div class="wp-full-overlay-sidebar-content" tabindex="-1">
158+
<div id="customize-info" class="accordion-section customize-info">
159+
<div class="accordion-section-title">
160+
<span class="preview-notice"><?php
161+
echo sprintf( __( 'You are customizing %s' ), '<strong class="panel-title site-title">' . get_bloginfo( 'name', 'display' ) . '</strong>' );
162+
?></span>
163+
<button type="button" class="customize-help-toggle dashicons dashicons-editor-help" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
164+
</div>
165+
<div class="customize-panel-description"><?php
166+
_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.' );
167+
?></div>
168+
</div>
166169

167-
<div id="customize-theme-controls">
168-
<ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
170+
<div id="customize-theme-controls">
171+
<ul class="customize-pane-parent"><?php // Panels and sections are managed here via JavaScript ?></ul>
172+
</div>
169173
</div>
170174
</div>
171-
</div>
172175

173176
<div id="customize-footer-actions" class="wp-full-overlay-footer">
174177
<button type="button" class="collapse-sidebar button" aria-expanded="true" aria-label="<?php echo esc_attr( _x( 'Hide Controls', 'label for hide controls button without length constraints' ) ); ?>">

0 commit comments

Comments
 (0)