vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-12 04:40:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Customize: Add infrastructure for trashing/reverting of unpublished changes; introduce full-screen OverlayNotification for trashing and theme install/preview.

Browse Source 
* Introduce a new `wp.customize.previewer.trash()` JS API to trash the current changeset, along with logic to `WP_Customize_Manager` to handle deleting changeset drafts.
* Add `trashing` to `wp.customize.state` which is then used to update the UI.
* UI for trashing is pending design feedback. One possibility is to add a new trash button to Publish Settings section that invokes `wp.customize.previewer.trash()`.
* Improve logic for managing the visibility and disabled states for publish buttons.
* Prevent attempting `requestChangesetUpdate` while processing and bump processing while doing `save`.
* Update `changeset_date` state only if sent in save response.
* Merge `ThemesSection#loadThemePreview()` into `ThemesPanel#loadThemePreview()`.
* Remove unused `autosaved` state.
* Start autosaving and prompting at beforeunload after a change first happens. This is key for theme previews since even if a user did not make any changes, there were still dirty settings which would get stored in an auto-draft unexpectedly.
* Allow `Notification` to accept additional `classes` to be added to `container`.
* Introduce `OverlayNotification` and use for theme installing, previewing, and trashing. Such overlay notifications take over the entire window.

Props westonruter, celloexpressions.
See #37661, #39896, #21666, #35210.


git-svn-id: https://develop.svn.wordpress.org/trunk@41667 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter
2017-10-02 03:36:18 +00:00
parent 8db1a09d09
commit 3fbb8ed287
8 changed files with 448 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-admin/css/customize-controls.css
+65 -39
View File
@@ -29,11 +29,13 @@ body {
margin-top: 9px;
}
body:not(.ready) #customize-save-button-wrapper .save {
visibility: hidden;
}
#customize-save-button-wrapper .save {
float: left;
border-radius: 3px;
box-shadow: none; /* @todo Adjust box shadow based on the disable states of paired button. */
display: none; /* Shown when ready. */
margin-top: 0;
}
#customize-save-button-wrapper .save.has-next-sibling {
@@ -106,18 +108,24 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
font-size: 14px;
width: 30px;
float: left;
display: none; /* Shown when ready. */
-webkit-transform: none;
transform: none;
margin-top: 0;
}
body:not(.ready) #publish-settings,
body.trashing #customize-save-button-wrapper .save,
body.trashing #publish-settings {
display: none;
}
#customize-header-actions .spinner {
margin-top: 13px;
margin-right: 4px;
}
.saving #customize-header-actions .spinner {
.saving #customize-header-actions .spinner,
.trashing #customize-header-actions .spinner {
visibility: visible;
}
@@ -147,6 +155,23 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
padding-right: 12px;
}
#customize-control-trash_changeset {
margin-top: 20px;
}
#customize-control-trash_changeset button {
position: relative;
padding-left: 24px;
display: inline-block;
}
#customize-control-trash_changeset button:before {
content: "\f182";
font: normal 22px dashicons;
text-decoration: none;
position: absolute;
left: 0;
top: -2px;
}
#customize-controls .date-input:invalid {
border-color: red;
}
@@ -1126,6 +1151,43 @@ p.customize-section-description {
margin-top: 1px;
}
@-webkit-keyframes customize-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes customize-fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
#customize-controls .notice.notification-overlay,
#customize-controls #customize-notifications-area .notice.notification-overlay {
margin: 0;
border-left: 0; /* @todo Appropriate styles could be added for notice-error, notice-warning, notice-success, etc */
}
#customize-controls .customize-control-notifications-container.has-overlay-notifications {
-webkit-animation: customize-fade-in 0.5s;
animation: customize-fade-in 0.5s;
z-index: 30;
}
/* Note: Styles for this are also defined in themes.css */
#customize-controls #customize-notifications-area .notice.notification-overlay .notification-message {
clear: both;
color: #191e23;
font-size: 18px;
font-style: normal;
margin: 0;
padding: 2em 0;
text-align: center;
width: 100%;
display: block;
top: 50%;
position: relative;
}
/* Style for custom settings */
/**
@@ -1550,40 +1612,6 @@ p.customize-section-description {
* Themes
*/
@-webkit-keyframes customize-reload {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes customize-reload {
0% { opacity: 0; }
100% { opacity: 1; }
}
.wp-customizer .customize-loading #customize-themes-loading-container {
display: block;
-webkit-animation: customize-reload .5s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .5s;
}
.customize-loading #customize-themes-loading-container span {
clear: both;
color: #191e23;
font-size: 18px;
font-style: normal;
margin: 0;
padding: 2em 0;
text-align: center;
width: 100%;
display: block;
top: 50%;
position: relative;
}
.customize-loading #customize-themes-loading-container .customize-loading-text {
display: none;
}
#customize-theme-controls .control-panel-themes {
border-bottom: none;
}
@@ -1673,8 +1701,6 @@ p.customize-section-description {
transition: .18s bottom ease-in-out;
}
.in-themes-panel:not(.animating) #customize-header-actions .save,
.in-themes-panel:not(.animating) #customize-header-actions #publish-settings,
.in-themes-panel:not(.animating) #customize-header-actions .spinner,
.in-themes-panel:not(.animating) #customize-header-actions .customize-controls-preview-toggle,
.in-themes-panel:not(.animating) #customize-preview,
src/wp-admin/css/themes.css
+6 -5
View File
@@ -1707,8 +1707,7 @@ body.full-overlay-active {
}
#customize-container,
#customize-themes-loading-container {
display: none;
#customize-controls .notice.notification-overlay {
background: #eee;
z-index: 500000;
position: fixed;
@@ -1719,10 +1718,12 @@ body.full-overlay-active {
right: 0;
height: 100%;
}
#customize-container {
display: none;
}
/* Make the Customizer and Theme installer overlays the only available content. */
#customize-container,
#customize-themes-loading-container,
.theme-install-overlay {
visibility: visible;
}
@@ -1827,7 +1828,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
#customize-controls .notice.notification-overlay.notification-loading:before,
.theme-install-overlay .wp-full-overlay-main:before {
content: "";
display: block;
@@ -1865,7 +1866,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
#customize-controls .notice.notification-overlay.notification-loading:before,
.theme-install-overlay .wp-full-overlay-main:before {
background-image: url(../images/spinner-2x.gif);
}