Customize: Revert theme install feature.

This is a great goal for core, and is close, but it is not in shape to be shipped for 4.7 and there is not enough time left in the development cycle to alter and polish sufficiently. There are bugs, but more than that, there are more fundamental questions around the use of existing UI, general UX, and how findable themes are (not) on the .org side.

see #37661.

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


git-svn-id: http://core.svn.wordpress.org/trunk@39080 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -308,17 +308,21 @@ body {
 }
 
 #customize-theme-controls .customize-pane-child.open,
-#customize-theme-controls .customize-pane-child.current-panel {
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.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-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 {
 	visibility: hidden;
 	height: 0;
 	overflow: hidden;
@@ -329,8 +333,10 @@ 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,
@@ -340,6 +346,13 @@ 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;
@@ -1150,21 +1163,15 @@ p.customize-section-description {
 	animation: customize-reload .75s;
 }
 
-#customize-theme-controls .control-panel-themes {
+#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
-	border-bottom: none;
+#customize-theme-controls .control-section-themes .accordion-section-title {
-}
-
-#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;
-	border-left: none;
+	margin-top: 0;
-	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. */
@@ -1172,14 +1179,29 @@ p.customize-section-description {
 	border-top: 0;
 }
 
-.control-panel-themes .accordion-section-title span.customize-action,
+#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,
 #customize-controls .customize-section-title span.customize-action {
 	font-size: 13px;
 	display: block;
 	font-weight: 400;
 }
 
-.control-panel-themes .accordion-section-title .change-theme {
+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
 	position: absolute;
 	left: 10px;
 	top: 50%;
@@ -1187,391 +1209,38 @@ p.customize-section-description {
 	font-weight: 400;
 }
 
-#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
+#customize-controls .control-section-themes .accordion-section-title:before {
 	display: none;
 }
 
-.control-panel-themes .customize-themes-full-container {
+#customize-controls .customize-themes-panel {
-	position: fixed;
+	padding: 0 8px;
-	top: 0;
+	background: #f1f1f1;
-	right: 0;
-	-webkit-transition: .18s right ease-in-out;
-	transition: .18s right ease-in-out;
-	margin: 0 300px 0 0;
-	padding:25px;
-	overflow-y: scroll;
-	width: -webkit-calc(100% - 350px);
-	width: calc(100% - 350px);
-	height: -webkit-calc(100% - 50px);
-	height: calc(100% - 50px);
-	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;
-	-webkit-transition: .18s top ease-in-out;
-	transition: .18s top ease-in-out;
-}
-
-#customize-footer-actions,
-#customize-footer-actions .collapse-sidebar {
-	bottom: 0;
-	-webkit-transition: .18s bottom ease-in-out;
-	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" */
-@-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: 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: -webkit-calc(100% - 93px);
-		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: -webkit-calc(100% - 50px);
-		width: calc(100% - 50px);
-		margin: 0;
-		top: 46px;
-		height: -webkit-calc(100% - 96px);
-		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;
-	-webkit-box-shadow: none;
-	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;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-	width: 20px;
-	height: 20px;
-	padding: 3px 1px 1px 3px; /* Re-align the icon to the smaller grid */
-	-webkit-border-radius: 100%;
-	border-radius: 100%;
-	position: absolute;
-	top: 9px;
-	left: 15px;
-	background: #0073aa;
-	color: #fff;
 }
 
-.control-panel-themes .customize-themes-section-title.selected {
+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
-	color: #0073aa;
+	margin-top: 0;
 }
 
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
+#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
-	border-right: none;
+	font-size: 14px;
-	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;
-	-webkit-box-shadow: none;
-	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;
-	-webkit-box-shadow: 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: -webkit-calc(100% - 46px);
-	width: calc(100% - 46px);
-	line-height: 16px;
 	font-weight: 600;
 }
 
-.control-panel-themes .filter-details .filter-group-feature input {
+#customize-controls .customize-themes-panel > h2 {
-	position: absolute;
+	padding: 15px 8px 0 8px;
-	margin: 12px 10px;
 }
 
-.control-panel-themes .filter-details .filter-group-feature label:hover {
+#customize-theme-controls .customize-themes-panel .accordion-section-content {
-	color: #0073aa;
+	background: transparent;
+	display: block;
+}
+
+.customize-control.customize-control-theme {
+	margin-bottom: 8px;
 }
 
 #customize-theme-controls .themes.accordion-section-content {
@@ -1581,111 +1250,17 @@ p.customize-section-description {
 	width: 100%;
 }
 
-.loading .customize-themes-section .spinner {
-	display: block;
-	visibility: visible;
-	position: relative;
-	clear: both;
-	width: 20px;
-	height: 20px;
-	right: -webkit-calc(50% - 10px);
-	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 */
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	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;
 }
 
@@ -1704,6 +1279,15 @@ 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;
@@ -1718,58 +1302,31 @@ 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're only one or two actions, match the UI pattern of media modals and right-align the action. */
+	text-align: left; /* Because there's only one action, match the pattern of media modals and right-align the action. */
-	padding: 10px 15px;
 }
 
-.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
+.ie8 .wp-customizer .theme-overlay .theme-header,
-	margin-right: 8px;
+.ie8 .wp-customizer .theme-overlay .theme-about,
+.ie8 .wp-customizer .theme-overlay .theme-actions {
+	position: static;
 }
 
-.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 {

wp-admin/css/customize-controls.css

@@ -308,17 +308,21 @@ body {
 }
 
 #customize-theme-controls .customize-pane-child.open,
-#customize-theme-controls .customize-pane-child.current-panel {
+#customize-theme-controls .customize-pane-child.current-panel,
+#customize-theme-controls .customize-themes-panel.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-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 {
 	visibility: hidden;
 	height: 0;
 	overflow: hidden;
@@ -329,8 +333,10 @@ 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,
@@ -340,6 +346,13 @@ 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;
@@ -1150,21 +1163,15 @@ p.customize-section-description {
 	animation: customize-reload .75s;
 }
 
-#customize-theme-controls .control-panel-themes {
+#customize-theme-controls .control-section-themes .accordion-section-title:hover, /* Not a focusable element. */
-	border-bottom: none;
+#customize-theme-controls .control-section-themes .accordion-section-title {
-}
-
-#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;
-	border-right: none;
+	margin-top: 0;
-	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. */
@@ -1172,14 +1179,29 @@ p.customize-section-description {
 	border-top: 0;
 }
 
-.control-panel-themes .accordion-section-title span.customize-action,
+#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,
 #customize-controls .customize-section-title span.customize-action {
 	font-size: 13px;
 	display: block;
 	font-weight: 400;
 }
 
-.control-panel-themes .accordion-section-title .change-theme {
+#customize-controls .control-section-themes .accordion-section-title .change-theme,
+#customize-controls .customize-themes-panel .accordion-section-title .customize-theme {
 	position: absolute;
 	right: 10px;
 	top: 50%;
@@ -1187,391 +1209,38 @@ p.customize-section-description {
 	font-weight: 400;
 }
 
-#customize-theme-controls .control-panel-themes > .accordion-section-title:after {
+#customize-controls .control-section-themes .accordion-section-title:before {
 	display: none;
 }
 
-.control-panel-themes .customize-themes-full-container {
+#customize-controls .customize-themes-panel {
-	position: fixed;
+	padding: 0 8px;
-	top: 0;
+	background: #f1f1f1;
-	left: 0;
-	-webkit-transition: .18s left ease-in-out;
-	transition: .18s left ease-in-out;
-	margin: 0 0 0 300px;
-	padding:25px;
-	overflow-y: scroll;
-	width: -webkit-calc(100% - 350px);
-	width: calc(100% - 350px);
-	height: -webkit-calc(100% - 50px);
-	height: calc(100% - 50px);
-	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;
-	-webkit-transition: .18s top ease-in-out;
-	transition: .18s top ease-in-out;
-}
-
-#customize-footer-actions,
-#customize-footer-actions .collapse-sidebar {
-	bottom: 0;
-	-webkit-transition: .18s bottom ease-in-out;
-	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" */
-@-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: 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: -webkit-calc(100% - 93px);
-		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: -webkit-calc(100% - 50px);
-		width: calc(100% - 50px);
-		margin: 0;
-		top: 46px;
-		height: -webkit-calc(100% - 96px);
-		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;
-	-webkit-box-shadow: none;
-	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;
 	-webkit-box-sizing: border-box;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
-	width: 20px;
-	height: 20px;
-	padding: 3px 3px 1px 1px; /* Re-align the icon to the smaller grid */
-	-webkit-border-radius: 100%;
-	border-radius: 100%;
-	position: absolute;
-	top: 9px;
-	right: 15px;
-	background: #0073aa;
-	color: #fff;
 }
 
-.control-panel-themes .customize-themes-section-title.selected {
+#customize-controls .customize-themes-panel .accordion-section-title:first-child {
-	color: #0073aa;
+	margin-top: 0;
 }
 
-.control-panel-themes .customize-themes-section-title.themes-section-search_themes {
+#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) {
-	border-left: none;
+	font-size: 14px;
-	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;
-	-webkit-box-shadow: none;
-	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;
-	-webkit-box-shadow: 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: -webkit-calc(100% - 46px);
-	width: calc(100% - 46px);
-	line-height: 16px;
 	font-weight: 600;
 }
 
-.control-panel-themes .filter-details .filter-group-feature input {
+#customize-controls .customize-themes-panel > h2 {
-	position: absolute;
+	padding: 15px 8px 0 8px;
-	margin: 12px 10px;
 }
 
-.control-panel-themes .filter-details .filter-group-feature label:hover {
+#customize-theme-controls .customize-themes-panel .accordion-section-content {
-	color: #0073aa;
+	background: transparent;
+	display: block;
+}
+
+.customize-control.customize-control-theme {
+	margin-bottom: 8px;
 }
 
 #customize-theme-controls .themes.accordion-section-content {
@@ -1581,111 +1250,17 @@ p.customize-section-description {
 	width: 100%;
 }
 
-.loading .customize-themes-section .spinner {
-	display: block;
-	visibility: visible;
-	position: relative;
-	clear: both;
-	width: 20px;
-	height: 20px;
-	left: -webkit-calc(50% - 10px);
-	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 */
-	-webkit-box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	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;
 }
 
@@ -1704,6 +1279,15 @@ 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;
@@ -1718,58 +1302,31 @@ 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're only one or two actions, match the UI pattern of media modals and right-align the action. */
+	text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */
-	padding: 10px 15px;
 }
 
-.wp-customizer .theme-overlay .theme-actions .theme-install.preview {
+.ie8 .wp-customizer .theme-overlay .theme-header,
-	margin-left: 8px;
+.ie8 .wp-customizer .theme-overlay .theme-about,
+.ie8 .wp-customizer .theme-overlay .theme-actions {
+	position: static;
 }
 
-.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 {

wp-admin/css/themes-rtl.css

@@ -570,7 +570,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	float: right;
 	margin: 0 0 0 30px;
 	width: 55%;
-	max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
+	max-width: 880px;
 	text-align: center;
 }
 

wp-admin/css/themes.css

@@ -570,7 +570,7 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
 	float: left;
 	margin: 0 30px 0 0;
 	width: 55%;
-	max-width: 1200px; /* Recommended theme screenshot width, set here to avoid stretching */
+	max-width: 880px;
 	text-align: center;
 }
 

wp-admin/customize.php

@@ -109,8 +109,7 @@ $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

wp-admin/includes/theme.php

@@ -609,6 +609,8 @@ 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 +622,7 @@ function customize_themes_print_templates() {
 			</div>
 			<div class="theme-about wp-clearfix">
 				<div class="theme-screenshots">
-				<# if ( data.screenshot && data.screenshot[0] ) { #>
+				<# if ( data.screenshot[0] ) { #>
 					<div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div>
 				<# } else { #>
 					<div class="screenshot blank"></div>
@@ -633,48 +635,30 @@ 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">
-				<# if ( data.active ) { #>
+					<div class="inactive-theme">
-					<button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></a>
+						<?php
-				<# } else if ( 'installed' === data.type ) { #>
+						/* translators: %s: Theme name */
-					<?php if ( current_user_can( 'delete_themes' ) ) { ?>
+						$aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' );
-						<# 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>
+						<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>
-						<# } #>
-					<?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>
+			<# } #>
+		</div>
 	</script>
 	<?php
 }

wp-admin/includes/update-core.php

@@ -710,6 +710,7 @@ $_old_files = array(
 'wp-includes/class-feed.php',
 'wp-includes/locale.php',
 'wp-includes/session.php',
+'wp-includes/customize/class-wp-customize-themes-panel.php', // Removed in beta; when the feature comes back remember to remove it from this array. See #37661.
 );
 
 /**

wp-admin/js/updates.js

@@ -180,13 +180,9 @@
 
 		if ( $notice.length ) {
 			$notice.replaceWith( $adminNotice );
-		} else {
-			if ( 'customize' === pagenow ) {
-				$( '.customize-themes-notifications' ).append( $adminNotice );
 		} else {
 			$( '.wrap' ).find( '> h1' ).after( $adminNotice );
 		}
-		}
 
 		$document.trigger( 'wp-updates-notice-added' );
 	};
@@ -930,17 +926,6 @@
 		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' );
 
@@ -983,10 +968,6 @@
 			},
 			$notice, newText;
 
-		if ( 'customize' === pagenow ) {
-			$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
-		}
-
 		if ( 'themes-network' === pagenow ) {
 			$notice = $theme.find( '.update-message' );
 
@@ -1041,10 +1022,6 @@
 			return;
 		}
 
-		if ( 'customize' === pagenow ) {
-			$theme = wp.customize.control( 'installed_theme_' + response.slug ).container;
-		}
-
 		if ( 'themes-network' === pagenow ) {
 			$notice = $theme.find( '.update-message ' );
 		} else {
@@ -1181,16 +1158,6 @@
 			return;
 		}
 
-		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 {
 		if ( $document.find( 'body' ).hasClass( 'full-overlay-active' ) ) {
 			$button = $( '.theme-install[data-slug="' + response.slug + '"]' );
 			$card   = $( '.install-theme-info' ).prepend( $message );
@@ -1198,7 +1165,6 @@
 			$card   = $( '[data-slug="' + response.slug + '"]' ).removeClass( 'focus' ).addClass( 'theme-install-failed' ).append( $message );
 			$button = $card.find( '.theme-install' );
 		}
-		}
 
 		$button
 			.removeClass( 'updating-message' )

wp-includes/class-wp-customize-manager.php

@@ -295,7 +295,6 @@ 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' );
@@ -351,7 +350,6 @@ 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
@@ -368,12 +366,6 @@ 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' );
-		}
 	}
 
 	/**
@@ -2758,9 +2750,6 @@ 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' );
-		}
 	}
 
 	/**
@@ -2975,7 +2964,6 @@ 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' ),
 		);
 
 		/**
@@ -3049,14 +3037,6 @@ 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.
@@ -3160,10 +3140,8 @@ 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' );
@@ -3174,80 +3152,50 @@ final class WP_Customize_Manager {
 		$this->register_control_type( 'WP_Customize_Site_Icon_Control' );
 		$this->register_control_type( 'WP_Customize_Theme_Control' );
 
-		/* Themes (controls are loaded via ajax) */
+		/* Themes */
 
-		$this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array(
+		$this->add_section( new WP_Customize_Themes_Section( $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,
-		) ) );
-
-		if ( ! is_multisite() ) {
-			$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).
 		$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(
@@ -3700,150 +3648,6 @@ 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.
 	 *

wp-includes/customize/class-wp-customize-theme-control.php

@@ -62,22 +62,18 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 	 * @access public
 	 */
 	public function content_template() {
-		/* translators: %s: theme name */
+		$current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] );
-		$details_label = sprintf( __( 'Details for theme: %s' ), '{{ data.theme.name }}' );
+		$active_url  = esc_url( remove_query_arg( 'customize_theme', $current_url ) );
-		/* translators: %s: theme name */
+		$preview_url = esc_url( add_query_arg( 'customize_theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces.
-		$customize_label = sprintf( __( 'Customize theme: %s' ), '{{ data.theme.name }}' );
+		$preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url );
-		/* 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.active ) { #>
+		<# if ( data.theme.isActiveTheme ) { #>
-			<div class="theme active" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
+			<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">
 		<# } else { #>
-			<div class="theme" tabindex="0" aria-describedby="{{ data.section }}-{{ data.theme.id }}-action {{ data.theme.id }}-name">
+			<div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name">
 		<# } #>
 
-			<# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #>
+			<# if ( data.theme.screenshot[0] ) { #>
 				<div class="theme-screenshot">
 					<img data-src="{{ data.theme.screenshot[0] }}" alt="" />
 				</div>
@@ -85,34 +81,25 @@ class WP_Customize_Theme_Control extends WP_Customize_Control {
 				<div class="theme-screenshot blank"></div>
 			<# } #>
 
-			<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 ( data.theme.isActiveTheme ) { #>
-
+				<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span>
-
+			<# } else { #>
-			<# if ( 'installed' === data.theme.type && data.theme.hasUpdate ) { #>
+				<span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span>
-				<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>
 			<# } #>
 
-			<# if ( data.theme.active ) { #>
+			<div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div>
-				<h3 class="theme-name" id="{{ data.section }}-{{ data.theme.id }}-name">
+
+			<# if ( data.theme.isActiveTheme ) { #>
+				<h3 class="theme-name" id="{{ data.theme.id }}-name">
 					<?php
 					/* translators: %s: theme name */
-					printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' );
+					printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' );
 					?>
 				</h3>
-				<div class="theme-actions">
-					<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>
+				<h3 class="theme-name" id="{{ 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 & Preview' ); ?></button>
+					<button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button>
 				</div>
 			<# } #>
 		</div>

wp-includes/customize/class-wp-customize-themes-panel.php

@@ -1,113 +0,0 @@
-<?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 accommodated 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 accommodated 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
-	}
-}

wp-includes/customize/class-wp-customize-themes-section.php

@@ -10,7 +10,7 @@
 /**
  * Customize Themes Section class.
  *
- * A UI container for theme controls, which are displayed in tabbed sections.
+ * A UI container for theme controls, which behaves like a backwards Panel.
  *
  * @since 4.2.0
  *
@@ -28,115 +28,57 @@ class WP_Customize_Themes_Section extends WP_Customize_Section {
 	public $type = 'themes';
 
 	/**
-	 * Theme section action.
+	 * Render the themes section, which behaves like a panel.
 	 *
-	 * Defines the type of themes to load (installed, featured, latest, etc.).
+	 * @since 4.2.0
-	 *
-	 * @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_template() {
+	protected function render() {
+		$classes = 'accordion-section control-section control-section-' . $this->type;
 		?>
-		<li id="accordion-section-{{ data.id }}" class="theme-section">
+		<li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>">
-			<# if ( '' !== data.text_before ) { #>
+			<h3 class="accordion-section-title">
-				<p class="customize-themes-text-before">{{ data.text_before }}</p>
+				<?php
-			<# } #>
+				if ( $this->manager->is_theme_active() ) {
-			<# if ( 'search' === data.action ) { #>
+					echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title;
-				<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 {
-					var attr = '';
+					echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title;
-				} #>
+				}
-				<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() ) : ?>
+				<?php if ( count( $this->controls ) > 0 ) : ?>
-				<# if ( 'installed' === data.action ) { #>
+					<button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button>
-					<p class="themes-filter-container">
+				<?php endif; ?>
-						<label for="themes-filter">
+			</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">
+					<?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>
+
+				<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>
+					</label></p>
-					</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
-					$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>';
-					}
-					?>
-				</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 class="theme-browser rendered">
-					<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 accordion-section-content">
-					<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>

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.7-beta1-39139';
+$wp_version = '4.7-beta1-39140';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.