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

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

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

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

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

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


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

wp-admin/css/common-rtl.css

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

wp-admin/css/common.css

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

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

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

wp-admin/css/customize-controls.css

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

wp-admin/css/install-rtl.css

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

wp-admin/css/install.css

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

wp-admin/css/list-tables-rtl.css

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

wp-admin/css/list-tables.css

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

wp-admin/css/nav-menus-rtl.css

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

wp-admin/css/nav-menus.css

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

wp-admin/css/themes-rtl.css

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

wp-admin/css/themes.css

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

wp-admin/customize.php

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

wp-admin/includes/theme.php

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

wp-admin/js/updates.js

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

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

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

wp-includes/css/admin-bar-rtl.css

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

wp-includes/css/admin-bar.css

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

wp-includes/css/wp-embed-template.css

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

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

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

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

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

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

wp-includes/version.php

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