Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Customize: Introduce a new experience for discovering, installing, and previewing themes within the customizer. 

Unify the theme-browsing and theme-customization experiences by introducing a comprehensive theme browser and installer directly accessible in the customizer. Replaces the customizer theme switcher with a full-screen panel for discovering/browsing and installing themes available on WordPress.org. Themes can now be installed and previewed directly in the customizer without entering the wp-admin context. Also includes an extensible framework for browsing and installing themes from other sources.

Also includes CSS auto-prefixing added via `grunt precommit:css`.

For details, see: https://make.wordpress.org/core/2016/10/03/feature-proposal-a-new-experience-for-discovering-installing-and-previewing-themes-in-the-customizer/

Previously [38813] but reverted in [39140].
Fixes #37661, #34843, #38666.
Props celloexpressions, folletto, westonruter, karmatosed, melchoyce, afercia.

Built from https://develop.svn.wordpress.org/trunk@41648


git-svn-id: http://core.svn.wordpress.org/trunk@41482 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter 2017-09-29 20:13:50 +00:00
parent fb30317bad
commit 76f590b99b
42 changed files with 2711 additions and 534 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
wp-admin/css/common-rtl.css
View File

@ -123,6 +123,7 @@
.ui-helper-hidden-accessible {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-admin/css/common-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/common.css
View File

@ -123,6 +123,7 @@
.ui-helper-hidden-accessible {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-admin/css/common.min.css vendored
View File

File diff suppressed because one or more lines are too long

637
wp-admin/css/customize-controls-rtl.css
View File

@ -589,20 +589,16 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
}
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
#customize-theme-controls .customize-pane-child.current-panel {
-webkit-transform: none;
transform: none;
}
#customize-theme-controls .customize-themes-panel.customize-pane-child,
.section-open #customize-theme-controls .customize-pane-parent,
.in-sub-panel #customize-theme-controls .customize-pane-parent,
.section-open #customize-info,
.in-sub-panel #customize-info,
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
visibility: hidden;
height: 0;
overflow: hidden;
@ -612,10 +608,8 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
.section-open #customize-theme-controls .customize-pane-parent.busy,
.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
.section-open #customize-info.busy,
.in-sub-panel #customize-info.busy,
.in-themes-panel #customize-info.busy,
.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
@ -625,12 +619,6 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
overflow: auto;
}
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
#customize-theme-controls .customize-pane-child.accordion-section-content,
#customize-theme-controls .customize-pane-child.accordion-sub-container {
display: block;
@ -1572,37 +1560,45 @@ p.customize-section-description {
100% { opacity: 1; }
}
/* #customize-container is reused from customize-loader.js, hence the naming. */
.wp-customizer .customize-loading #customize-container {
.wp-customizer .customize-loading #customize-themes-loading-container {
display: block;
-webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .75s;
-webkit-animation: customize-reload .5s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .5s;
}
#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes .accordion-section-title {
.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;
}
#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-panel-themes > .accordion-section-title {
cursor: default;
background: #fff;
color: #555d66;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: none;
margin-top: 0;
}
#customize-theme-controls .control-section-themes .customize-section-back {
position: absolute;
left: 0;
top: 0;
height: 80px;
border-right: 1px solid #ddd;
border-left: 4px solid #fff;
}
#customize-theme-controls .control-section-themes .customize-section-back:before {
content: "\f341";
}
#customize-theme-controls .control-section-themes .customize-section-back:hover,
#customize-theme-controls .control-section-themes .customize-section-back:focus {
border-left-color: #0073aa;
border-left: none;
margin: 0 0 15px 0;
padding-left: 100px; /* Space for the button */
}
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
@ -1625,6 +1621,8 @@ p.customize-section-description {
padding-left: 100px; /* Space for the button */
}
.control-panel-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action,
#customize-controls .control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action,
#customize-outer-theme-controls .customize-section-title span.customize-action {
@ -1633,8 +1631,7 @@ p.customize-section-description {
font-weight: 400;
}
#customize-controls .control-section-themes .accordion-section-title .change-theme,
#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
position: absolute;
left: 10px;
top: 50%;
@ -1642,36 +1639,253 @@ p.customize-section-description {
font-weight: 400;
}
#customize-controls .control-section-themes .accordion-section-title:before {
#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
display: none;
}
#customize-controls .customize-themes-panel {
padding: 0 8px;
background: #f1f1f1;
.control-panel-themes .customize-themes-full-container {
position: fixed;
top: 0;
right: 0;
transition: .18s right ease-in-out;
margin: 46px 300px 0 0;
padding: 25px 0;
overflow-y: scroll;
width: calc(100% - 300px);
height: calc(100% - 96px);
background: #eee;
z-index: 20;
}
/* Animations for opening the themes panel */
#customize-header-actions .save,
#customize-header-actions .spinner,
#customize-header-actions .customize-controls-preview-toggle {
position: relative;
top: 0;
transition: .18s top ease-in-out;
}
#customize-footer-actions,
#customize-footer-actions .collapse-sidebar {
bottom: 0;
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,
.in-themes-panel:not(.animating) #customize-footer-actions {
visibility: hidden;
}
.wp-full-overlay.in-themes-panel {
background: #eee; /* Prevents a black flash when fading in the panel */
}
.in-themes-panel #customize-header-actions .save,
.in-themes-panel #customize-header-actions .spinner,
.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
top: -45px;
}
.in-themes-panel #customize-footer-actions,
.in-themes-panel #customize-footer-actions .collapse-sidebar {
bottom: -45px;
}
/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
.in-themes-panel.animating .control-panel-themes .filter-themes-count {
display: none;
}
.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
bottom: 0;
}
.themes-filter-bar .feature-filter-toggle {
float: left;
margin: 3px 25px 3px 0;
}
.themes-filter-bar .feature-filter-toggle:before {
content: "\f111";
margin: 0 0 0 5px;
font: normal 16px/1 dashicons;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.themes-filter-bar .feature-filter-toggle.open {
background: #eee;
border-color: #999;
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.themes-filter-bar .feature-filter-toggle .filter-count-filters {
display: none;
}
.themes-filter-bar .filter-drawer {
box-sizing: border-box;
width: 100%;
position: absolute;
top: 46px;
right: 0;
padding: 25px 25px 25px 0;
border-top: 0;
margin: 0;
background: #eee;
border-bottom: 1px solid #ddd;
}
#customize-controls .customize-themes-panel .accordion-section-title:first-child {
margin-top: 0;
.themes-filter-bar .filter-group {
margin: 0 0 0 25px;
width: calc( (100% - 75px) / 3);
min-width: 200px;
max-width: 320px;
}
#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
/* Adds a delay before fading in to avoid it "jumping" */
@-webkit-keyframes themes-fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes themes-fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.control-panel-themes .customize-themes-full-container.animate {
-webkit-animation: .6s themes-fade-in 1;
animation: .6s themes-fade-in 1;
}
.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
-webkit-animation: .6s themes-fade-in 1;
animation: .6s themes-fade-in 1;
}
.control-panel-themes .filter-themes-count {
position: relative;
float: left;
line-height: 34px;
}
.control-panel-themes .filter-themes-count .themes-displayed {
font-weight: 600;
color: #555d66;
}
.customize-themes-notifications {
margin: 0;
}
.control-panel-themes .customize-themes-notifications .notice {
margin: 0 0 25px 0;
}
.customize-themes-full-container .customize-themes-section {
display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
overflow: hidden;
}
.customize-themes-full-container .customize-themes-section.current-section {
display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
}
.control-section .customize-section-text-before {
padding: 0 15px 8px 0;
margin: 15px 0 0 0;
line-height: 16px;
border-bottom: 1px solid #ddd;
color: #555d66;
}
.control-panel-themes .customize-themes-section-title {
width: 100%;
background: #fff;
box-shadow: none;
outline: none;
border-top: none;
border-bottom: 1px solid #ddd;
border-right: 4px solid #fff;
border-left: none;
cursor: pointer;
padding: 10px 15px;
position: relative;
text-align: right;
font-size: 14px;
font-weight: 600;
color: #555d66;
text-shadow: none;
}
#customize-controls .customize-themes-panel > h2 {
padding: 15px 8px 0 8px;
.control-panel-themes #accordion-section-installed_themes {
border-top: 1px solid #ddd;
}
#customize-theme-controls .customize-themes-panel .accordion-section-content {
background: transparent;
.control-panel-themes .theme-section {
margin: 0;
position: relative;
}
.control-panel-themes .customize-themes-section-title:focus,
.control-panel-themes .customize-themes-section-title:hover {
border-right-color: #0073aa;
color: #0073aa;
background: #f5f5f5;
}
.customize-themes-section-title:not(.selected):after {
content: "";
display: block;
position: absolute;
top: 9px;
left: 15px;
width: 18px;
height: 18px;
border-radius: 100%;
border: 1px solid #ccc;
background: #fff;
}
.customize-control.customize-control-theme {
margin-bottom: 8px;
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
content: "\f147";
font: 16px/1 dashicons;
box-sizing: border-box;
width: 20px;
height: 20px;
padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
border-radius: 100%;
position: absolute;
top: 9px;
left: 15px;
background: #0073aa;
color: #fff;
}
.control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
#customize-theme-controls .themes.accordion-section-content {
@ -1681,17 +1895,94 @@ p.customize-section-description {
width: 100%;
}
.wp-customizer .theme-browser .themes {
padding-bottom: 8px;
.loading .customize-themes-section .spinner {
display: block;
visibility: visible;
position: relative;
clear: both;
width: 20px;
height: 20px;
right: calc(50% - 10px);
float: none;
margin-top: 50px;
}
.wp-customizer .theme-browser .theme {
margin: 0;
.customize-themes-section .no-themes,
.customize-themes-section .no-themes-local {
display: none;
}
.themes-section-installed_themes .theme .notice-success {
display: none; /* Hide "installed" notice on installed themes tab. */
}
.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
margin: 0 8px 0 0;
}
.customize-control-theme .theme {
width: 100%;
margin: 0;
border: 1px solid #ddd;
background: #fff;
}
.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
background: #fff;
border: none;
}
.customize-control.customize-control-theme { /* override most properties on .customize-control */
box-sizing: border-box;
width: 25%;
max-width: 600px; /* Max. screenshot size / 2 */
margin: 0 0 25px 25px;
padding: 0;
clear: none;
}
/* 5 columns above 2100px */
@media screen and (min-width: 2101px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
}
}
/* 4 columns up to 2100px */
@media screen and (min-width: 1601px) and (max-width: 2100px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 100px ) / 4 - 1px );
}
}
/* 3 columns up to 1600px */
@media screen and (min-width: 1201px) and (max-width: 1600px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 75px ) / 3 - 1px );
}
}
/* 2 columns up to 1200px */
@media screen and (min-width: 851px) and (max-width: 1200px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 50px ) / 2 - 1px );
}
}
/* 1 column up to 850 px */
@media screen and (max-width: 850px) {
.customize-control.customize-control-theme {
width: 100%;
}
}
.wp-customizer .theme-browser .themes {
padding: 0 25px 25px 0;
transition: .18s margin-top linear;
}
.wp-customizer .theme-browser .theme .theme-actions {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
@ -1703,20 +1994,161 @@ p.customize-section-description {
font-size: 32px;
}
.wp-customizer #themes-filter {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
width: 100%;
.customize-preview-header.themes-filter-bar {
position: fixed;
top: 0;
right: 300px;
width: calc(100% - 300px);
height: 46px;
background: #eee;
z-index: 10;
padding: 6px 25px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.control-section-themes .accordion-section-title:after,
.customize-themes-panel .accordion-section-title:after {
.themes-filter-bar .themes-filter-container {
margin: 0;
padding: 0;
}
.themes-filter-bar .wp-filter-search {
line-height: 25px;
padding: 3px 5px;
max-width: 100%;
width: 40%;
min-width: 300px;
position: absolute;
top: 6px;
right: 25px;
}
/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
current length of .org feature filters assuming translations do not wrap lines. */
@media screen and (max-height:540px), screen and (max-width:1018px) {
.customize-preview-header.themes-filter-bar {
position: relative;
right: 0;
width: 100%;
margin: 0 0 25px 0;
}
.wp-customizer .theme-browser .themes {
padding: 0 25px 25px 0;
overflow: hidden;
}
.control-panel-themes .customize-themes-full-container {
margin-top: 0;
padding: 0;
height: 100%;
width: calc(100% - 300px);
}
}
@media screen and (max-width:1018px) {
.themes-filter-bar .filter-group {
width: calc( (100% - 50px) / 2);
}
}
@media screen and (max-width:900px) {
.customize-preview-header.themes-filter-bar {
height: 86px;
padding-top: 46px;
}
.themes-filter-bar .wp-filter-search {
width: calc(100% - 50px);
margin: 0;
min-width: 200px;
}
.themes-filter-bar .filter-drawer {
top: 86px;
}
.control-panel-themes .filter-themes-count {
float: right;
}
}
@media screen and (max-width:792px) {
.themes-filter-bar .filter-group {
width: calc( 100% - 25px);
}
}
.control-panel-themes .customize-themes-mobile-back {
display: none;
}
.customize-themes-panel.control-panel-content {
border-top: 1px solid #ddd;
/* Mobile - toggle between themes and filters */
@media screen and (max-width:600px) {
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
display: block;
float: left;
}
.control-panel-themes .customize-themes-full-container {
width: 100%;
margin: 0;
top: 46px;
height: calc(100% - 46px);
z-index: 1;
display: none;
}
.showing-themes .control-panel-themes .customize-themes-full-container {
display: block;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
display: block;
position: fixed;
top: 0;
right: 0;
background: #eee;
color: #444;
border-radius: 0;
box-shadow: none;
border: none;
height: 46px;
width: 100%;
z-index: 10;
text-align: right;
text-shadow: none;
border-bottom: 1px solid #ddd;
border-right: 4px solid transparent;
margin: 0;
padding: 0;
font-size: 0;
overflow: hidden;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
right: 0;
top: 0;
height: 42px;
width: 26px;
display: block;
line-height: 46px;
padding: 0 8px 0 8px;
border-left: 1px solid #ddd;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
color: #0073aa;
background: #f3f3f5;
border-right-color: #0073aa;
outline: none;
box-shadow: none;
}
.showing-themes #customize-header-actions {
display: none;
}
}
/* Details View */
@ -1733,29 +2165,90 @@ p.customize-section-description {
z-index: 109;
}
/* Avoid a z-index war by resetting elements that should be under the overlay.
This is likely required because of the way that sections and panels are positioned. */
.wp-customizer.modal-open #customize-header-actions,
.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
z-index: -1;
}
.wp-customizer .theme-overlay .theme-backdrop {
background: rgba( 238, 238, 238, 0.75 );
position: fixed;
z-index: 110;
}
.wp-customizer .theme-overlay .star-rating {
float: right;
margin-left: 8px;
}
.wp-customizer .theme-rating .num-ratings {
line-height: 20px;
}
.wp-customizer .theme-overlay .theme-wrap {
right: 90px;
left: 90px;
top: 45px;
bottom: 45px;
z-index: 120;
max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
}
.wp-customizer .theme-overlay .theme-actions {
text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
text-align: left; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
padding: 10px 25px;
background: #eee;
border-top: 1px solid #ddd;
}
.ie8 .wp-customizer .theme-overlay .theme-header,
.ie8 .wp-customizer .theme-overlay .theme-about,
.ie8 .wp-customizer .theme-overlay .theme-actions {
position: static;
.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
margin-right: 8px;
}
.control-panel-themes .theme-actions .delete-theme {
right: 15px; /* these override themes.css on mobile */
left: auto;
bottom: auto;
position: absolute;
}
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
.wp-customizer .theme-header {
background: #eee;
}
.wp-customizer .theme-overlay .theme-header button,
.wp-customizer .theme-overlay .theme-header .close:before {
color: #444;
}
.wp-customizer .theme-overlay .theme-header .close:focus,
.wp-customizer .theme-overlay .theme-header .close:hover,
.wp-customizer .theme-overlay .theme-header .right:focus,
.wp-customizer .theme-overlay .theme-header .right:hover,
.wp-customizer .theme-overlay .theme-header .left:focus,
.wp-customizer .theme-overlay .theme-header .left:hover {
background: #fff;
border-bottom: 4px solid #0073aa;
color: #0073aa;
}
.wp-customizer .theme-overlay .theme-header .close:focus:before,
.wp-customizer .theme-overlay .theme-header .close:hover:before {
color: #0073aa;
}
.wp-customizer .theme-overlay .theme-header button.disabled,
.wp-customizer .theme-overlay .theme-header button.disabled:hover,
.wp-customizer .theme-overlay .theme-header button.disabled:focus {
border-bottom: none;
background: transparent;
color: #ccc;
}
/* Small Screens */
@ -1783,7 +2276,7 @@ body.cheatin {
body.cheatin h1 {
border-bottom: 1px solid #ddd;
clear: both;
color: #666;
color: #555d66;
font-size: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 30px 0 0 0;

2
wp-admin/css/customize-controls-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

637
wp-admin/css/customize-controls.css
View File

@ -589,20 +589,16 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
}
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-themes-panel.customize-pane-child.current-panel {
#customize-theme-controls .customize-pane-child.current-panel {
-webkit-transform: none;
transform: none;
}
#customize-theme-controls .customize-themes-panel.customize-pane-child,
.section-open #customize-theme-controls .customize-pane-parent,
.in-sub-panel #customize-theme-controls .customize-pane-parent,
.section-open #customize-info,
.in-sub-panel #customize-info,
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel,
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
.in-sub-panel.section-open #customize-theme-controls .customize-pane-child.current-panel {
visibility: hidden;
height: 0;
overflow: hidden;
@ -612,10 +608,8 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
.section-open #customize-theme-controls .customize-pane-parent.busy,
.in-sub-panel #customize-theme-controls .customize-pane-parent.busy,
.in-themes-panel #customize-theme-controls .customize-pane-parent.busy,
.section-open #customize-info.busy,
.in-sub-panel #customize-info.busy,
.in-themes-panel #customize-info.busy,
.busy.section-open.in-sub-panel #customize-theme-controls .customize-pane-child.current-panel,
#customize-theme-controls .customize-pane-child.open,
#customize-theme-controls .customize-pane-child.current-panel,
@ -625,12 +619,6 @@ body.outer-section-open .wp-full-overlay.expanded .wp-full-overlay-main {
overflow: auto;
}
.in-themes-panel #customize-theme-controls .customize-pane-parent,
.in-themes-panel #customize-info {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
#customize-theme-controls .customize-pane-child.accordion-section-content,
#customize-theme-controls .customize-pane-child.accordion-sub-container {
display: block;
@ -1572,37 +1560,45 @@ p.customize-section-description {
100% { opacity: 1; }
}
/* #customize-container is reused from customize-loader.js, hence the naming. */
.wp-customizer .customize-loading #customize-container {
.wp-customizer .customize-loading #customize-themes-loading-container {
display: block;
-webkit-animation: customize-reload .75s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .75s;
-webkit-animation: customize-reload .5s; /* Can't use `transition` because `display` changes here. */
animation: customize-reload .5s;
}
#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-section-themes .accordion-section-title {
.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;
}
#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, /* Not a focusable element. */
#customize-theme-controls .control-panel-themes > .accordion-section-title {
cursor: default;
background: #fff;
color: #555d66;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: none;
margin-top: 0;
}
#customize-theme-controls .control-section-themes .customize-section-back {
position: absolute;
right: 0;
top: 0;
height: 80px;
border-left: 1px solid #ddd;
border-right: 4px solid #fff;
}
#customize-theme-controls .control-section-themes .customize-section-back:before {
content: "\f345";
}
#customize-theme-controls .control-section-themes .customize-section-back:hover,
#customize-theme-controls .control-section-themes .customize-section-back:focus {
border-right-color: #0073aa;
border-right: none;
margin: 0 0 15px 0;
padding-right: 100px; /* Space for the button */
}
#customize-theme-controls .control-section-themes .customize-themes-panel .accordion-section-title:first-child:hover, /* Not a focusable element. */
@ -1625,6 +1621,8 @@ p.customize-section-description {
padding-right: 100px; /* Space for the button */
}
.control-panel-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action,
#customize-controls .control-section-themes .accordion-section-title span.customize-action,
#customize-controls .customize-section-title span.customize-action,
#customize-outer-theme-controls .customize-section-title span.customize-action {
@ -1633,8 +1631,7 @@ p.customize-section-description {
font-weight: 400;
}
#customize-controls .control-section-themes .accordion-section-title .change-theme,
#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
#customize-theme-controls .control-panel-themes .accordion-section-title .change-theme {
position: absolute;
right: 10px;
top: 50%;
@ -1642,36 +1639,253 @@ p.customize-section-description {
font-weight: 400;
}
#customize-controls .control-section-themes .accordion-section-title:before {
#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
display: none;
}
#customize-controls .customize-themes-panel {
padding: 0 8px;
background: #f1f1f1;
.control-panel-themes .customize-themes-full-container {
position: fixed;
top: 0;
left: 0;
transition: .18s left ease-in-out;
margin: 46px 0 0 300px;
padding: 25px 0;
overflow-y: scroll;
width: calc(100% - 300px);
height: calc(100% - 96px);
background: #eee;
z-index: 20;
}
/* Animations for opening the themes panel */
#customize-header-actions .save,
#customize-header-actions .spinner,
#customize-header-actions .customize-controls-preview-toggle {
position: relative;
top: 0;
transition: .18s top ease-in-out;
}
#customize-footer-actions,
#customize-footer-actions .collapse-sidebar {
bottom: 0;
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,
.in-themes-panel:not(.animating) #customize-footer-actions {
visibility: hidden;
}
.wp-full-overlay.in-themes-panel {
background: #eee; /* Prevents a black flash when fading in the panel */
}
.in-themes-panel #customize-header-actions .save,
.in-themes-panel #customize-header-actions .spinner,
.in-themes-panel #customize-header-actions .customize-controls-preview-toggle {
top: -45px;
}
.in-themes-panel #customize-footer-actions,
.in-themes-panel #customize-footer-actions .collapse-sidebar {
bottom: -45px;
}
/* Don't show the theme count while the panel opens, as it's in the wrong place during the animation */
.in-themes-panel.animating .control-panel-themes .filter-themes-count {
display: none;
}
.in-themes-panel.wp-full-overlay .wp-full-overlay-sidebar-content {
bottom: 0;
}
.themes-filter-bar .feature-filter-toggle {
float: right;
margin: 3px 0 3px 25px;
}
.themes-filter-bar .feature-filter-toggle:before {
content: "\f111";
margin: 0 5px 0 0;
font: normal 16px/1 dashicons;
vertical-align: text-bottom;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.themes-filter-bar .feature-filter-toggle.open {
background: #eee;
border-color: #999;
box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
-webkit-transform: translateY(1px);
transform: translateY(1px);
}
.themes-filter-bar .feature-filter-toggle .filter-count-filters {
display: none;
}
.themes-filter-bar .filter-drawer {
box-sizing: border-box;
width: 100%;
position: absolute;
top: 46px;
left: 0;
padding: 25px 0 25px 25px;
border-top: 0;
margin: 0;
background: #eee;
border-bottom: 1px solid #ddd;
}
#customize-controls .customize-themes-panel .accordion-section-title:first-child {
margin-top: 0;
.themes-filter-bar .filter-group {
margin: 0 25px 0 0;
width: calc( (100% - 75px) / 3);
min-width: 200px;
max-width: 320px;
}
#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
/* Adds a delay before fading in to avoid it "jumping" */
@-webkit-keyframes themes-fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes themes-fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.control-panel-themes .customize-themes-full-container.animate {
-webkit-animation: .6s themes-fade-in 1;
animation: .6s themes-fade-in 1;
}
.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
-webkit-animation: .6s themes-fade-in 1;
animation: .6s themes-fade-in 1;
}
.control-panel-themes .filter-themes-count {
position: relative;
float: right;
line-height: 34px;
}
.control-panel-themes .filter-themes-count .themes-displayed {
font-weight: 600;
color: #555d66;
}
.customize-themes-notifications {
margin: 0;
}
.control-panel-themes .customize-themes-notifications .notice {
margin: 0 0 25px 0;
}
.customize-themes-full-container .customize-themes-section {
display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
overflow: hidden;
}
.customize-themes-full-container .customize-themes-section.current-section {
display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */
}
.control-section .customize-section-text-before {
padding: 0 0 8px 15px;
margin: 15px 0 0 0;
line-height: 16px;
border-bottom: 1px solid #ddd;
color: #555d66;
}
.control-panel-themes .customize-themes-section-title {
width: 100%;
background: #fff;
box-shadow: none;
outline: none;
border-top: none;
border-bottom: 1px solid #ddd;
border-left: 4px solid #fff;
border-right: none;
cursor: pointer;
padding: 10px 15px;
position: relative;
text-align: left;
font-size: 14px;
font-weight: 600;
color: #555d66;
text-shadow: none;
}
#customize-controls .customize-themes-panel > h2 {
padding: 15px 8px 0 8px;
.control-panel-themes #accordion-section-installed_themes {
border-top: 1px solid #ddd;
}
#customize-theme-controls .customize-themes-panel .accordion-section-content {
background: transparent;
.control-panel-themes .theme-section {
margin: 0;
position: relative;
}
.control-panel-themes .customize-themes-section-title:focus,
.control-panel-themes .customize-themes-section-title:hover {
border-left-color: #0073aa;
color: #0073aa;
background: #f5f5f5;
}
.customize-themes-section-title:not(.selected):after {
content: "";
display: block;
position: absolute;
top: 9px;
right: 15px;
width: 18px;
height: 18px;
border-radius: 100%;
border: 1px solid #ccc;
background: #fff;
}
.customize-control.customize-control-theme {
margin-bottom: 8px;
.control-panel-themes .theme-section .customize-themes-section-title.selected:after {
content: "\f147";
font: 16px/1 dashicons;
box-sizing: border-box;
width: 20px;
height: 20px;
padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
border-radius: 100%;
position: absolute;
top: 9px;
right: 15px;
background: #0073aa;
color: #fff;
}
.control-panel-themes .customize-themes-section-title.selected {
color: #0073aa;
}
#customize-theme-controls .themes.accordion-section-content {
@ -1681,17 +1895,94 @@ p.customize-section-description {
width: 100%;
}
.wp-customizer .theme-browser .themes {
padding-bottom: 8px;
.loading .customize-themes-section .spinner {
display: block;
visibility: visible;
position: relative;
clear: both;
width: 20px;
height: 20px;
left: calc(50% - 10px);
float: none;
margin-top: 50px;
}
.wp-customizer .theme-browser .theme {
margin: 0;
.customize-themes-section .no-themes,
.customize-themes-section .no-themes-local {
display: none;
}
.themes-section-installed_themes .theme .notice-success {
display: none; /* Hide "installed" notice on installed themes tab. */
}
.control-panel-themes .theme-browser .theme .theme-actions .button-primary {
margin: 0 0 0 8px;
}
.customize-control-theme .theme {
width: 100%;
margin: 0;
border: 1px solid #ddd;
background: #fff;
}
.customize-control-theme .theme .theme-name, .customize-control-theme .theme .theme-actions {
background: #fff;
border: none;
}
.customize-control.customize-control-theme { /* override most properties on .customize-control */
box-sizing: border-box;
width: 25%;
max-width: 600px; /* Max. screenshot size / 2 */
margin: 0 25px 25px 0;
padding: 0;
clear: none;
}
/* 5 columns above 2100px */
@media screen and (min-width: 2101px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 125px ) / 5 - 1px ); /* 1px offset accounts for browser rounding, typical all grids */
}
}
/* 4 columns up to 2100px */
@media screen and (min-width: 1601px) and (max-width: 2100px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 100px ) / 4 - 1px );
}
}
/* 3 columns up to 1600px */
@media screen and (min-width: 1201px) and (max-width: 1600px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 75px ) / 3 - 1px );
}
}
/* 2 columns up to 1200px */
@media screen and (min-width: 851px) and (max-width: 1200px) {
.customize-control.customize-control-theme {
width: calc( ( 100% - 50px ) / 2 - 1px );
}
}
/* 1 column up to 850 px */
@media screen and (max-width: 850px) {
.customize-control.customize-control-theme {
width: 100%;
}
}
.wp-customizer .theme-browser .themes {
padding: 0 0 25px 25px;
transition: .18s margin-top linear;
}
.wp-customizer .theme-browser .theme .theme-actions {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
opacity: 1;
}
@ -1703,20 +1994,161 @@ p.customize-section-description {
font-size: 32px;
}
.wp-customizer #themes-filter {
font-size: 16px;
font-weight: 300;
line-height: 1.5;
width: 100%;
.customize-preview-header.themes-filter-bar {
position: fixed;
top: 0;
left: 300px;
width: calc(100% - 300px);
height: 46px;
background: #eee;
z-index: 10;
padding: 6px 25px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.control-section-themes .accordion-section-title:after,
.customize-themes-panel .accordion-section-title:after {
.themes-filter-bar .themes-filter-container {
margin: 0;
padding: 0;
}
.themes-filter-bar .wp-filter-search {
line-height: 25px;
padding: 3px 5px;
max-width: 100%;
width: 40%;
min-width: 300px;
position: absolute;
top: 6px;
left: 25px;
}
/* Unstick the filter bar on short windows/screens. This breakpoint is based on the
current length of .org feature filters assuming translations do not wrap lines. */
@media screen and (max-height:540px), screen and (max-width:1018px) {
.customize-preview-header.themes-filter-bar {
position: relative;
left: 0;
width: 100%;
margin: 0 0 25px 0;
}
.wp-customizer .theme-browser .themes {
padding: 0 0 25px 25px;
overflow: hidden;
}
.control-panel-themes .customize-themes-full-container {
margin-top: 0;
padding: 0;
height: 100%;
width: calc(100% - 300px);
}
}
@media screen and (max-width:1018px) {
.themes-filter-bar .filter-group {
width: calc( (100% - 50px) / 2);
}
}
@media screen and (max-width:900px) {
.customize-preview-header.themes-filter-bar {
height: 86px;
padding-top: 46px;
}
.themes-filter-bar .wp-filter-search {
width: calc(100% - 50px);
margin: 0;
min-width: 200px;
}
.themes-filter-bar .filter-drawer {
top: 86px;
}
.control-panel-themes .filter-themes-count {
float: left;
}
}
@media screen and (max-width:792px) {
.themes-filter-bar .filter-group {
width: calc( 100% - 25px);
}
}
.control-panel-themes .customize-themes-mobile-back {
display: none;
}
.customize-themes-panel.control-panel-content {
border-top: 1px solid #ddd;
/* Mobile - toggle between themes and filters */
@media screen and (max-width:600px) {
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
display: block;
float: right;
}
.control-panel-themes .customize-themes-full-container {
width: 100%;
margin: 0;
top: 46px;
height: calc(100% - 46px);
z-index: 1;
display: none;
}
.showing-themes .control-panel-themes .customize-themes-full-container {
display: block;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back {
display: block;
position: fixed;
top: 0;
left: 0;
background: #eee;
color: #444;
border-radius: 0;
box-shadow: none;
border: none;
height: 46px;
width: 100%;
z-index: 10;
text-align: left;
text-shadow: none;
border-bottom: 1px solid #ddd;
border-left: 4px solid transparent;
margin: 0;
padding: 0;
font-size: 0;
overflow: hidden;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:before {
left: 0;
top: 0;
height: 42px;
width: 26px;
display: block;
line-height: 46px;
padding: 0 8px 0 8px;
border-right: 1px solid #ddd;
}
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:hover,
.wp-customizer .showing-themes .control-panel-themes .customize-themes-mobile-back:focus {
color: #0073aa;
background: #f3f3f5;
border-left-color: #0073aa;
outline: none;
box-shadow: none;
}
.showing-themes #customize-header-actions {
display: none;
}
}
/* Details View */
@ -1733,29 +2165,90 @@ p.customize-section-description {
z-index: 109;
}
/* Avoid a z-index war by resetting elements that should be under the overlay.
This is likely required because of the way that sections and panels are positioned. */
.wp-customizer.modal-open #customize-header-actions,
.wp-customizer.modal-open .control-panel-themes .filter-themes-count,
.wp-customizer.modal-open .control-panel-themes .customize-themes-section-title.selected:after {
z-index: -1;
}
.wp-customizer .theme-overlay .theme-backdrop {
background: rgba( 238, 238, 238, 0.75 );
position: fixed;
z-index: 110;
}
.wp-customizer .theme-overlay .star-rating {
float: left;
margin-right: 8px;
}
.wp-customizer .theme-rating .num-ratings {
line-height: 20px;
}
.wp-customizer .theme-overlay .theme-wrap {
left: 90px;
right: 90px;
top: 45px;
bottom: 45px;
z-index: 120;
max-width: 1740px; /* To ensure that theme screenshots are not displayed larger than 880px wide. */
}
.wp-customizer .theme-overlay .theme-actions {
text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
padding: 10px 25px;
background: #eee;
border-top: 1px solid #ddd;
}
.ie8 .wp-customizer .theme-overlay .theme-header,
.ie8 .wp-customizer .theme-overlay .theme-about,
.ie8 .wp-customizer .theme-overlay .theme-actions {
position: static;
.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
margin-left: 8px;
}
.control-panel-themes .theme-actions .delete-theme {
left: 15px; /* these override themes.css on mobile */
right: auto;
bottom: auto;
position: absolute;
}
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}
.wp-customizer .theme-header {
background: #eee;
}
.wp-customizer .theme-overlay .theme-header button,
.wp-customizer .theme-overlay .theme-header .close:before {
color: #444;
}
.wp-customizer .theme-overlay .theme-header .close:focus,
.wp-customizer .theme-overlay .theme-header .close:hover,
.wp-customizer .theme-overlay .theme-header .right:focus,
.wp-customizer .theme-overlay .theme-header .right:hover,
.wp-customizer .theme-overlay .theme-header .left:focus,
.wp-customizer .theme-overlay .theme-header .left:hover {
background: #fff;
border-bottom: 4px solid #0073aa;
color: #0073aa;
}
.wp-customizer .theme-overlay .theme-header .close:focus:before,
.wp-customizer .theme-overlay .theme-header .close:hover:before {
color: #0073aa;
}
.wp-customizer .theme-overlay .theme-header button.disabled,
.wp-customizer .theme-overlay .theme-header button.disabled:hover,
.wp-customizer .theme-overlay .theme-header button.disabled:focus {
border-bottom: none;
background: transparent;
color: #ccc;
}
/* Small Screens */
@ -1783,7 +2276,7 @@ body.cheatin {
body.cheatin h1 {
border-bottom: 1px solid #ddd;
clear: both;
color: #666;
color: #555d66;
font-size: 24px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 30px 0 0 0;

2
wp-admin/css/customize-controls.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/install-rtl.css
View File

@ -404,6 +404,7 @@ body.language-chooser {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-admin/css/install-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/install.css
View File

@ -404,6 +404,7 @@ body.language-chooser {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-admin/css/install.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/list-tables-rtl.css
View File

@ -1821,6 +1821,7 @@ div.action-links,
/* Show comment bubble as text instead */
.post-com-count .screen-reader-text {
position: static;
-webkit-clip-path: none;
clip-path: none;
width: auto;
height: auto;

2
wp-admin/css/list-tables-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/list-tables.css
View File

@ -1821,6 +1821,7 @@ div.action-links,
/* Show comment bubble as text instead */
.post-com-count .screen-reader-text {
position: static;
-webkit-clip-path: none;
clip-path: none;
width: auto;
height: auto;

2
wp-admin/css/list-tables.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/nav-menus-rtl.css
View File

@ -599,6 +599,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.no-js.nav-menus-php .item-edit .screen-reader-text {
position: static;
-webkit-clip-path: none;
clip-path: none;
width: auto;
height: auto;

2
wp-admin/css/nav-menus-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-admin/css/nav-menus.css
View File

@ -599,6 +599,7 @@ body.menu-max-depth-11 { min-width: 1280px !important; }
.no-js.nav-menus-php .item-edit .screen-reader-text {
position: static;
-webkit-clip-path: none;
clip-path: none;
width: auto;
height: auto;

2
wp-admin/css/nav-menus.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
wp-admin/css/themes-rtl.css
View File

@ -549,7 +549,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
float: right;
margin: 0 0 0 30px;
width: 55%;
max-width: 880px;
max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
text-align: center;
}
@ -1049,7 +1049,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
text-align: center;
}
p.no-themes {
p.no-themes,
p.no-themes-local {
clear: both;
color: #666;
font-size: 18px;
@ -1705,9 +1706,10 @@ body.full-overlay-active {
display: none;
}
#customize-container {
#customize-container,
#customize-themes-loading-container {
display: none;
background: #fff;
background: #eee;
z-index: 500000;
position: fixed;
overflow: visible;
@ -1720,6 +1722,7 @@ body.full-overlay-active {
/* Make the Customizer and Theme installer overlays the only available content. */
#customize-container,
#customize-themes-loading-container,
.theme-install-overlay {
visibility: visible;
}
@ -1824,6 +1827,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
.theme-install-overlay .wp-full-overlay-main:before {
content: "";
display: block;
@ -1861,6 +1865,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
.theme-install-overlay .wp-full-overlay-main:before {
background-image: url(../images/spinner-2x.gif);
}

2
wp-admin/css/themes-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

13
wp-admin/css/themes.css
View File

@ -549,7 +549,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
float: left;
margin: 0 30px 0 0;
width: 55%;
max-width: 880px;
max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
text-align: center;
}
@ -1049,7 +1049,8 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
text-align: center;
}
p.no-themes {
p.no-themes,
p.no-themes-local {
clear: both;
color: #666;
font-size: 18px;
@ -1705,9 +1706,10 @@ body.full-overlay-active {
display: none;
}
#customize-container {
#customize-container,
#customize-themes-loading-container {
display: none;
background: #fff;
background: #eee;
z-index: 500000;
position: fixed;
overflow: visible;
@ -1720,6 +1722,7 @@ body.full-overlay-active {
/* Make the Customizer and Theme installer overlays the only available content. */
#customize-container,
#customize-themes-loading-container,
.theme-install-overlay {
visibility: visible;
}
@ -1824,6 +1827,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
.theme-install-overlay .wp-full-overlay-main:before {
content: "";
display: block;
@ -1861,6 +1865,7 @@ body.full-overlay-active {
#customize-preview.wp-full-overlay-main:before,
.customize-loading #customize-container:before,
.customize-loading #customize-themes-loading-container:before,
.theme-install-overlay .wp-full-overlay-main:before {
background-image: url(../images/spinner-2x.gif);
}

2
wp-admin/css/themes.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
wp-admin/customize.php
View File

@ -125,7 +125,8 @@ $admin_title = sprintf( $wp_customize->get_document_title_template(), __( 'Loadi
?><title><?php echo $admin_title; ?></title>
<script type="text/javascript">
var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>;
var ajaxurl = <?php echo wp_json_encode( admin_url( 'admin-ajax.php', 'relative' ) ); ?>,
pagenow = 'customize';
</script>
<?php

120
wp-admin/includes/theme.php
View File

@ -234,40 +234,6 @@ function get_theme_feature_list( $api = true ) {
// Hard-coded list is used if api not accessible.
$features = array(
__( 'Layout' ) => array(
'grid-layout' => __( 'Grid Layout' ),
'one-column' => __( 'One Column' ),
'two-columns' => __( 'Two Columns' ),
'three-columns' => __( 'Three Columns' ),
'four-columns' => __( 'Four Columns' ),
'left-sidebar' => __( 'Left Sidebar' ),
'right-sidebar' => __( 'Right Sidebar' ),
),
__( 'Features' ) => array(
'accessibility-ready' => __( 'Accessibility Ready' ),
'buddypress' => __( 'BuddyPress' ),
'custom-background' => __( 'Custom Background' ),
'custom-colors' => __( 'Custom Colors' ),
'custom-header' => __( 'Custom Header' ),
'custom-logo' => __( 'Custom Logo' ),
'custom-menu' => __( 'Custom Menu' ),
'editor-style' => __( 'Editor Style' ),
'featured-image-header' => __( 'Featured Image Header' ),
'featured-images' => __( 'Featured Images' ),
'flexible-header' => __( 'Flexible Header' ),
'footer-widgets' => __( 'Footer Widgets' ),
'front-page-post-form' => __( 'Front Page Posting' ),
'full-width-template' => __( 'Full Width Template' ),
'microformats' => __( 'Microformats' ),
'post-formats' => __( 'Post Formats' ),
'rtl-language-support' => __( 'RTL Language Support' ),
'sticky-post' => __( 'Sticky Post' ),
'theme-options' => __( 'Theme Options' ),
'threaded-comments' => __( 'Threaded Comments' ),
'translation-ready' => __( 'Translation Ready' ),
),
__( 'Subject' ) => array(
'blog' => __( 'Blog' ),
'e-commerce' => __( 'E-Commerce' ),
@ -278,7 +244,34 @@ function get_theme_feature_list( $api = true ) {
'news' => __( 'News' ),
'photography' => __( 'Photography' ),
'portfolio' => __( 'Portfolio' ),
),
__( 'Features' ) => array(
'accessibility-ready' => __( 'Accessibility Ready' ),
'custom-background' => __( 'Custom Background' ),
'custom-colors' => __( 'Custom Colors' ),
'custom-header' => __( 'Custom Header' ),
'custom-logo' => __( 'Custom Logo' ),
'editor-style' => __( 'Editor Style' ),
'featured-image-header' => __( 'Featured Image Header' ),
'featured-images' => __( 'Featured Images' ),
'footer-widgets' => __( 'Footer Widgets' ),
'full-width-template' => __( 'Full Width Template' ),
'post-formats' => __( 'Post Formats' ),
'sticky-post' => __( 'Sticky Post' ),
'theme-options' => __( 'Theme Options' ),
),
__( 'Layout' ) => array(
'grid-layout' => __( 'Grid Layout' ),
'one-column' => __( 'One Column' ),
'two-columns' => __( 'Two Columns' ),
'three-columns' => __( 'Three Columns' ),
'four-columns' => __( 'Four Columns' ),
'left-sidebar' => __( 'Left Sidebar' ),
'right-sidebar' => __( 'Right Sidebar' ),
)
);
if ( ! $api || ! current_user_can( 'install_themes' ) )
@ -574,8 +567,9 @@ function wp_prepare_themes_for_js( $themes = null ) {
$parent = false;
if ( $theme->parent() ) {
$parent = $theme->parent()->display( 'Name' );
$parents[ $slug ] = $theme->parent()->get_stylesheet();
$parent = $theme->parent();
$parents[ $slug ] = $parent->get_stylesheet();
$parent = $parent->display( 'Name' );
}
$customize_action = null;
@ -635,8 +629,6 @@ function wp_prepare_themes_for_js( $themes = null ) {
* @since 4.2.0
*/
function customize_themes_print_templates() {
$preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces.
$preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url );
?>
<script type="text/html" id="tmpl-customize-themes-details-view">
<div class="theme-backdrop"></div>
@ -648,7 +640,7 @@ function customize_themes_print_templates() {
</div>
<div class="theme-about wp-clearfix">
<div class="theme-screenshots">
<# if ( data.screenshot[0] ) { #>
<# if ( data.screenshot && data.screenshot[0] ) { #>
<div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
<# } else { #>
<div class="screenshot blank"></div>
@ -661,29 +653,53 @@ function customize_themes_print_templates() {
<# } #>
<h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2>
<h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3>
<p class="theme-description">{{{ data.description }}}</p>
<# if ( data.stars && 0 != data.num_ratings ) { #>
<div class="theme-rating">
{{{ data.stars }}}
<span class="num-ratings">
<?php
/* translators: %s is the number of ratings */
echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' );
?>
</span>
</div>
<# } #>
<# if ( data.hasUpdate ) { #>
<div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
<h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
{{{ data.update }}}
</div>
<# } #>
<# if ( data.parent ) { #>
<p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p>
<# } #>
<p class="theme-description">{{{ data.description }}}</p>
<# if ( data.tags ) { #>
<p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p>
<p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p>
<# } #>
</div>
</div>
<# if ( ! data.active ) { #>
<div class="theme-actions">
<div class="inactive-theme">
<?php
/* translators: %s: Theme name */
$aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
?>
<a href="<?php echo $preview_url; ?>" target="_top" class="button button-primary" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></a>
</div>
</div>
<# } #>
<div class="theme-actions">
<# if ( data.active ) { #>
<button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
<# } else if ( 'installed' === data.type ) { #>
<?php if ( current_user_can( 'delete_themes' ) ) { ?>
<# if ( data.actions && data.actions['delete'] ) { #>
<a href="{{{ data.actions['delete'] }}}" data-slug="{{ data.id }}" class="button button-secondary delete-theme"><?php _e( 'Delete' ); ?></a>
<# } #>
<?php } ?>
<button type="button" class="button button-primary preview-theme" data-slug="{{ data.id }}"><?php _e( 'Live Preview' ); ?></span>
<# } else { #>
<button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button>
<button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}"><?php _e( 'Install &amp; Preview' ); ?></button>
<# } #>
</div>
</div>
</script>
<?php

1178
wp-admin/js/customize-controls.js
View File

File diff suppressed because it is too large Load Diff

7
wp-admin/js/customize-controls.min.js vendored
View File

File diff suppressed because one or more lines are too long

46
wp-admin/js/updates.js
View File

@ -183,7 +183,11 @@
if ( $notice.length ) {
$notice.replaceWith( $adminNotice );
} else {
$( '.wrap' ).find( '> h1' ).after( $adminNotice );
if ( 'customize' === pagenow ) {
$( '.customize-themes-notifications' ).append( $adminNotice );
} else {
$( '.wrap' ).find( '> h1' ).after( $adminNotice );
}
}
$document.trigger( 'wp-updates-notice-added' );
@ -930,6 +934,17 @@
if ( 'themes-network' === pagenow ) {
$notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-error' ).addClass( 'updating-message notice-warning' ).find( 'p' );
} else if ( 'customize' === pagenow ) {
// Update the theme details UI.
$notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
$notice.find( 'h3' ).remove();
// Add the top-level UI, and update both.
$notice = $notice.add( $( '#customize-control-theme-installed_' + args.slug ).find( '.update-message' ) );
$notice = $notice.addClass( 'updating-message' ).find( 'p' );
} else {
$notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
@ -972,6 +987,10 @@
},
$notice, newText;
if ( 'customize' === pagenow ) {
$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
}
if ( 'themes-network' === pagenow ) {
$notice = $theme.find( '.update-message' );
@ -1026,6 +1045,10 @@
return;
}
if ( 'customize' === pagenow ) {
$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
}
if ( 'themes-network' === pagenow ) {
$notice = $theme.find( '.update-message ' );
} else {
@ -1162,12 +1185,23 @@
return;
}
if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
$button = $( '.theme-install[data-slug="' + response.slug + '"]' );
$card = $( '.install-theme-info' ).prepend( $message );
if ( 'customize' === pagenow ) {
if ( $document.find( 'body' ).hasClass( 'modal-open' ) ) {
$button = $( '.theme-install[data-slug="' + response.slug + '"]' );
$card = $( '.theme-overlay .theme-info' ).prepend( $message );
} else {
$button = $( '.theme-install[data-slug="' + response.slug + '"]' );
$card = $button.closest( '.theme' ).addClass( 'theme-install-failed' ).append( $message );
}
$( '.wp-full-overlay' ).removeClass( 'customize-loading' );
} else {
$card = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
$button = $card.find( '.theme-install' );
if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
$button = $( '.theme-install[data-slug="' + response.slug + '"]' );
$card = $( '.install-theme-info' ).prepend( $message );
} else {
$card = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
$button = $card.find( '.theme-install' );
}
}
$button

4
wp-admin/js/updates.min.js vendored
View File

File diff suppressed because one or more lines are too long

219
wp-includes/class-wp-customize-manager.php
View File

@ -320,6 +320,7 @@ final class WP_Customize_Manager {
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' );
require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' );
@ -375,6 +376,7 @@ final class WP_Customize_Manager {
add_action( 'wp_ajax_customize_save', array( $this, 'save' ) );
add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) );
add_action( 'wp_ajax_customize-load-themes', array( $this, 'load_themes_ajax' ) );
add_action( 'wp_ajax_dismiss_customize_changeset_autosave', array( $this, 'handle_dismiss_changeset_autosave_request' ) );
add_action( 'customize_register', array( $this, 'register_controls' ) );
@ -392,6 +394,12 @@ final class WP_Customize_Manager {
// Export the settings to JS via the _wpCustomizeSettings variable.
add_action( 'customize_controls_print_footer_scripts', array( $this, 'customize_pane_settings' ), 1000 );
// Add theme update notices.
if ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) ) {
require_once ABSPATH . '/wp-admin/includes/update.php';
add_action( 'customize_controls_print_footer_scripts', 'wp_print_admin_notice_templates' );
}
}
/**
@ -3685,6 +3693,10 @@ final class WP_Customize_Manager {
foreach ( $this->controls as $control ) {
$control->enqueue();
}
if ( ! is_multisite() && ( current_user_can( 'install_themes' ) || current_user_can( 'update_themes' ) || current_user_can( 'delete_themes' ) ) ) {
wp_enqueue_script( 'updates' );
}
}
/**
@ -3889,6 +3901,7 @@ final class WP_Customize_Manager {
$nonces = array(
'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ),
'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ),
'switch-themes' => wp_create_nonce( 'switch-themes' ),
'dismiss_autosave' => wp_create_nonce( 'dismiss_customize_changeset_autosave' ),
);
@ -3995,6 +4008,15 @@ final class WP_Customize_Manager {
'autofocus' => $this->get_autofocus(),
'documentTitleTmpl' => $this->get_document_title_template(),
'previewableDevices' => $this->get_previewable_devices(),
'l10n' => array(
'confirmDeleteTheme' => __( 'Are you sure you want to delete this theme?' ),
/* translators: %d is the number of theme search results, which cannot currently consider singular vs. plural forms */
'themeSearchResults' => __( '%d themes found' ),
/* translators: %d is the number of themes being displayed, which cannot currently consider singular vs. plural forms */
'announceThemeCount' => __( 'Displaying %d themes' ),
/* translators: %s is the theme name */
'announceThemeDetails' => __( 'Showing details for theme: %s' ),
),
);
// Prepare Customize Section objects to pass to JavaScript.
@ -4098,8 +4120,10 @@ final class WP_Customize_Manager {
/* Panel, Section, and Control Types */
$this->register_panel_type( 'WP_Customize_Panel' );
$this->register_panel_type( 'WP_Customize_Themes_Panel' );
$this->register_section_type( 'WP_Customize_Section' );
$this->register_section_type( 'WP_Customize_Sidebar_Section' );
$this->register_section_type( 'WP_Customize_Themes_Section' );
$this->register_control_type( 'WP_Customize_Color_Control' );
$this->register_control_type( 'WP_Customize_Media_Control' );
$this->register_control_type( 'WP_Customize_Upload_Control' );
@ -4159,50 +4183,38 @@ final class WP_Customize_Manager {
'default_value' => $initial_date,
) ) );
/* Themes */
/* Themes (controls are loaded via ajax) */
$this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array(
'title' => $this->theme()->display( 'Name' ),
'capability' => 'switch_themes',
'priority' => 0,
$this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
'title' => $this->theme()->display( 'Name' ),
'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish your new design. Browse available themes via the filters in this menu.' ),
'capability' => 'switch_themes',
'priority' => 0,
) ) );
$this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array(
'title' => __( 'Installed themes' ),
'action' => 'installed',
'capability' => 'switch_themes',
'panel' => 'themes',
'priority' => 0,
) ) );
if ( ! is_multisite() ) {
$this->add_section( new WP_Customize_Themes_Section( $this, 'wporg_themes', array(
'title' => __( 'WordPress.org themes' ),
'action' => 'wporg',
'capability' => 'install_themes',
'panel' => 'themes',
'priority' => 5,
) ) );
}
// Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
$this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array(
'capability' => 'switch_themes',
) ) );
require_once( ABSPATH . 'wp-admin/includes/theme.php' );
// Theme Controls.
// Add a control for the active/original theme.
if ( ! $this->is_theme_active() ) {
$themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) );
$active_theme = current( $themes );
$active_theme['isActiveTheme'] = true;
$this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array(
'theme' => $active_theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
$themes = wp_prepare_themes_for_js();
foreach ( $themes as $theme ) {
if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) {
continue;
}
$theme_id = 'theme_' . $theme['id'];
$theme['isActiveTheme'] = false;
$this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array(
'theme' => $theme,
'section' => 'themes',
'settings' => 'active_theme',
) ) );
}
/* Site Identity */
$this->add_section( 'title_tagline', array(
@ -4706,6 +4718,141 @@ final class WP_Customize_Manager {
$this->add_dynamic_settings( $setting_ids );
}
/**
* Load themes into the theme browsing/installation UI.
*
* @since 4.9.0
*/
public function load_themes_ajax() {
check_ajax_referer( 'switch-themes', 'switch-themes-nonce' );
if ( ! current_user_can( 'switch_themes' ) ) {
wp_die( -1 );
}
if ( empty( $_POST['theme_action'] ) ) {
wp_send_json_error( 'missing_theme_action' );
}
$theme_action = sanitize_key( $_POST['theme_action'] );
$themes = array();
require_once ABSPATH . 'wp-admin/includes/theme.php';
if ( 'installed' === $theme_action ) {
$themes = array( 'themes' => wp_prepare_themes_for_js() );
foreach ( $themes['themes'] as &$theme ) {
$theme['type'] = 'installed';
$theme['active'] = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme['id'] );
}
} elseif ( 'wporg' === $theme_action ) {
if ( ! current_user_can( 'install_themes' ) ) {
wp_die( -1 );
}
// Arguments for all queries.
$args = array(
'per_page' => 100,
'page' => isset( $_POST['page'] ) ? absint( $_POST['page'] ) : 1,
'fields' => array(
'screenshot_url' => true,
'description' => true,
'rating' => true,
'downloaded' => true,
'downloadlink' => true,
'last_updated' => true,
'homepage' => true,
'num_ratings' => true,
'tags' => true,
'parent' => true,
// 'extended_author' => true, @todo: WordPress.org throws a 500 server error when this is here.
),
);
// Define query filters based on user input.
if ( ! array_key_exists( 'search', $_POST ) ) {
$args['search'] = '';
} else {
$args['search'] = sanitize_text_field( wp_unslash( $_POST['search'] ) );
}
if ( ! array_key_exists( 'tags', $_POST ) ) {
$args['tag'] = '';
} else {
$args['tag'] = array_map( 'sanitize_text_field', wp_unslash( (array) $_POST['tags'] ) );
}
if ( '' === $args['search'] && '' === $args['tag'] ) {
$args['browse'] = 'new'; // Sort by latest themes by default.
}
// Load themes from the .org API.
$themes = themes_api( 'query_themes', $args );
if ( is_wp_error( $themes ) ) {
wp_send_json_error();
}
// This list matches the allowed tags in wp-admin/includes/theme-install.php.
$themes_allowedtags = array_fill_keys(
array( 'a', 'abbr', 'acronym', 'code', 'pre', 'em', 'strong', 'div', 'p', 'ul', 'ol', 'li', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'img' ),
array()
);
$themes_allowedtags['a'] = array_fill_keys( array( 'href', 'title', 'target' ), true );
$themes_allowedtags['acronym']['title'] = true;
$themes_allowedtags['abbr']['title'] = true;
$themes_allowedtags['img'] = array_fill_keys( array( 'src', 'class', 'alt' ), true );
// Prepare a list of installed themes to check against before the loop.
$installed_themes = array();
$wp_themes = wp_get_themes();
foreach ( $wp_themes as $theme ) {
$installed_themes[] = $theme->get_stylesheet();
}
$update_php = network_admin_url( 'update.php?action=install-theme' );
// Set up properties for themes available on WordPress.org.
foreach ( $themes->themes as &$theme ) {
$theme->install_url = add_query_arg( array(
'theme' => $theme->slug,
'_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ),
), $update_php );
$theme->name = wp_kses( $theme->name, $themes_allowedtags );
$theme->author = wp_kses( $theme->author, $themes_allowedtags );
$theme->version = wp_kses( $theme->version, $themes_allowedtags );
$theme->description = wp_kses( $theme->description, $themes_allowedtags );
$theme->tags = implode( ', ', $theme->tags );
$theme->stars = wp_star_rating( array(
'rating' => $theme->rating,
'type' => 'percent',
'number' => $theme->num_ratings,
'echo' => false,
) );
$theme->num_ratings = number_format_i18n( $theme->num_ratings );
$theme->preview_url = set_url_scheme( $theme->preview_url );
// Handle themes that are already installed as installed themes.
if ( in_array( $theme->slug, $installed_themes, true ) ) {
$theme->type = 'installed';
} else {
$theme->type = $theme_action;
}
// Set active based on customized theme.
$theme->active = ( isset( $_POST['customized_theme'] ) && $_POST['customized_theme'] === $theme->slug );
// Map available theme properties to installed theme properties.
$theme->id = $theme->slug;
$theme->screenshot = array( $theme->screenshot_url );
$theme->authorAndUri = $theme->author;
$theme->parent = ( $theme->slug === $theme->template ) ? false : $theme->template; // The .org API does not seem to return the parent in a documented way; however, this check should yield a similar result in most cases.
unset( $theme->slug );
unset( $theme->screenshot_url );
unset( $theme->author );
} // End foreach().
} // End if().
wp_send_json_success( $themes );
}
/**
* Callback for validating the header_textcolor value.
*

1
wp-includes/css/admin-bar-rtl.css
View File

@ -693,6 +693,7 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar .screen-reader-text span {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-includes/css/admin-bar-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-includes/css/admin-bar.css
View File

@ -693,6 +693,7 @@ html:lang(he-il) .rtl #wpadminbar * {
#wpadminbar .screen-reader-text span {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-includes/css/admin-bar.min.css vendored
View File

File diff suppressed because one or more lines are too long

1
wp-includes/css/wp-embed-template.css
View File

@ -11,6 +11,7 @@ body {
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px;
margin: -1px;

2
wp-includes/css/wp-embed-template.min.css vendored
View File

File diff suppressed because one or more lines are too long

59
wp-includes/customize/class-wp-customize-theme-control.php
View File

@ -57,18 +57,22 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
* @since 4.2.0
*/
public function content_template() {
$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
$active_url = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
$preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
$preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
/* translators: %s: theme name */
$details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$preview_label = sprintf( __( 'Live preview theme: %s' ), '{{ data.theme.name }}' );
/* translators: %s: theme name */
$install_label = sprintf( __( 'Install and preview theme: %s' ), '{{ data.theme.name }}' );
?>
<# if ( data.theme.isActiveTheme ) { #>
<div class="theme active" tabindex="0" data-preview-url="<?php echo esc_attr( $active_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# if ( data.theme.active ) { #>
<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } else { #>
<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
<# } #>
<# if ( data.theme.screenshot[0] ) { #>
<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
<div class="theme-screenshot">
<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
</div>
@ -76,28 +80,45 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
<div class="theme-screenshot blank"></div>
<# } #>
<# if ( data.theme.isActiveTheme ) { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
<# } else { #>
<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
<# } #>
<span class="more-details theme-details" id="{{ data.section }}-{{ data.theme.id }}-action" aria-label="<?php echo esc_attr( $details_label ); ?>"><?php _e( 'Theme Details' ); ?></span>
<div class="theme-author"><?php
/* translators: Theme author name */
printf( _x( 'By %s', 'theme author' ), '{{ data.theme.author }}' );
?></div>
<# if ( data.theme.isActiveTheme ) { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">
<# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
<div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}">
<p>
<?php
/* translators: %s is the linked update now button */
printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' );
?>
</p>
</div>
<# } #>
<# if ( data.theme.active ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
<?php
/* translators: %s: theme name */
printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
printf( __( '<span>Previewing:</span> %s' ), '{{ data.theme.name }}' );
?>
</h3>
<# } else { #>
<h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3>
<div class="theme-actions">
<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
<button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $customize_label ); ?>"><?php _e( 'Customize' ); ?></button>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else if ( 'installed' === data.theme.type ) { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary preview-theme" aria-label="<?php echo esc_attr( $preview_label ); ?>" data-slug="{{ data.theme.id }}"><?php _e( 'Live Preview' ); ?></span>
</div>
<div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div>
<# } else { #>
<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">{{ data.theme.name }}</h3>
<div class="theme-actions">
<button type="button" class="button button-primary theme-install preview" aria-label="<?php echo esc_attr( $install_label ); ?>" data-slug="{{ data.theme.id }}" data-name="{{ data.theme.name }}"><?php _e( 'Install &amp; Preview' ); ?></button>
</div>
<# } #>
</div>

103
wp-includes/customize/class-wp-customize-themes-panel.php Normal file
View File

@ -0,0 +1,103 @@
<?php
/**
* Customize API: WP_Customize_Themes_Panel class
*
* @package WordPress
* @subpackage Customize
* @since 4.9.0
*/
/**
* Customize Themes Panel Class
*
* @since 4.9.0
*
* @see WP_Customize_Panel
*/
class WP_Customize_Themes_Panel extends WP_Customize_Panel {
/**
* Panel type.
*
* @since 4.9.0
* @var string
*/
public $type = 'themes';
/**
* An Underscore (JS) template for rendering this panel's container.
*
* The themes panel renders a custom panel heading with the current theme and a switch themes button.
*
* @see WP_Customize_Panel::print_template()
*
* @since 4.9.0
*/
protected function render_template() {
?>
<li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes">
<h3 class="accordion-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}';
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}';
}
?>
<?php if ( current_user_can( 'switch_themes' ) ) : ?>
<button type="button" class="button change-theme" aria-label="<?php _e( 'Change theme' ); ?>"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?>
</h3>
<ul class="accordion-sub-container control-panel-content"></ul>
</li>
<?php
}
/**
* An Underscore (JS) template for this panel's content (but not its container).
*
* Class variables for this panel class are available in the `data` JS object;
* export custom variables by overriding WP_Customize_Panel::json().
*
* @since 4.9.0
*
* @see WP_Customize_Panel::print_template()
*/
protected function content_template() {
?>
<li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
<button class="customize-panel-back" tabindex="-1" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
<div class="accordion-section-title">
<span class="preview-notice">
<?php
/* translators: %s: themes panel title in the Customizer */
echo sprintf( __( 'You are browsing %s' ), '<strong class="panel-title">' . __( 'Themes' ) . '</strong>' ); // Separate strings for consistency with other panels.
?>
</span>
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
<# if ( data.description ) { #>
<button class="customize-help-toggle dashicons dashicons-editor-help" type="button" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button>
<# } #>
<?php endif; ?>
</div>
<?php if ( current_user_can( 'install_themes' ) && ! is_multisite() ) : ?>
<# if ( data.description ) { #>
<div class="description customize-panel-description">
{{{ data.description }}}
</div>
<# } #>
<?php endif; ?>
</li>
<li id="customize-themes-loading-container">
<span class="customize-loading-text-installing-theme"><?php _e( 'Downloading your new theme&hellip;' ); ?></span>
<span class="customize-loading-text"><?php _e( 'Setting up your live preview. This may take a bit.' ); ?></span>
</li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?>
<li class="customize-themes-full-container-container">
<ul class="customize-themes-full-container">
<li class="customize-themes-notifications"></li>
</ul>
</li>
<?php
}
}

161
wp-includes/customize/class-wp-customize-themes-section.php
View File

@ -10,7 +10,7 @@
/**
* Customize Themes Section class.
*
* A UI container for theme controls, which behaves like a backwards Panel.
* A UI container for theme controls, which are displayed within sections.
*
* @since 4.2.0
*
@ -19,7 +19,7 @@
class WP_Customize_Themes_Section extends WP_Customize_Section {
/**
* Customize section type.
* Section type.
*
* @since 4.2.0
* @var string
@ -27,59 +27,124 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
public $type = 'themes';
/**
* Render the themes section, which behaves like a panel.
* Theme section action.
*
* @since 4.2.0
* Defines the type of themes to load (installed, wporg, etc.).
*
* @since 4.9.0
* @var string
*/
protected function render() {
$classes = 'accordion-section control-section control-section-' . $this->type;
public $action = '';
/**
* Get section parameters for JS.
*
* @since 4.9.0
* @return array Exported parameters.
*/
public function json() {
$exported = parent::json();
$exported['action'] = $this->action;
return $exported;
}
/**
* Render a themes section as a JS template.
*
* The template is only rendered by PHP once, so all actions are prepared at once on the server side.
*
* @since 4.9.0
*/
protected function render_template() {
?>
<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
<h3 class="accordion-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
}
?>
<?php if ( count( $this->controls ) > 0 ) : ?>
<button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
<?php endif; ?>
</h3>
<div class="customize-themes-panel control-panel-content themes-php">
<h3 class="accordion-section-title customize-section-title">
<button class="customize-section-back" tabindex="0" type="button"><span class="screen-reader-text"><?php _e( 'Back' ); ?></span></button>
<span class="customize-action"><?php _e( 'Customizing' ); ?></span>
<?php _e( 'Themes' ); ?>
<span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span>
</h3>
<h3 class="accordion-section-title customize-section-title">
<?php
if ( $this->manager->is_theme_active() ) {
echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
} else {
echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
}
?>
<button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
</h3>
<li id="accordion-section-{{ data.id }}" class="theme-section">
<button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button>
<?php if ( current_user_can( 'install_themes' ) || is_multisite() ) : // @todo: upload support ?>
<?php endif; ?>
<div class="customize-themes-section themes-section-{{ data.id }} control-section-content themes-php">
<div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div>
<div id="customize-container"></div>
<?php if ( count( $this->controls ) > 4 ) : ?>
<p><label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search installed themes&hellip;' ); ?></span>
<input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes&hellip;' ); ?>" />
</label></p>
<?php endif; ?>
<div class="theme-browser rendered">
<ul class="themes accordion-section-content">
<div class="customize-preview-header themes-filter-bar">
<?php $this->filter_bar_content_template(); ?>
</div>
<div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server&#8217;s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div>
<ul class="themes">
</ul>
<p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p>
<p class="no-themes-local">
<?php
/* translators: %s is the string, "search WordPress.org themes" */
printf( __( 'No themes found. Try a different search, or %s.' ),
sprintf( '<button type="button" class="button-link search-dotorg-themes">%s</button>', __( 'Search WordPress.org themes' ) )
);
?>
</p>
<p class="spinner"></p>
</div>
</div>
</li>
<?php }
<?php
}
/**
* Render the filter bar portion of a themes section as a JS template.
*
* The template is only rendered by PHP once, so all actions are prepared at once on the server side.
* The filter bar container is rendered by @see `render_template()`.
*
* @since 4.9.0
*/
protected function filter_bar_content_template() {
?>
<button type="button" class="button button-primary customize-section-back customize-themes-mobile-back"><?php _e( 'Back to theme sources' ); ?></button>
<# if ( 'wporg' === data.action ) { #>
<div class="search-form">
<label class="screen-reader-text" for="wp-filter-search-input"><?php _e( 'Search themes&hellip;' ); ?></label>
<input placeholder="<?php _e( 'Search themes&hellip;' ); ?>" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search">
<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</div>
<button type="button" class="button feature-filter-toggle">
<span class="filter-count-0"><?php _e( 'Filter themes' ); ?></span><span class="filter-count-filters">
<?php
/* translators: %s: number of filters selected. */
printf( __( 'Filter themes (%s)' ), '<span class="theme-filter-count">0</span>' );
?>
</span>
</button>
<div class="filter-drawer filter-details">
<?php
$feature_list = get_theme_feature_list( false ); // @todo: Use the .org API instead of the local core feature list. The .org API is currently outdated and will be reconciled when the .org themes directory is next redesigned.
foreach ( $feature_list as $feature_name => $features ) {
echo '<fieldset class="filter-group">';
echo '<legend>' . esc_html( $feature_name ) . '</legend>';
echo '<div class="filter-group-feature">';
foreach ( $features as $feature => $feature_name ) {
echo '<input type="checkbox" id="filter-id-' . esc_attr( $feature ) . '" value="' . esc_attr( $feature ) . '" /> ';
echo '<label for="filter-id-' . esc_attr( $feature ) . '">' . esc_html( $feature_name ) . '</label><br>';
}
echo '</div>';
echo '</fieldset>';
}
?>
</div>
<# } else { #>
<p class="themes-filter-container">
<label for="themes-filter">
<span class="screen-reader-text"><?php _e( 'Search themes&hellip;' ); ?></span>
<input type="search" id="themes-filter" placeholder="<?php esc_attr_e( 'Search themes&hellip;' ); ?>" aria-describedby="live-search-desc" class="wp-filter-search wp-filter-search-themes" />
<span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span>
</label>
</p>
<# } #>
<div class="filter-themes-count">
<span class="themes-displayed">
<?php
/* translators: %s: number of themes displayed. */
echo sprintf( __( '%s themes' ), '<span class="theme-count">0</span>' );
?>
</span>
</div>
<?php
}
}

2
wp-includes/embed.php
View File

File diff suppressed because one or more lines are too long

2
wp-includes/version.php
View File

@ -4,7 +4,7 @@
*
* @global string $wp_version
*/
$wp_version = '4.9-alpha-41647';
$wp_version = '4.9-alpha-41648';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.