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. 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/ Fixes #37661, #34843. Props celloexpressions, folletto, westonruter, karmatosed, afercia. Built from https://develop.svn.wordpress.org/trunk@38813 git-svn-id: http://core.svn.wordpress.org/trunk@38756 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
parent
8ed022b568
commit
1c3b96537f
|
|
@ -271,21 +271,17 @@ body {
|
|||
}
|
||||
|
||||
#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;
|
||||
-ms-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;
|
||||
|
|
@ -296,10 +292,8 @@ body {
|
|||
|
||||
.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,
|
||||
|
|
@ -309,13 +303,6 @@ body {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.in-themes-panel #customize-theme-controls .customize-pane-parent,
|
||||
.in-themes-panel #customize-info {
|
||||
-webkit-transform: translateX(-100%);
|
||||
-ms-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;
|
||||
|
|
@ -406,7 +393,7 @@ h3.customize-section-title {
|
|||
display: block;
|
||||
float: right;
|
||||
width: 48px;
|
||||
height: 71px;
|
||||
height: 70px;
|
||||
padding: 0 0 0 24px;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
|
|
@ -420,7 +407,7 @@ h3.customize-section-title {
|
|||
}
|
||||
|
||||
.customize-section-back {
|
||||
height: 74px;
|
||||
height: 73px;
|
||||
}
|
||||
|
||||
.ios .customize-panel-back {
|
||||
|
|
@ -996,15 +983,21 @@ p.customize-section-description {
|
|||
animation: customize-reload .75s;
|
||||
}
|
||||
|
||||
#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
|
||||
#customize-theme-controls .control-section-themes .accordion-section-title {
|
||||
#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: #555;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-right: none;
|
||||
margin-top: 0;
|
||||
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. */
|
||||
|
|
@ -1012,29 +1005,14 @@ p.customize-section-description {
|
|||
border-top: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
|
||||
#customize-theme-controls .control-section-themes > .accordion-section-title {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel .accordion-section-title {
|
||||
margin: 15px -8px;
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title,
|
||||
#customize-controls .customize-themes-panel .accordion-section-title {
|
||||
padding-left: 100px; /* Space for the button */
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title span.customize-action,
|
||||
.control-panel-themes .accordion-section-title span.customize-action,
|
||||
#customize-controls .customize-section-title span.customize-action {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title .change-theme,
|
||||
#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
|
||||
.control-panel-themes .accordion-section-title .change-theme {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 50%;
|
||||
|
|
@ -1042,38 +1020,363 @@ 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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transition: .18s right ease-in-out;
|
||||
margin: 0 300px 0 0;
|
||||
padding:25px;
|
||||
overflow-y: scroll;
|
||||
width: calc(100% - 350px);
|
||||
height: calc(100% - 50px);
|
||||
background: #eee;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel .accordion-section-title:first-child {
|
||||
margin-top: 0;
|
||||
/* 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-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
|
||||
#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 .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;
|
||||
}
|
||||
|
||||
/* Adds a delay before fading in to avoid it "jumping" */
|
||||
@keyframes themes-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-full-container.animate {
|
||||
animation: .6s themes-fade-in 1;
|
||||
}
|
||||
|
||||
.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
|
||||
animation: .6s themes-fade-in 1;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 48px;
|
||||
width: 222px;
|
||||
padding: 6px 15px;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
text-align: left;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .themes-displayed {
|
||||
font-weight: 600;
|
||||
color: #555d66;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .see-themes,
|
||||
.control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile - toggle between themes and filters */
|
||||
@media screen and (max-width:600px) {
|
||||
|
||||
/* Show a spinner in the filters view also, reusing the main customize spinner */
|
||||
.in-themes-panel.loading #customize-header-actions .spinner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 48px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count {
|
||||
width: calc(100% - 93px);
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .themes-displayed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
height: 45px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
width: calc(100% - 50px);
|
||||
margin: 0;
|
||||
top: 46px;
|
||||
height: calc(100% - 96px);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.showing-themes .control-panel-themes .customize-themes-full-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.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. */
|
||||
}
|
||||
|
||||
.theme-section .customize-themes-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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
|
||||
border-right: none;
|
||||
padding: 5px 15px 5px 10px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
|
||||
content: "\f140";
|
||||
font: 20px/1 dashicons;
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details {
|
||||
background: #f5f5f5;
|
||||
margin: 0;
|
||||
padding: 8px 15px;
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.selected.details-open {
|
||||
border-bottom-color: #f5f5f5;
|
||||
border-right-color: #f5f5f5;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.control-panel-themes .favorites-form.filter-details label {
|
||||
padding-bottom: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group {
|
||||
float: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button {
|
||||
padding: 18px 10px 8px 15px;
|
||||
line-height: 14px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button:after {
|
||||
content: "\f140";
|
||||
font: 20px/1 dashicons;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 5px;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button:hover,
|
||||
.control-panel-themes .filter-details .filter-group legend button:focus {
|
||||
color: #0073aa;
|
||||
border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button.open:after {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group .filter-group-feature {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group-feature label {
|
||||
border: 1px solid #ddd;
|
||||
border-top: 0;
|
||||
background: #fff;
|
||||
color: #555d66;
|
||||
margin: 0;
|
||||
padding: 12px 34px 12px 10px;
|
||||
width: calc(100% - 46px);
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel > h2 {
|
||||
padding: 15px 8px 0 8px;
|
||||
.control-panel-themes .filter-details .filter-group-feature input {
|
||||
position: absolute;
|
||||
margin: 12px 10px;
|
||||
}
|
||||
|
||||
#customize-theme-controls .customize-themes-panel .accordion-section-content {
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme {
|
||||
margin-bottom: 8px;
|
||||
.control-panel-themes .filter-details .filter-group-feature label:hover {
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
#customize-theme-controls .themes.accordion-section-content {
|
||||
|
|
@ -1083,17 +1386,108 @@ p.customize-section-description {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.customize-themes-section .filter-drawer {
|
||||
border-top: none;
|
||||
display: block;
|
||||
background: transparent;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.customize-themes-section .clear-filters {
|
||||
margin-right: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-themes-section .no-themes {
|
||||
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;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme { /* override most properties on .customize-control */
|
||||
box-sizing: border-box;
|
||||
width: 18.4%;
|
||||
margin: 0 0 2% 2%;
|
||||
padding: 0;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/* 5 columns above 2100px */
|
||||
@media screen and (min-width: 2101px) {
|
||||
.customize-control.customize-control-theme:nth-child(5n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 columns up to 2100px */
|
||||
@media screen and (min-width: 1601px) and (max-width: 2100px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 23.5%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(4n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 columns up to 1600px */
|
||||
@media screen and (min-width: 1201px) and (max-width: 1600px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(3n) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2 columns up to 1200px */
|
||||
@media screen and (min-width: 851px) and (max-width: 1200px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(even) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 1 column up to 850 px */
|
||||
@media screen and (max-width: 850px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 100%;
|
||||
margin: 0 0 3% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .themes {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .theme {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .theme .theme-actions {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1112,15 +1506,6 @@ p.customize-section-description {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.control-section-themes .accordion-section-title:after,
|
||||
.customize-themes-panel .accordion-section-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-themes-panel.control-panel-content {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Details View */
|
||||
.wp-customizer .theme-overlay {
|
||||
display: none;
|
||||
|
|
@ -1135,31 +1520,58 @@ 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 15px;
|
||||
}
|
||||
|
||||
.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. */
|
||||
}
|
||||
|
||||
|
||||
/* Small Screens */
|
||||
@media (max-width:850px), (max-height:472px) {
|
||||
.wp-customizer .theme-overlay .theme-wrap {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -271,21 +271,17 @@ body {
|
|||
}
|
||||
|
||||
#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;
|
||||
-ms-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;
|
||||
|
|
@ -296,10 +292,8 @@ body {
|
|||
|
||||
.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,
|
||||
|
|
@ -309,13 +303,6 @@ body {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.in-themes-panel #customize-theme-controls .customize-pane-parent,
|
||||
.in-themes-panel #customize-info {
|
||||
-webkit-transform: translateX(100%);
|
||||
-ms-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;
|
||||
|
|
@ -406,7 +393,7 @@ h3.customize-section-title {
|
|||
display: block;
|
||||
float: left;
|
||||
width: 48px;
|
||||
height: 71px;
|
||||
height: 70px;
|
||||
padding: 0 24px 0 0;
|
||||
margin: 0;
|
||||
background: #fff;
|
||||
|
|
@ -420,7 +407,7 @@ h3.customize-section-title {
|
|||
}
|
||||
|
||||
.customize-section-back {
|
||||
height: 74px;
|
||||
height: 73px;
|
||||
}
|
||||
|
||||
.ios .customize-panel-back {
|
||||
|
|
@ -996,15 +983,21 @@ p.customize-section-description {
|
|||
animation: customize-reload .75s;
|
||||
}
|
||||
|
||||
#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
|
||||
#customize-theme-controls .control-section-themes .accordion-section-title {
|
||||
#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: #555;
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ddd;
|
||||
border-left: none;
|
||||
margin-top: 0;
|
||||
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. */
|
||||
|
|
@ -1012,29 +1005,14 @@ p.customize-section-description {
|
|||
border-top: 0;
|
||||
}
|
||||
|
||||
#customize-theme-controls .control-section-themes > .accordion-section-title:hover, /* Not a focusable element. */
|
||||
#customize-theme-controls .control-section-themes > .accordion-section-title {
|
||||
margin: 0 0 15px;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel .accordion-section-title {
|
||||
margin: 15px -8px;
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title,
|
||||
#customize-controls .customize-themes-panel .accordion-section-title {
|
||||
padding-right: 100px; /* Space for the button */
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title span.customize-action,
|
||||
.control-panel-themes .accordion-section-title span.customize-action,
|
||||
#customize-controls .customize-section-title span.customize-action {
|
||||
font-size: 13px;
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#customize-controls .control-section-themes .accordion-section-title .change-theme,
|
||||
#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
|
||||
.control-panel-themes .accordion-section-title .change-theme {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 50%;
|
||||
|
|
@ -1042,38 +1020,363 @@ 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;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: .18s left ease-in-out;
|
||||
margin: 0 0 0 300px;
|
||||
padding:25px;
|
||||
overflow-y: scroll;
|
||||
width: calc(100% - 350px);
|
||||
height: calc(100% - 50px);
|
||||
background: #eee;
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel .accordion-section-title:first-child {
|
||||
margin-top: 0;
|
||||
/* 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-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
|
||||
#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 .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;
|
||||
}
|
||||
|
||||
/* Adds a delay before fading in to avoid it "jumping" */
|
||||
@keyframes themes-fade-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-full-container.animate {
|
||||
animation: .6s themes-fade-in 1;
|
||||
}
|
||||
|
||||
.in-themes-panel:not(.animating) .control-panel-themes .filter-themes-count {
|
||||
animation: .6s themes-fade-in 1;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 48px;
|
||||
width: 222px;
|
||||
padding: 6px 15px;
|
||||
margin: 0;
|
||||
line-height: 32px;
|
||||
text-align: right;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .themes-displayed {
|
||||
font-weight: 600;
|
||||
color: #555d66;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .see-themes,
|
||||
.control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* Mobile - toggle between themes and filters */
|
||||
@media screen and (max-width:600px) {
|
||||
|
||||
/* Show a spinner in the filters view also, reusing the main customize spinner */
|
||||
.in-themes-panel.loading #customize-header-actions .spinner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 48px;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.in-themes-panel.loading.showing-themes #customize-header-actions .spinner {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count {
|
||||
width: calc(100% - 93px);
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-themes-count .themes-displayed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wp-full-overlay:not(.showing-themes) .control-panel-themes .filter-themes-count .see-themes {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-full-overlay.showing-themes .control-panel-themes .filter-themes-count .filter-themes {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.in-themes-panel.showing-themes .control-panel-themes .customize-panel-back {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
height: 45px;
|
||||
background: #eee;
|
||||
}
|
||||
|
||||
.in-themes-panel.showing-themes .control-panel-themes .customize-panel-back:before {
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-full-container {
|
||||
width: calc(100% - 50px);
|
||||
margin: 0;
|
||||
top: 46px;
|
||||
height: calc(100% - 96px);
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.showing-themes .control-panel-themes .customize-themes-full-container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.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. */
|
||||
}
|
||||
|
||||
.theme-section .customize-themes-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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
|
||||
border-left: none;
|
||||
padding: 5px 10px 5px 15px;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes:after,
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-favorites_themes:after {
|
||||
content: "\f140";
|
||||
font: 20px/1 dashicons;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes .wp-filter-search {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes.selected,
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-search_themes:hover {
|
||||
background: #fff;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.themes-section-feature_filter_themes {
|
||||
margin-top: 15px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details {
|
||||
background: #f5f5f5;
|
||||
margin: 0;
|
||||
padding: 8px 15px;
|
||||
border-top: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .customize-themes-section-title.selected.details-open {
|
||||
border-bottom-color: #f5f5f5;
|
||||
border-left-color: #f5f5f5;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.control-panel-themes .favorites-form.filter-details label {
|
||||
padding-bottom: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group {
|
||||
float: none;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button {
|
||||
padding: 18px 15px 8px 10px;
|
||||
line-height: 14px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend {
|
||||
position: relative;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button:after {
|
||||
content: "\f140";
|
||||
font: 20px/1 dashicons;
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button:hover,
|
||||
.control-panel-themes .filter-details .filter-group legend button:focus {
|
||||
color: #0073aa;
|
||||
border-bottom-color: #0073aa; /* Color change for focus style should be acceptable because border-bottom is barely visible previously. */
|
||||
outline: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group legend button.open:after {
|
||||
content: "\f142";
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group .filter-group-feature {
|
||||
display: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.control-panel-themes .filter-details .filter-group-feature label {
|
||||
border: 1px solid #ddd;
|
||||
border-top: 0;
|
||||
background: #fff;
|
||||
color: #555d66;
|
||||
margin: 0;
|
||||
padding: 12px 10px 12px 34px;
|
||||
width: calc(100% - 46px);
|
||||
line-height: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#customize-controls .customize-themes-panel > h2 {
|
||||
padding: 15px 8px 0 8px;
|
||||
.control-panel-themes .filter-details .filter-group-feature input {
|
||||
position: absolute;
|
||||
margin: 12px 10px;
|
||||
}
|
||||
|
||||
#customize-theme-controls .customize-themes-panel .accordion-section-content {
|
||||
background: transparent;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme {
|
||||
margin-bottom: 8px;
|
||||
.control-panel-themes .filter-details .filter-group-feature label:hover {
|
||||
color: #0073aa;
|
||||
}
|
||||
|
||||
#customize-theme-controls .themes.accordion-section-content {
|
||||
|
|
@ -1083,17 +1386,108 @@ p.customize-section-description {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.customize-themes-section .filter-drawer {
|
||||
border-top: none;
|
||||
display: block;
|
||||
background: transparent;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.customize-themes-section .clear-filters {
|
||||
margin-left: 8px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-themes-section .no-themes {
|
||||
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;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme { /* override most properties on .customize-control */
|
||||
box-sizing: border-box;
|
||||
width: 18.4%;
|
||||
margin: 0 2% 2% 0;
|
||||
padding: 0;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
/* 5 columns above 2100px */
|
||||
@media screen and (min-width: 2101px) {
|
||||
.customize-control.customize-control-theme:nth-child(5n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 4 columns up to 2100px */
|
||||
@media screen and (min-width: 1601px) and (max-width: 2100px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 23.5%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(4n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 3 columns up to 1600px */
|
||||
@media screen and (min-width: 1201px) and (max-width: 1600px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 2 columns up to 1200px */
|
||||
@media screen and (min-width: 851px) and (max-width: 1200px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.customize-control.customize-control-theme:nth-child(even) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 1 column up to 850 px */
|
||||
@media screen and (max-width: 850px) {
|
||||
.customize-control.customize-control-theme {
|
||||
width: 100%;
|
||||
margin: 0 0 3% 0;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .themes {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .theme {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wp-customizer .theme-browser .theme .theme-actions {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -1112,15 +1506,6 @@ p.customize-section-description {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.control-section-themes .accordion-section-title:after,
|
||||
.customize-themes-panel .accordion-section-title:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.customize-themes-panel.control-panel-content {
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
/* Details View */
|
||||
.wp-customizer .theme-overlay {
|
||||
display: none;
|
||||
|
|
@ -1135,31 +1520,58 @@ 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 15px;
|
||||
}
|
||||
|
||||
.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. */
|
||||
}
|
||||
|
||||
|
||||
/* Small Screens */
|
||||
@media (max-width:850px), (max-height:472px) {
|
||||
.wp-customizer .theme-overlay .theme-wrap {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -570,7 +570,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -570,7 +570,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -109,7 +109,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
|
||||
|
|
|
|||
|
|
@ -607,8 +607,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>
|
||||
|
|
@ -620,7 +618,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>
|
||||
|
|
@ -633,29 +631,47 @@ 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>
|
||||
|
||||
<# if ( data.stars && 0 != data.num_ratings ) { #>
|
||||
<div class="theme-rating">
|
||||
{{{ data.stars }}}
|
||||
<span class="num-ratings"><?php 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>
|
||||
<# } #>
|
||||
|
||||
<p class="theme-description">{{{ data.description }}}</p>
|
||||
|
||||
<# if ( data.parent ) { #>
|
||||
<p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></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 & Preview' ); ?></button>
|
||||
<# } #>
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
<?php
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -179,7 +179,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' );
|
||||
|
|
@ -907,6 +911,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' );
|
||||
|
||||
|
|
@ -949,6 +964,10 @@
|
|||
},
|
||||
$notice, newText;
|
||||
|
||||
if ( 'customize' === pagenow ) {
|
||||
$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
|
||||
}
|
||||
|
||||
if ( 'themes-network' === pagenow ) {
|
||||
$notice = $theme.find( '.update-message' );
|
||||
|
||||
|
|
@ -1003,6 +1022,10 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if ( 'customize' === pagenow ) {
|
||||
$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
|
||||
}
|
||||
|
||||
if ( 'themes-network' === pagenow ) {
|
||||
$notice = $theme.find( '.update-message ' );
|
||||
} else {
|
||||
|
|
@ -1139,12 +1162,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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -294,6 +294,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' );
|
||||
|
|
@ -348,6 +349,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( 'customize_register', array( $this, 'register_controls' ) );
|
||||
add_action( 'customize_register', array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first
|
||||
|
|
@ -361,6 +363,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' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2584,6 +2592,9 @@ 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' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -2798,6 +2809,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' ),
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
@ -2871,6 +2883,14 @@ 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 consider singular vs. plural forms */
|
||||
'themeSearchResults' => __( '%d themes found' ),
|
||||
/* translators: %d is the number of themes being displayed, which cannot consider singular vs. plural forms */
|
||||
'announceThemeCount' => __( 'Displaying %d themes' ),
|
||||
'announceThemeDetails' => __( 'Showing details for theme: %s' ),
|
||||
),
|
||||
);
|
||||
|
||||
// Prepare Customize Section objects to pass to JavaScript.
|
||||
|
|
@ -2974,8 +2994,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' );
|
||||
|
|
@ -2985,12 +3007,71 @@ final class WP_Customize_Manager {
|
|||
$this->register_control_type( 'WP_Customize_Site_Icon_Control' );
|
||||
$this->register_control_type( 'WP_Customize_Theme_Control' );
|
||||
|
||||
/* 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' ),
|
||||
'text_before' => __( 'Your local site' ),
|
||||
'action' => 'installed',
|
||||
'capability' => 'switch_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 0,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array(
|
||||
'title' => __( 'Search themes…' ),
|
||||
'text_before' => __( 'Browse all WordPress.org themes' ),
|
||||
'action' => 'search',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 5,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array(
|
||||
'title' => __( 'Featured' ),
|
||||
'action' => 'featured',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 10,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array(
|
||||
'title' => __( 'Popular' ),
|
||||
'action' => 'popular',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 15,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array(
|
||||
'title' => __( 'Latest' ),
|
||||
'action' => 'latest',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 20,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array(
|
||||
'title' => __( 'Feature Filter' ),
|
||||
'action' => 'feature_filter',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 25,
|
||||
) ) );
|
||||
|
||||
$this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array(
|
||||
'title' => __( 'Favorites' ),
|
||||
'action' => 'favorites',
|
||||
'capability' => 'install_themes',
|
||||
'panel' => 'themes',
|
||||
'priority' => 30,
|
||||
) ) );
|
||||
|
||||
// Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience).
|
||||
|
|
@ -2998,37 +3079,6 @@ final class WP_Customize_Manager {
|
|||
'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(
|
||||
|
|
@ -3355,6 +3405,150 @@ final class WP_Customize_Manager {
|
|||
$this->add_dynamic_settings( $setting_ids );
|
||||
}
|
||||
|
||||
/**
|
||||
* Load themes into the theme browsing/installation UI.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
*/
|
||||
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' );
|
||||
}
|
||||
|
||||
if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) {
|
||||
wp_send_json_error( 'empty_search' );
|
||||
} elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) {
|
||||
wp_send_json_error( 'empty_user' );
|
||||
} elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) {
|
||||
wp_send_json_error( 'no_features' );
|
||||
}
|
||||
|
||||
require_once( ABSPATH . 'wp-admin/includes/theme.php' );
|
||||
if ( 'installed' === $_POST['theme_action'] ) {
|
||||
$themes = array( 'themes' => wp_prepare_themes_for_js() );
|
||||
foreach ( $themes['themes'] as &$theme ) {
|
||||
$theme['type'] = 'installed';
|
||||
// Set active based on customized theme.
|
||||
if ( $_POST['customized_theme'] === $theme['id'] ) {
|
||||
$theme['active'] = true;
|
||||
} else {
|
||||
$theme['active'] = false;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if ( ! current_user_can( 'install_themes' ) ) {
|
||||
wp_die( -1 );
|
||||
}
|
||||
|
||||
// Arguments for all queries.
|
||||
$args = array(
|
||||
'per_page' => 100,
|
||||
'page' => absint( $_POST['page'] ),
|
||||
'fields' => array(
|
||||
'slug' => true,
|
||||
'screenshot' => true,
|
||||
'description' => true,
|
||||
'requires' => true,
|
||||
'rating' => true,
|
||||
'downloaded' => true,
|
||||
'downloadLink' => true,
|
||||
'last_updated' => true,
|
||||
'homepage' => true,
|
||||
'num_ratings' => true,
|
||||
'tags' => true,
|
||||
),
|
||||
);
|
||||
|
||||
// Specialized handling for each query.
|
||||
switch ( $_POST['theme_action'] ) {
|
||||
case 'search':
|
||||
$args['search'] = wp_unslash( $_POST['search'] );
|
||||
break;
|
||||
case 'favorites':
|
||||
$args['user'] = wp_unslash( $_POST['user'] );
|
||||
case 'featured':
|
||||
case 'popular':
|
||||
$args['browse'] = wp_unslash( $_POST['theme_action'] );
|
||||
break;
|
||||
case 'latest':
|
||||
$args['browse'] = 'new';
|
||||
break;
|
||||
case 'feature_filter':
|
||||
$args['tag'] = wp_unslash( $_POST['tags'] );
|
||||
break;
|
||||
}
|
||||
|
||||
// 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('a' => array('href' => array(), 'title' => array(), 'target' => array()),
|
||||
'abbr' => array('title' => array()), 'acronym' => array('title' => array()),
|
||||
'code' => array(), 'pre' => array(), 'em' => array(), 'strong' => array(),
|
||||
'div' => array(), 'p' => array(), 'ul' => array(), 'ol' => array(), 'li' => array(),
|
||||
'h1' => array(), 'h2' => array(), 'h3' => array(), 'h4' => array(), 'h5' => array(), 'h6' => array(),
|
||||
'img' => array('src' => array(), 'class' => array(), 'alt' => array())
|
||||
);
|
||||
|
||||
// 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' );
|
||||
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 = $_POST['theme_action'];
|
||||
}
|
||||
|
||||
// Set active based on customized theme.
|
||||
if ( $_POST['customized_theme'] === $theme->slug ) {
|
||||
$theme->active = true;
|
||||
} else {
|
||||
$theme->active = false;
|
||||
}
|
||||
|
||||
// Map available theme properties to installed theme properties.
|
||||
$theme->id = $theme->slug;
|
||||
$theme->screenshot = array( $theme->screenshot_url );
|
||||
$theme->authorAndUri = $theme->author;
|
||||
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.
|
||||
*
|
||||
|
|
|
|||
|
|
@ -62,18 +62,22 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
|
|||
* @access public
|
||||
*/
|
||||
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>
|
||||
|
|
@ -81,25 +85,34 @@ 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>
|
||||
|
||||
|
||||
<# 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 printf( __( 'New version available. %s' ), '<button class="button-link update-theme" type="button">' . __( 'Update now' ) . '</button>' ); ?></p></div>
|
||||
<# } #>
|
||||
|
||||
<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
|
||||
|
||||
<# if ( data.theme.isActiveTheme ) { #>
|
||||
<h3 class="theme-name" id="{{ data.theme.id }}-name">
|
||||
<# 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>Current:</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-theme-id="{{ 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 }}" data-theme-id="{{ data.theme.id }}"><?php _e( 'Install & Preview' ); ?></button>
|
||||
</div>
|
||||
<# } #>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,113 @@
|
|||
<?php
|
||||
/**
|
||||
* Customize API: WP_Customize_Themes_Panel class
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Customize
|
||||
* @since 4.7.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* Customize Themes Panel Class
|
||||
*
|
||||
* @since 4.7.0
|
||||
*
|
||||
* @see WP_Customize_Panel
|
||||
*/
|
||||
class WP_Customize_Themes_Panel extends WP_Customize_Panel {
|
||||
|
||||
/**
|
||||
* Panel type.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
* @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.7.0
|
||||
* @access protected
|
||||
*/
|
||||
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.7.0
|
||||
* @access protected
|
||||
*
|
||||
* @see WP_Customize_Panel::print_template()
|
||||
*/
|
||||
protected function content_template() {
|
||||
?>
|
||||
<li class="filter-themes-count">
|
||||
<span class="themes-displayed"><?php
|
||||
/* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or translate as "Themes: %s" */
|
||||
echo sprintf( __( 'Displaying %s themes' ), '<span class="theme-count">0</span>' );
|
||||
?></span>
|
||||
<button type="button" class="button button-primary see-themes"><?php
|
||||
/* translators: %s: number of themes displayed; plural forms cannot be accomodated here so assume plurality or omit the count and translate as "Show themes" */
|
||||
echo sprintf( __( 'Show %s themes' ), '<span class="theme-count">0</span>' );
|
||||
?></button>
|
||||
<button type="button" class="button button-primary filter-themes"><?php _e( 'Filter themes' ); ?></button>
|
||||
</li>
|
||||
<li class="panel-meta customize-info accordion-section <# if ( ! data.description ) { #> cannot-expand<# } #>">
|
||||
<button class="customize-panel-back" tabindex="-1"><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" tabindex="0" 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-container"></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
|
||||
}
|
||||
}
|
||||
|
|
@ -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 in tabbed sections.
|
||||
*
|
||||
* @since 4.2.0
|
||||
*
|
||||
|
|
@ -28,57 +28,115 @@ 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, featured, latest, etc.).
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $action = '';
|
||||
|
||||
/**
|
||||
* Text before theme section heading.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
* @var string
|
||||
*/
|
||||
public $text_before = '';
|
||||
|
||||
/**
|
||||
* Get section parameters for JS.
|
||||
*
|
||||
* @since 4.7.0
|
||||
* @access public
|
||||
* @return array Exported parameters.
|
||||
*/
|
||||
public function json() {
|
||||
$exported = parent::json();
|
||||
$exported['action'] = $this->action;
|
||||
$exported['text_before'] = $this->text_before;
|
||||
|
||||
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.7.0
|
||||
* @access protected
|
||||
*/
|
||||
protected function render() {
|
||||
$classes = 'accordion-section control-section control-section-' . $this->type;
|
||||
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;
|
||||
<li id="accordion-section-{{ data.id }}" class="theme-section">
|
||||
<# if ( '' !== data.text_before ) { #>
|
||||
<p class="customize-themes-text-before">{{ data.text_before }}</p>
|
||||
<# } #>
|
||||
<# if ( 'search' === data.action ) { #>
|
||||
<div class="search-form customize-themes-section-title themes-section-search_themes">
|
||||
<label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label>
|
||||
<input placeholder="{{ data.title }}" type="text" 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>
|
||||
<# } else { #>
|
||||
<# if ( 'favorites' === data.action || 'feature_filter' === data.action ) {
|
||||
var attr = ' aria-expanded="false"';
|
||||
} 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">
|
||||
<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">
|
||||
var attr = '';
|
||||
} #>
|
||||
<button type="button" class="customize-themes-section-title themes-section-{{ data.id }}"{{{ attr }}}>{{ data.title }}</button>
|
||||
<# } #>
|
||||
<?php if ( ! current_user_can( 'install_themes' ) || is_multisite() ) : ?>
|
||||
<# if ( 'installed' === data.action ) { #>
|
||||
<p class="themes-filter-container">
|
||||
<label for="themes-filter">
|
||||
<span class="screen-reader-text"><?php _e( 'Search installed themes…' ); ?></span>
|
||||
<input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
|
||||
</label>
|
||||
</p>
|
||||
<# } #>
|
||||
<?php endif; ?>
|
||||
<# if ( 'favorites' === data.action ) { #>
|
||||
<div class="favorites-form filter-details">
|
||||
<p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p>
|
||||
<p>
|
||||
<label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label>
|
||||
<input type="search" id="wporg-username-input" value="">
|
||||
<button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button>
|
||||
</p>
|
||||
</div>
|
||||
<# } else if ( 'feature_filter' === data.action ) { #>
|
||||
<div class="filter-drawer filter-details">
|
||||
<?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;
|
||||
$feature_list = get_theme_feature_list();
|
||||
foreach ( $feature_list as $feature_name => $features ) {
|
||||
echo '<fieldset class="filter-group">';
|
||||
$feature_name = esc_html( $feature_name );
|
||||
echo '<legend><button type="button" class="button-link" aria-expanded="false">' . $feature_name . '</button></legend>';
|
||||
echo '<div class="filter-group-feature">';
|
||||
foreach ( $features as $feature => $feature_name ) {
|
||||
$feature = esc_attr( $feature );
|
||||
echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> ';
|
||||
echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>';
|
||||
}
|
||||
echo '</div>';
|
||||
echo '</fieldset>';
|
||||
}
|
||||
?>
|
||||
<button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button>
|
||||
</h3>
|
||||
|
||||
</div>
|
||||
<# } #>
|
||||
<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…' ); ?></span>
|
||||
<input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" />
|
||||
</label></p>
|
||||
<?php endif; ?>
|
||||
<div class="theme-browser rendered">
|
||||
<ul class="themes accordion-section-content">
|
||||
<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’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="spinner"></p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '4.7-alpha-38812';
|
||||
$wp_version = '4.7-alpha-38813';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
|
|
|||
Loading…
Reference in New Issue