| 1 | Index: src/wp-admin/css/customize-controls.css |
|---|
| 2 | =================================================================== |
|---|
| 3 | --- src/wp-admin/css/customize-controls.css (revision 38260) |
|---|
| 4 | +++ src/wp-admin/css/customize-controls.css (working copy) |
|---|
| 5 | @@ -975,29 +975,25 @@ |
|---|
| 6 | animation: customize-reload .75s; |
|---|
| 7 | } |
|---|
| 8 | |
|---|
| 9 | -.control-section-themes .accordion-section-title { |
|---|
| 10 | +.control-panel-themes .accordion-section-title { |
|---|
| 11 | cursor: default; |
|---|
| 12 | } |
|---|
| 13 | |
|---|
| 14 | -#customize-theme-controls .control-section-themes .accordion-section-title:hover, |
|---|
| 15 | -#customize-theme-controls .control-section-themes .accordion-section-title:focus { |
|---|
| 16 | +#customize-theme-controls .control-panel-themes > .accordion-section-title:hover, |
|---|
| 17 | +#customize-theme-controls .control-panel-themes > .accordion-section-title:focus { |
|---|
| 18 | color: #555; |
|---|
| 19 | background-color: #fff; |
|---|
| 20 | } |
|---|
| 21 | |
|---|
| 22 | -.control-section-themes .accordion-section-title { |
|---|
| 23 | +#customize-theme-controls .control-panel-themes > .accordion-section-title { |
|---|
| 24 | margin: 15px 0; |
|---|
| 25 | -} |
|---|
| 26 | - |
|---|
| 27 | -.customize-themes-panel .accordion-section-title { |
|---|
| 28 | - margin: 15px -8px; |
|---|
| 29 | -} |
|---|
| 30 | - |
|---|
| 31 | -.control-section-themes .accordion-section-title { |
|---|
| 32 | padding-right: 100px; /* Space for the button */ |
|---|
| 33 | + border-top: 1px solid #ddd; |
|---|
| 34 | + border-bottom: 1px solid #ddd; |
|---|
| 35 | + border-right: 0; |
|---|
| 36 | } |
|---|
| 37 | |
|---|
| 38 | -.control-section-themes .accordion-section-title span.customize-action, |
|---|
| 39 | +.control-panel-themes .accordion-section-title span.customize-action, |
|---|
| 40 | #customize-controls .customize-section-title span.customize-action { |
|---|
| 41 | font-size: 13px; |
|---|
| 42 | display: block; |
|---|
| 43 | @@ -1004,8 +1000,7 @@ |
|---|
| 44 | font-weight: 400; |
|---|
| 45 | } |
|---|
| 46 | |
|---|
| 47 | -.control-section-themes .accordion-section-title .change-theme, |
|---|
| 48 | -.control-section-themes .accordion-section-title .customize-theme { |
|---|
| 49 | +.control-panel-themes .accordion-section-title .change-theme { |
|---|
| 50 | position: absolute; |
|---|
| 51 | right: 10px; |
|---|
| 52 | top: 50%; |
|---|
| 53 | @@ -1013,45 +1008,191 @@ |
|---|
| 54 | font-weight: 400; |
|---|
| 55 | } |
|---|
| 56 | |
|---|
| 57 | -.control-section-themes .accordion-section-title:before { |
|---|
| 58 | +#customize-theme-controls .control-panel-themes > .accordion-section-title:after { |
|---|
| 59 | display: none; |
|---|
| 60 | } |
|---|
| 61 | |
|---|
| 62 | -.customize-themes-panel { |
|---|
| 63 | +.control-panel-themes .control-panel-content { |
|---|
| 64 | display: none; |
|---|
| 65 | - padding: 0 8px; |
|---|
| 66 | - background: #f1f1f1; |
|---|
| 67 | - -webkit-box-sizing: border-box; |
|---|
| 68 | - -moz-box-sizing: border-box; |
|---|
| 69 | - box-sizing: border-box; |
|---|
| 70 | + position: fixed; |
|---|
| 71 | + width: 100%; |
|---|
| 72 | + height: 100%; |
|---|
| 73 | + top: 0; |
|---|
| 74 | + left: -100%; |
|---|
| 75 | + background: #eee; |
|---|
| 76 | + z-index: 10; |
|---|
| 77 | + transition: .2s left ease-in-out; |
|---|
| 78 | + margin: 0; |
|---|
| 79 | + padding: 0; |
|---|
| 80 | + overflow-y: auto; |
|---|
| 81 | } |
|---|
| 82 | |
|---|
| 83 | -.customize-themes-panel .accordion-section-title:first-child { |
|---|
| 84 | - margin-top: 0; |
|---|
| 85 | +.in-themes-panel .control-panel-themes .control-panel-content { |
|---|
| 86 | + left: 0; |
|---|
| 87 | } |
|---|
| 88 | |
|---|
| 89 | -#customize-controls .customize-themes-panel .accordion-section-title:nth-child(2) { |
|---|
| 90 | - font-size: 14px; |
|---|
| 91 | - font-weight: 600; |
|---|
| 92 | +#customize-controls, |
|---|
| 93 | +#customize-footer-actions, |
|---|
| 94 | +#customize-footer-actions .collapse-sidebar { |
|---|
| 95 | + left: 0; |
|---|
| 96 | + transition: .2s left ease-in-out; |
|---|
| 97 | } |
|---|
| 98 | |
|---|
| 99 | +.in-themes-panel #customize-controls, |
|---|
| 100 | +.in-themes-panel #customize-preview, |
|---|
| 101 | +.in-themes-panel #customize-footer-actions, |
|---|
| 102 | +.in-themes-panel #customize-footer-actions .collapse-sidebar { |
|---|
| 103 | + left: 100%; |
|---|
| 104 | +} |
|---|
| 105 | + |
|---|
| 106 | .customize-themes-panel > h2 { |
|---|
| 107 | padding: 15px 8px 0 8px; |
|---|
| 108 | } |
|---|
| 109 | |
|---|
| 110 | -.control-section.open .customize-themes-panel { |
|---|
| 111 | - display: block; |
|---|
| 112 | +.control-panel-themes .panel-meta .current-theme { |
|---|
| 113 | + position: absolute; |
|---|
| 114 | + right: 0; |
|---|
| 115 | + top: 0; |
|---|
| 116 | + background: #fff; |
|---|
| 117 | + border-left: 1px solid #ddd; |
|---|
| 118 | + padding: 15px 125px 15px 25px; |
|---|
| 119 | } |
|---|
| 120 | |
|---|
| 121 | -#customize-theme-controls .customize-themes-panel .accordion-section-content { |
|---|
| 122 | +.control-panel-themes .panel-meta .customize-theme { |
|---|
| 123 | + position: absolute; |
|---|
| 124 | + bottom: 15px; |
|---|
| 125 | + right: 25px; |
|---|
| 126 | +} |
|---|
| 127 | + |
|---|
| 128 | +.control-panel-themes .panel-meta h2 { |
|---|
| 129 | + font-size: 32px; |
|---|
| 130 | + font-weight: 200; |
|---|
| 131 | + margin: 0 25px; |
|---|
| 132 | + padding: 15px 0; |
|---|
| 133 | + line-height: 50px; |
|---|
| 134 | + float: left; |
|---|
| 135 | +} |
|---|
| 136 | + |
|---|
| 137 | +.control-panel-themes .panel-meta { |
|---|
| 138 | + min-height: 80px; |
|---|
| 139 | + overflow: hidden; |
|---|
| 140 | +} |
|---|
| 141 | + |
|---|
| 142 | +.control-panel-themes .panel-meta .page-title-action { |
|---|
| 143 | + margin-top: 28px; |
|---|
| 144 | +} |
|---|
| 145 | + |
|---|
| 146 | +/* Mobile header */ |
|---|
| 147 | +@media screen and (max-width:700px) { |
|---|
| 148 | + .control-panel-themes .panel-meta .current-theme { |
|---|
| 149 | + width: calc(100% - 150px); |
|---|
| 150 | + position: relative; |
|---|
| 151 | + border-bottom: 1px solid #ddd; |
|---|
| 152 | + } |
|---|
| 153 | +} |
|---|
| 154 | + |
|---|
| 155 | +.control-panel-themes .customize-themes-notifications .notice { |
|---|
| 156 | + margin: 0 25px 15px 25px; |
|---|
| 157 | +} |
|---|
| 158 | + |
|---|
| 159 | +#customize-theme-section-navigation { |
|---|
| 160 | + margin: 0 25px 15px 25px; |
|---|
| 161 | + width: calc(100% - 50px); |
|---|
| 162 | +} |
|---|
| 163 | + |
|---|
| 164 | +.control-panel-themes .wp-filter .customize-help-toggle { |
|---|
| 165 | + float: right; |
|---|
| 166 | + padding: 10px; |
|---|
| 167 | + height: 40px; |
|---|
| 168 | + width: 40px; |
|---|
| 169 | + margin: 5px; |
|---|
| 170 | background: transparent; |
|---|
| 171 | - display: block; |
|---|
| 172 | + border: none; |
|---|
| 173 | + box-shadow: none; |
|---|
| 174 | + cursor: pointer; |
|---|
| 175 | + color: #555; |
|---|
| 176 | } |
|---|
| 177 | |
|---|
| 178 | -.customize-control.customize-control-theme { |
|---|
| 179 | - margin-bottom: 8px; |
|---|
| 180 | +.control-panel-themes .wp-filter .customize-help-toggle:hover { |
|---|
| 181 | + color: #0073aa; |
|---|
| 182 | } |
|---|
| 183 | |
|---|
| 184 | +.control-panel-themes .wp-filter .customize-help-toggle:focus, |
|---|
| 185 | +.control-panel-themes .wp-filter .customize-help-toggle.toggled { |
|---|
| 186 | + color: #0073aa; |
|---|
| 187 | + border-radius: 100%; |
|---|
| 188 | + box-shadow: 0 0 0 1px #5b9dd9, |
|---|
| 189 | + 0 0 2px 1px rgba(30, 140, 190, .8); |
|---|
| 190 | + outline: 0; |
|---|
| 191 | +} |
|---|
| 192 | + |
|---|
| 193 | +.control-panel-themes .customize-panel-description { |
|---|
| 194 | + position: absolute; |
|---|
| 195 | + right: -1px; |
|---|
| 196 | + z-index: 5; |
|---|
| 197 | + background: #fff; |
|---|
| 198 | + font-size: 14px; |
|---|
| 199 | + width: 300px; |
|---|
| 200 | + border: 1px solid #ddd; |
|---|
| 201 | + border-top: none; |
|---|
| 202 | + padding: 5px 25px 15px 10px; |
|---|
| 203 | + text-align: right; |
|---|
| 204 | + display: none; |
|---|
| 205 | +} |
|---|
| 206 | + |
|---|
| 207 | +.control-panel-themes .theme-section { |
|---|
| 208 | + width: calc(100% - 50px); |
|---|
| 209 | + padding: 0 25px 25px 25px; |
|---|
| 210 | + margin: 0; |
|---|
| 211 | + display: none !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ |
|---|
| 212 | + overflow: hidden; |
|---|
| 213 | +} |
|---|
| 214 | + |
|---|
| 215 | +.control-panel-themes .theme-section.current-section { |
|---|
| 216 | + display: list-item !important; /* There is unknown JS that perpetually tries to show all theme sections when more items are added. */ |
|---|
| 217 | +} |
|---|
| 218 | + |
|---|
| 219 | +#customize-theme-section-navigation .customize-themes-section-title { |
|---|
| 220 | + display: inline-block; |
|---|
| 221 | + margin: 0 10px; |
|---|
| 222 | + padding: 15px 0; |
|---|
| 223 | + background: #fff; |
|---|
| 224 | + border: 0; |
|---|
| 225 | + border-bottom: 4px solid #fff; |
|---|
| 226 | + color: #555; |
|---|
| 227 | + cursor: pointer; |
|---|
| 228 | +} |
|---|
| 229 | + |
|---|
| 230 | +.filter-links .themes-section-feature_filter_themes:before { |
|---|
| 231 | + content: "\f111"; |
|---|
| 232 | + font: 16px/1 dashicons; |
|---|
| 233 | + position: relative; |
|---|
| 234 | + top: 2px; |
|---|
| 235 | + margin-right: 4px; |
|---|
| 236 | +} |
|---|
| 237 | + |
|---|
| 238 | +#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes { |
|---|
| 239 | + border-bottom: none; |
|---|
| 240 | + padding: 10px 0; |
|---|
| 241 | +} |
|---|
| 242 | + |
|---|
| 243 | +#customize-theme-section-navigation .customize-themes-section-title.selected { |
|---|
| 244 | + border-bottom: 4px solid #555; |
|---|
| 245 | +} |
|---|
| 246 | + |
|---|
| 247 | +#customize-theme-section-navigation .customize-themes-section-title:hover, |
|---|
| 248 | +#customize-theme-section-navigation .customize-themes-section-title:focus { |
|---|
| 249 | + color: #0073aa; |
|---|
| 250 | + border-bottom: 4px solid #0073aa; |
|---|
| 251 | + box-shadow: none; |
|---|
| 252 | + outline: none; |
|---|
| 253 | +} |
|---|
| 254 | + |
|---|
| 255 | +#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes.selected, |
|---|
| 256 | +#customize-theme-section-navigation .customize-themes-section-title.themes-section-search_themes:hover { |
|---|
| 257 | + border-bottom: none; |
|---|
| 258 | +} |
|---|
| 259 | + |
|---|
| 260 | #customize-theme-controls .themes.accordion-section-content { |
|---|
| 261 | position: relative; |
|---|
| 262 | left: 0; |
|---|
| 263 | @@ -1059,15 +1200,112 @@ |
|---|
| 264 | width: 100%; |
|---|
| 265 | } |
|---|
| 266 | |
|---|
| 267 | -.wp-customizer .theme-browser .themes { |
|---|
| 268 | - padding-bottom: 8px; |
|---|
| 269 | +.theme-section.loading .spinner { |
|---|
| 270 | + display: block; |
|---|
| 271 | + visibility: visible; |
|---|
| 272 | + position: relative; |
|---|
| 273 | + clear: both; |
|---|
| 274 | + width: 20px; |
|---|
| 275 | + height: 20px; |
|---|
| 276 | + left: calc(50% - 10px); |
|---|
| 277 | + float: none; |
|---|
| 278 | + margin-top: 50px; |
|---|
| 279 | } |
|---|
| 280 | |
|---|
| 281 | -.wp-customizer .theme-browser .theme { |
|---|
| 282 | +.customize-themes-section .filter-drawer { |
|---|
| 283 | + border-top: none; |
|---|
| 284 | + display: block; |
|---|
| 285 | + background: transparent; |
|---|
| 286 | + padding-top: 5px; |
|---|
| 287 | +} |
|---|
| 288 | + |
|---|
| 289 | +.customize-themes-section .clear-filters { |
|---|
| 290 | + margin-left: 8px; |
|---|
| 291 | + display: none; |
|---|
| 292 | +} |
|---|
| 293 | + |
|---|
| 294 | +#accordion-section-feature_filter_themes .theme-browser { |
|---|
| 295 | + display: none; /* Shown with JS once filters are applied */ |
|---|
| 296 | +} |
|---|
| 297 | + |
|---|
| 298 | +.customize-themes-section .no-themes { |
|---|
| 299 | + display: none; |
|---|
| 300 | +} |
|---|
| 301 | + |
|---|
| 302 | +#accordion-section-installed_themes .theme .notice-success { |
|---|
| 303 | + display: none; |
|---|
| 304 | +} |
|---|
| 305 | + |
|---|
| 306 | +.control-panel-themes .theme-browser .theme .theme-actions .button-primary { |
|---|
| 307 | + margin: 0 0 0 8px; |
|---|
| 308 | +} |
|---|
| 309 | + |
|---|
| 310 | +.customize-control-theme .theme { |
|---|
| 311 | + width: 100%; |
|---|
| 312 | margin: 0; |
|---|
| 313 | - width: 100%; |
|---|
| 314 | } |
|---|
| 315 | |
|---|
| 316 | +.customize-control.customize-control-theme { /* override most properties on .customize-control */ |
|---|
| 317 | + box-sizing: border-box; |
|---|
| 318 | + width: 18.4%; |
|---|
| 319 | + margin: 0 2% 2% 0; |
|---|
| 320 | + padding: 0; |
|---|
| 321 | + clear: none; |
|---|
| 322 | +} |
|---|
| 323 | + |
|---|
| 324 | +/* 5 columns above 2100px */ |
|---|
| 325 | +@media screen and (min-width: 2101px) { |
|---|
| 326 | + .customize-control.customize-control-theme:nth-child(5n) { |
|---|
| 327 | + margin-right: 0; |
|---|
| 328 | + } |
|---|
| 329 | +} |
|---|
| 330 | + |
|---|
| 331 | +/* 4 columns up to 2100px */ |
|---|
| 332 | +@media screen and (min-width: 1601px) and (max-width: 2100px) { |
|---|
| 333 | + .customize-control.customize-control-theme { |
|---|
| 334 | + width: 23.5%; |
|---|
| 335 | + } |
|---|
| 336 | + |
|---|
| 337 | + .customize-control.customize-control-theme:nth-child(4n) { |
|---|
| 338 | + margin-right: 0; |
|---|
| 339 | + } |
|---|
| 340 | +} |
|---|
| 341 | + |
|---|
| 342 | +/* 3 columns up to 1600px */ |
|---|
| 343 | +@media screen and (min-width: 1101px) and (max-width: 1600px) { |
|---|
| 344 | + .customize-control.customize-control-theme { |
|---|
| 345 | + width: 32%; |
|---|
| 346 | + } |
|---|
| 347 | + |
|---|
| 348 | + .customize-control.customize-control-theme:nth-child(3n) { |
|---|
| 349 | + margin-right: 0; |
|---|
| 350 | + } |
|---|
| 351 | +} |
|---|
| 352 | + |
|---|
| 353 | +/* 2 columns up to 1100px */ |
|---|
| 354 | +@media screen and (min-width: 501px) and (max-width: 1100px) { |
|---|
| 355 | + .customize-control.customize-control-theme { |
|---|
| 356 | + width: 49%; |
|---|
| 357 | + } |
|---|
| 358 | + |
|---|
| 359 | + .customize-control.customize-control-theme:nth-child(even) { |
|---|
| 360 | + margin-right: 0; |
|---|
| 361 | + } |
|---|
| 362 | +} |
|---|
| 363 | + |
|---|
| 364 | +/* 1 column up to 500 px */ |
|---|
| 365 | +@media screen and (max-width: 500px) { |
|---|
| 366 | + .customize-control.customize-control-theme { |
|---|
| 367 | + width: 100%; |
|---|
| 368 | + margin: 0 0 3% 0; |
|---|
| 369 | + } |
|---|
| 370 | +} |
|---|
| 371 | + |
|---|
| 372 | + |
|---|
| 373 | +.wp-customizer .theme-browser .themes { |
|---|
| 374 | + padding-bottom: 8px; |
|---|
| 375 | +} |
|---|
| 376 | + |
|---|
| 377 | .wp-customizer .theme-browser .theme .theme-actions { |
|---|
| 378 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; |
|---|
| 379 | opacity: 1; |
|---|
| 380 | @@ -1088,27 +1326,15 @@ |
|---|
| 381 | width: 100%; |
|---|
| 382 | } |
|---|
| 383 | |
|---|
| 384 | -#accordion-section-themes .accordion-section-title:after { |
|---|
| 385 | +#accordion-panel-themes .accordion-section-title:after { |
|---|
| 386 | display: none; |
|---|
| 387 | } |
|---|
| 388 | |
|---|
| 389 | -#customize-theme-controls .control-section-themes.current-panel > h3.accordion-section-title { |
|---|
| 390 | +#customize-theme-controls .control-panel-themes.current-panel > h3.accordion-section-title { |
|---|
| 391 | left: 0; |
|---|
| 392 | } |
|---|
| 393 | |
|---|
| 394 | -.customize-themes-panel.control-panel-content { |
|---|
| 395 | - position: absolute; |
|---|
| 396 | - left: -100%; |
|---|
| 397 | - top: 0; |
|---|
| 398 | - width: 100%; |
|---|
| 399 | - border-top: 1px solid #ddd; |
|---|
| 400 | -} |
|---|
| 401 | |
|---|
| 402 | -.in-themes-panel #customize-info, |
|---|
| 403 | -.in-themes-panel #customize-theme-controls > ul > .accordion-section { |
|---|
| 404 | - left: 100%; |
|---|
| 405 | -} |
|---|
| 406 | - |
|---|
| 407 | /* Details View */ |
|---|
| 408 | .wp-customizer .theme-overlay { |
|---|
| 409 | display: none; |
|---|
| 410 | @@ -1129,6 +1355,15 @@ |
|---|
| 411 | z-index: 110; |
|---|
| 412 | } |
|---|
| 413 | |
|---|
| 414 | +.wp-customizer .theme-overlay .star-rating { |
|---|
| 415 | + float: left; |
|---|
| 416 | + margin-right: 8px; |
|---|
| 417 | +} |
|---|
| 418 | + |
|---|
| 419 | +.wp-customizer .theme-rating .num-ratings { |
|---|
| 420 | + line-height: 20px; |
|---|
| 421 | +} |
|---|
| 422 | + |
|---|
| 423 | .wp-customizer .theme-overlay .theme-wrap { |
|---|
| 424 | left: 90px; |
|---|
| 425 | right: 90px; |
|---|
| 426 | @@ -1139,9 +1374,14 @@ |
|---|
| 427 | } |
|---|
| 428 | |
|---|
| 429 | .wp-customizer .theme-overlay .theme-actions { |
|---|
| 430 | - text-align: right; /* Because there's only one action, match the pattern of media modals and right-align the action. */ |
|---|
| 431 | + text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */ |
|---|
| 432 | + padding: 10px 15px; |
|---|
| 433 | } |
|---|
| 434 | |
|---|
| 435 | +.wp-customizer .theme-overlay .theme-actions .theme-install.preview { |
|---|
| 436 | + margin-left: 8px; |
|---|
| 437 | +} |
|---|
| 438 | + |
|---|
| 439 | .modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content { |
|---|
| 440 | overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */ |
|---|
| 441 | } |
|---|
| 442 | Index: src/wp-admin/includes/theme.php |
|---|
| 443 | =================================================================== |
|---|
| 444 | --- src/wp-admin/includes/theme.php (revision 38260) |
|---|
| 445 | +++ src/wp-admin/includes/theme.php (working copy) |
|---|
| 446 | @@ -606,7 +606,9 @@ |
|---|
| 447 | * @since 4.2.0 |
|---|
| 448 | */ |
|---|
| 449 | function customize_themes_print_templates() { |
|---|
| 450 | - $preview_url = esc_url( add_query_arg( 'theme', '__THEME__' ) ); // Token because esc_url() strips curly braces. |
|---|
| 451 | + $current_url = set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'] ); |
|---|
| 452 | + $active_url = esc_url( remove_query_arg( 'theme', $current_url ) ); |
|---|
| 453 | + $preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces. |
|---|
| 454 | $preview_url = str_replace( '__THEME__', '{{ data.id }}', $preview_url ); |
|---|
| 455 | ?> |
|---|
| 456 | <script type="text/html" id="tmpl-customize-themes-details-view"> |
|---|
| 457 | @@ -619,7 +621,7 @@ |
|---|
| 458 | </div> |
|---|
| 459 | <div class="theme-about wp-clearfix"> |
|---|
| 460 | <div class="theme-screenshots"> |
|---|
| 461 | - <# if ( data.screenshot[0] ) { #> |
|---|
| 462 | + <# if ( data.screenshot && data.screenshot[0] ) { #> |
|---|
| 463 | <div class="screenshot"><img src="{{ data.screenshot[0] }}" alt="" /></div> |
|---|
| 464 | <# } else { #> |
|---|
| 465 | <div class="screenshot blank"></div> |
|---|
| 466 | @@ -632,29 +634,46 @@ |
|---|
| 467 | <# } #> |
|---|
| 468 | <h2 class="theme-name">{{{ data.name }}}<span class="theme-version"><?php printf( __( 'Version: %s' ), '{{ data.version }}' ); ?></span></h2> |
|---|
| 469 | <h3 class="theme-author"><?php printf( __( 'By %s' ), '{{{ data.authorAndUri }}}' ); ?></h3> |
|---|
| 470 | + |
|---|
| 471 | + <# if ( data.stars && 0 != data.num_ratings ) { #> |
|---|
| 472 | + <div class="theme-rating"> |
|---|
| 473 | + {{{ data.stars }}} |
|---|
| 474 | + <span class="num-ratings"><?php echo sprintf( __( '(%s ratings)' ), '{{ data.num_ratings }}' ); ?></span> |
|---|
| 475 | + </div> |
|---|
| 476 | + <# } #> |
|---|
| 477 | + |
|---|
| 478 | + <# if ( false == false && data.hasUpdate ) { // @todo patch updates.js to work in the customizer #> |
|---|
| 479 | + <div class="notice notice-warning notice-alt notice-large"> |
|---|
| 480 | + <h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3> |
|---|
| 481 | + {{{ data.update }}} |
|---|
| 482 | + </div> |
|---|
| 483 | + <# } #> |
|---|
| 484 | + |
|---|
| 485 | <p class="theme-description">{{{ data.description }}}</p> |
|---|
| 486 | |
|---|
| 487 | <# if ( data.parent ) { #> |
|---|
| 488 | <p class="parent-theme"><?php printf( __( 'This is a child theme of %s.' ), '<strong>{{{ data.parent }}}</strong>' ); ?></p> |
|---|
| 489 | <# } #> |
|---|
| 490 | - |
|---|
| 491 | <# if ( data.tags ) { #> |
|---|
| 492 | - <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{ data.tags }}</p> |
|---|
| 493 | + <p class="theme-tags"><span><?php _e( 'Tags:' ); ?></span> {{{ data.tags }}}</p> |
|---|
| 494 | <# } #> |
|---|
| 495 | </div> |
|---|
| 496 | </div> |
|---|
| 497 | |
|---|
| 498 | - <# if ( ! data.active ) { #> |
|---|
| 499 | - <div class="theme-actions"> |
|---|
| 500 | - <div class="inactive-theme"> |
|---|
| 501 | - <?php |
|---|
| 502 | - /* translators: %s: Theme name */ |
|---|
| 503 | - $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' ); |
|---|
| 504 | - ?> |
|---|
| 505 | - <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> |
|---|
| 506 | - </div> |
|---|
| 507 | - </div> |
|---|
| 508 | - <# } #> |
|---|
| 509 | + <div class="theme-actions"> |
|---|
| 510 | + <# if ( data.active ) { #> |
|---|
| 511 | + <?php |
|---|
| 512 | + /* translators: %s: Theme name */ |
|---|
| 513 | + $aria_label = sprintf( __( 'Preview %s' ), '{{ data.name }}' ); |
|---|
| 514 | + ?> |
|---|
| 515 | + <button type="button" class="button button-primary customize-theme" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Customize' ); ?></a> |
|---|
| 516 | + <# } else if ( 'installed' === data.type ) { #> |
|---|
| 517 | + <button type="button" class="button button-primary preview-theme" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-label="<?php echo esc_attr( $aria_label ); ?>"><?php _e( 'Live Preview' ); ?></span> |
|---|
| 518 | + <# } else { #> |
|---|
| 519 | + <button type="button" class="button theme-install" data-slug="{{ data.id }}"><?php _e( 'Install' ); ?></button> |
|---|
| 520 | + <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.id }}" data-previewurl="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Install & Preview' ); ?></button> |
|---|
| 521 | + <# } #> |
|---|
| 522 | + </div> |
|---|
| 523 | </div> |
|---|
| 524 | </script> |
|---|
| 525 | <?php |
|---|
| 526 | Index: src/wp-admin/js/customize-controls.js |
|---|
| 527 | =================================================================== |
|---|
| 528 | --- src/wp-admin/js/customize-controls.js (revision 38260) |
|---|
| 529 | +++ src/wp-admin/js/customize-controls.js (working copy) |
|---|
| 530 | @@ -774,8 +775,8 @@ |
|---|
| 531 | /** |
|---|
| 532 | * wp.customize.ThemesSection |
|---|
| 533 | * |
|---|
| 534 | - * Custom section for themes that functions similarly to a backwards panel, |
|---|
| 535 | - * and also handles the theme-details view rendering and navigation. |
|---|
| 536 | + * Custom section for themes that loads themes by category, and also |
|---|
| 537 | + * handles the theme-details view rendering and navigation. |
|---|
| 538 | * |
|---|
| 539 | * @constructor |
|---|
| 540 | * @augments wp.customize.Section |
|---|
| 541 | @@ -787,18 +788,14 @@ |
|---|
| 542 | template: '', |
|---|
| 543 | screenshotQueue: null, |
|---|
| 544 | $window: $( window ), |
|---|
| 545 | + loaded: 0, |
|---|
| 546 | + loading: false, |
|---|
| 547 | + fullyLoaded: false, |
|---|
| 548 | + term: '', |
|---|
| 549 | |
|---|
| 550 | /** |
|---|
| 551 | * @since 4.2.0 |
|---|
| 552 | */ |
|---|
| 553 | - initialize: function () { |
|---|
| 554 | - this.$customizeSidebar = $( '.wp-full-overlay-sidebar-content:first' ); |
|---|
| 555 | - return api.Section.prototype.initialize.apply( this, arguments ); |
|---|
| 556 | - }, |
|---|
| 557 | - |
|---|
| 558 | - /** |
|---|
| 559 | - * @since 4.2.0 |
|---|
| 560 | - */ |
|---|
| 561 | ready: function () { |
|---|
| 562 | var section = this; |
|---|
| 563 | section.overlay = section.container.find( '.theme-overlay' ); |
|---|
| 564 | @@ -826,7 +823,7 @@ |
|---|
| 565 | } |
|---|
| 566 | }); |
|---|
| 567 | |
|---|
| 568 | - _.bindAll( this, 'renderScreenshots' ); |
|---|
| 569 | + _.bindAll( this, 'renderScreenshots', 'loadMore', 'checkTerm', 'filtersChecked', 'clearFilters' ); |
|---|
| 570 | }, |
|---|
| 571 | |
|---|
| 572 | /** |
|---|
| 573 | @@ -833,8 +830,8 @@ |
|---|
| 574 | * Override Section.isContextuallyActive method. |
|---|
| 575 | * |
|---|
| 576 | * Ignore the active states' of the contained theme controls, and just |
|---|
| 577 | - * use the section's own active state instead. This ensures empty search |
|---|
| 578 | - * results for themes to cause the section to become inactive. |
|---|
| 579 | + * use the section's own active state instead. This prevents empty search |
|---|
| 580 | + * results for theme sections from causing the section to become inactive. |
|---|
| 581 | * |
|---|
| 582 | * @since 4.2.0 |
|---|
| 583 | * |
|---|
| 584 | @@ -850,20 +847,22 @@ |
|---|
| 585 | attachEvents: function () { |
|---|
| 586 | var section = this; |
|---|
| 587 | |
|---|
| 588 | - // Expand/Collapse section/panel. |
|---|
| 589 | - section.container.find( '.change-theme, .customize-theme' ).on( 'click keydown', function( event ) { |
|---|
| 590 | - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { |
|---|
| 591 | - return; |
|---|
| 592 | - } |
|---|
| 593 | - event.preventDefault(); // Keep this AFTER the key filter above |
|---|
| 594 | - |
|---|
| 595 | - if ( section.expanded() ) { |
|---|
| 596 | - section.collapse(); |
|---|
| 597 | - } else { |
|---|
| 598 | + // Expand section/panel. Only collapse when opening another section. |
|---|
| 599 | + $( '#customize-theme-section-navigation' ).on( 'click', '.themes-section-' + section.id, function( event ) { |
|---|
| 600 | + if ( ! section.expanded() ) { |
|---|
| 601 | section.expand(); |
|---|
| 602 | } |
|---|
| 603 | }); |
|---|
| 604 | |
|---|
| 605 | + // Preview installed themes. |
|---|
| 606 | + section.container.on( 'click', '.theme-actions .preview-theme', function() { |
|---|
| 607 | + var previewUrl = $( this ).data( 'previewUrl' ); |
|---|
| 608 | + |
|---|
| 609 | + $( '.wp-full-overlay' ).addClass( 'customize-loading' ); |
|---|
| 610 | + |
|---|
| 611 | + window.parent.location = previewUrl; |
|---|
| 612 | + }); |
|---|
| 613 | + |
|---|
| 614 | // Theme navigation in details view. |
|---|
| 615 | section.container.on( 'click keydown', '.left', function( event ) { |
|---|
| 616 | if ( api.utils.isKeydownButNotEnterEvent( event ) ) { |
|---|
| 617 | @@ -909,18 +908,46 @@ |
|---|
| 618 | |
|---|
| 619 | // Update theme count. |
|---|
| 620 | count = section.container.find( 'li.customize-control:visible' ).length; |
|---|
| 621 | - section.container.find( '.theme-count' ).text( count ); |
|---|
| 622 | + $( '.control-panel-themes' ).find( '.theme-count' ).text( count ); |
|---|
| 623 | }); |
|---|
| 624 | |
|---|
| 625 | - // Pre-load the first 3 theme screenshots. |
|---|
| 626 | - api.bind( 'ready', function () { |
|---|
| 627 | - _.each( section.controls().slice( 0, 3 ), function ( control ) { |
|---|
| 628 | - var img, src = control.params.theme.screenshot[0]; |
|---|
| 629 | - if ( src ) { |
|---|
| 630 | - img = new Image(); |
|---|
| 631 | - img.src = src; |
|---|
| 632 | + // Event listeners for queries with user-entered terms. |
|---|
| 633 | + if ( 'search' === section.params.action ) { |
|---|
| 634 | + var debounced = _.debounce( section.checkTerm, 800 ); // Wait until there is no input for 800 miliseconds to initiate a search. |
|---|
| 635 | + $( '#customize-theme-section-navigation' ).on( 'keydown', '#wp-filter-search-input', function() { |
|---|
| 636 | + debounced( section ); |
|---|
| 637 | + }); |
|---|
| 638 | + } else if ( 'favorites' === section.params.action ) { |
|---|
| 639 | + section.container.on( 'click', '.favorites-form-submit', function() { |
|---|
| 640 | + section.checkTerm( section ); |
|---|
| 641 | + }); |
|---|
| 642 | + section.container.on( 'keydown', '#wporg-username-input', function( e ) { |
|---|
| 643 | + if ( api.utils.isKeydownButNotEnterEvent( e ) ) { |
|---|
| 644 | + return; |
|---|
| 645 | } |
|---|
| 646 | + section.checkTerm( section ); |
|---|
| 647 | }); |
|---|
| 648 | + } else if ( 'feature_filter' === section.params.action ) { |
|---|
| 649 | + section.container.on( 'click', '.filter-group input', function() { |
|---|
| 650 | + section.filtersChecked(); |
|---|
| 651 | + }); |
|---|
| 652 | + section.container.on( 'click', '.clear-filters', function() { |
|---|
| 653 | + section.clearFilters(); |
|---|
| 654 | + }); |
|---|
| 655 | + section.container.on( 'click', '.apply-filters', function() { |
|---|
| 656 | + section.checkTerm( section ); |
|---|
| 657 | + }); |
|---|
| 658 | + section.container.on( 'click', '.filtered-by .tags, .filtered-by button', function() { |
|---|
| 659 | + section.container.find( '.filter-group' ).show(); |
|---|
| 660 | + section.container.find( '.buttons' ).show(); |
|---|
| 661 | + section.container.find( '.filtered-by' ).hide(); |
|---|
| 662 | + section.container.find( '.theme-browser' ).hide(); |
|---|
| 663 | + }); |
|---|
| 664 | + } |
|---|
| 665 | + |
|---|
| 666 | + // Move section-expansion buttons to consolidated menu bar in themes panel. |
|---|
| 667 | + api.bind( 'ready', function () { |
|---|
| 668 | + section.container.find( '.customize-themes-section-title' ).appendTo( $( '#customize-theme-section-navigation .filter-links' ) ); |
|---|
| 669 | }); |
|---|
| 670 | }, |
|---|
| 671 | |
|---|
| 672 | @@ -945,70 +972,292 @@ |
|---|
| 673 | } |
|---|
| 674 | |
|---|
| 675 | // Note: there is a second argument 'args' passed |
|---|
| 676 | - var position, scroll, |
|---|
| 677 | - panel = this, |
|---|
| 678 | - section = panel.container.closest( '.accordion-section' ), |
|---|
| 679 | - overlay = section.closest( '.wp-full-overlay' ), |
|---|
| 680 | - container = section.closest( '.wp-full-overlay-sidebar-content' ), |
|---|
| 681 | - siblings = container.find( '.open' ), |
|---|
| 682 | - customizeBtn = section.find( '.customize-theme' ), |
|---|
| 683 | - changeBtn = section.find( '.change-theme' ), |
|---|
| 684 | - content = section.find( '.control-panel-content' ); |
|---|
| 685 | + var section = this, |
|---|
| 686 | + overlay = section.container.closest( '.wp-full-overlay-sidebar-content' ), |
|---|
| 687 | + container = section.container.closest( '.control-panel-content' ); |
|---|
| 688 | |
|---|
| 689 | if ( expanded ) { |
|---|
| 690 | |
|---|
| 691 | + // Load controls if none are loaded yet. |
|---|
| 692 | + if ( 0 === section.loaded ) { |
|---|
| 693 | + section.loadControls(); |
|---|
| 694 | + } |
|---|
| 695 | + |
|---|
| 696 | // Collapse any sibling sections/panels |
|---|
| 697 | api.section.each( function ( otherSection ) { |
|---|
| 698 | - if ( otherSection !== panel ) { |
|---|
| 699 | + if ( otherSection !== section ) { |
|---|
| 700 | otherSection.collapse( { duration: args.duration } ); |
|---|
| 701 | } |
|---|
| 702 | }); |
|---|
| 703 | - api.panel.each( function ( otherPanel ) { |
|---|
| 704 | - otherPanel.collapse( { duration: 0 } ); |
|---|
| 705 | - }); |
|---|
| 706 | |
|---|
| 707 | - content.show( 0, function() { |
|---|
| 708 | - position = content.offset().top; |
|---|
| 709 | - scroll = container.scrollTop(); |
|---|
| 710 | - content.css( 'margin-top', ( $( '#customize-header-actions' ).height() - position - scroll ) ); |
|---|
| 711 | - section.addClass( 'current-panel' ); |
|---|
| 712 | - overlay.addClass( 'in-themes-panel' ); |
|---|
| 713 | - container.scrollTop( 0 ); |
|---|
| 714 | - _.delay( panel.renderScreenshots, 10 ); // Wait for the controls |
|---|
| 715 | - panel.$customizeSidebar.on( 'scroll.customize-themes-section', _.throttle( panel.renderScreenshots, 300 ) ); |
|---|
| 716 | - if ( args.completeCallback ) { |
|---|
| 717 | - args.completeCallback(); |
|---|
| 718 | - } |
|---|
| 719 | - } ); |
|---|
| 720 | - customizeBtn.focus(); |
|---|
| 721 | + section.container.addClass( 'current-section' ); |
|---|
| 722 | + $( '#customize-theme-section-navigation .themes-section-' + section.id ).addClass( 'selected' ); |
|---|
| 723 | + container.on( 'scroll', _.throttle( section.renderScreenshots, 300 ) ); |
|---|
| 724 | + container.on( 'scroll', _.throttle( section.loadMore, 300 ) ); |
|---|
| 725 | + if ( args.completeCallback ) { |
|---|
| 726 | + args.completeCallback(); |
|---|
| 727 | + } |
|---|
| 728 | + section.updateCount(); // Show this section's count. |
|---|
| 729 | } else { |
|---|
| 730 | - siblings.removeClass( 'open' ); |
|---|
| 731 | - section.removeClass( 'current-panel' ); |
|---|
| 732 | - overlay.removeClass( 'in-themes-panel' ); |
|---|
| 733 | - panel.$customizeSidebar.off( 'scroll.customize-themes-section' ); |
|---|
| 734 | - content.delay( 180 ).hide( 0, function() { |
|---|
| 735 | - content.css( 'margin-top', 'inherit' ); // Reset |
|---|
| 736 | - if ( args.completeCallback ) { |
|---|
| 737 | - args.completeCallback(); |
|---|
| 738 | - } |
|---|
| 739 | - } ); |
|---|
| 740 | - customizeBtn.attr( 'tabindex', '0' ); |
|---|
| 741 | - changeBtn.focus(); |
|---|
| 742 | - container.scrollTop( 0 ); |
|---|
| 743 | + section.container.removeClass( 'current-section' ); |
|---|
| 744 | + $( '#customize-theme-section-navigation .themes-section-' + section.id ).removeClass( 'selected' ); |
|---|
| 745 | + container.off( 'scroll' ); |
|---|
| 746 | + if ( args.completeCallback ) { |
|---|
| 747 | + args.completeCallback(); |
|---|
| 748 | + } |
|---|
| 749 | } |
|---|
| 750 | }, |
|---|
| 751 | |
|---|
| 752 | /** |
|---|
| 753 | - * Recalculate the top margin. |
|---|
| 754 | + * Don't recalculate the top margin. |
|---|
| 755 | * |
|---|
| 756 | - * @since 4.4.0 |
|---|
| 757 | + * @since 4.7.0 |
|---|
| 758 | * @private |
|---|
| 759 | */ |
|---|
| 760 | - _recalculateTopMargin: function() { |
|---|
| 761 | - api.Panel.prototype._recalculateTopMargin.call( this ); |
|---|
| 762 | + _recalculateTopMargin: function() {}, |
|---|
| 763 | + |
|---|
| 764 | + /** |
|---|
| 765 | + * Load theme data via ajax and add themes to the section as controls. |
|---|
| 766 | + * |
|---|
| 767 | + * @since 4.7.0 |
|---|
| 768 | + */ |
|---|
| 769 | + loadControls: function() { |
|---|
| 770 | + var section = this, params, page, request, search; |
|---|
| 771 | + |
|---|
| 772 | + if ( section.loading ) { |
|---|
| 773 | + return; // We're already loading a batch of themes. |
|---|
| 774 | + } |
|---|
| 775 | + |
|---|
| 776 | + // Parameters for every API query. Additional params are set in PHP. |
|---|
| 777 | + page = Math.ceil( section.loaded / 100 ) + 1; |
|---|
| 778 | + params = { |
|---|
| 779 | + 'customize-themes-nonce': api.settings.nonce['customize-themes'], |
|---|
| 780 | + 'wp_customize': 'on', |
|---|
| 781 | + 'theme_action': section.params.action, |
|---|
| 782 | + 'customized_theme': api.settings.theme.stylesheet, |
|---|
| 783 | + 'page': page |
|---|
| 784 | + } |
|---|
| 785 | + |
|---|
| 786 | + // Add fields for special request actions. |
|---|
| 787 | + if ( 'search' === section.params.action ) { |
|---|
| 788 | + if ( '' === section.term ) { |
|---|
| 789 | + return; |
|---|
| 790 | + } else { |
|---|
| 791 | + params.search = section.term; |
|---|
| 792 | + } |
|---|
| 793 | + } else if ( 'favorites' === section.params.action ) { |
|---|
| 794 | + if ( '' === section.term ) { |
|---|
| 795 | + return; |
|---|
| 796 | + } else { |
|---|
| 797 | + params.user = section.term; |
|---|
| 798 | + } |
|---|
| 799 | + } else if ( 'feature_filter' === section.params.action ) { |
|---|
| 800 | + if ( '' === section.term ) { |
|---|
| 801 | + return; |
|---|
| 802 | + } else { |
|---|
| 803 | + params.tags = section.term; |
|---|
| 804 | + } |
|---|
| 805 | + } |
|---|
| 806 | + |
|---|
| 807 | + // Load themes. |
|---|
| 808 | + section.container.addClass( 'loading' ); |
|---|
| 809 | + section.loading = true; |
|---|
| 810 | + section.container.find( '.no-themes' ).hide(); |
|---|
| 811 | + request = wp.ajax.post( 'customize-load-themes', params ); |
|---|
| 812 | + request.done(function( data ) { |
|---|
| 813 | + var themes = data.themes, |
|---|
| 814 | + themeControl, newThemeControls; |
|---|
| 815 | + if ( 0 !== themes.length ) { |
|---|
| 816 | + newThemeControls = new Array(); |
|---|
| 817 | + // Add controls for each theme. |
|---|
| 818 | + _.each( themes, function ( theme ) { |
|---|
| 819 | + customizeId = section.params.action + '_theme_' + theme.id; |
|---|
| 820 | + themeControl = new api.controlConstructor.theme( customizeId, { |
|---|
| 821 | + params: { |
|---|
| 822 | + type: 'theme', |
|---|
| 823 | + content: '<li id="customize-control-theme-' + section.params.action + '_' + theme.id + '" class="customize-control customize-control-theme"></li>', |
|---|
| 824 | + section: section.params.id, |
|---|
| 825 | + active: true, |
|---|
| 826 | + theme: theme, |
|---|
| 827 | + priority: section.loaded + 1 |
|---|
| 828 | + }, |
|---|
| 829 | + previewer: api.previewer |
|---|
| 830 | + } ); |
|---|
| 831 | + |
|---|
| 832 | + api.control.add( customizeId, themeControl ); |
|---|
| 833 | + newThemeControls.push( themeControl ); |
|---|
| 834 | + section.loaded = section.loaded + 1; |
|---|
| 835 | + return; |
|---|
| 836 | + }); |
|---|
| 837 | + |
|---|
| 838 | + if ( 1 === page ) { |
|---|
| 839 | + // Pre-load the first 3 theme screenshots. |
|---|
| 840 | + _.each( section.controls().slice( 0, 3 ), function ( control ) { |
|---|
| 841 | + var img, src = control.params.theme.screenshot[0]; |
|---|
| 842 | + if ( src ) { |
|---|
| 843 | + img = new Image(); |
|---|
| 844 | + img.src = src; |
|---|
| 845 | + } |
|---|
| 846 | + }); |
|---|
| 847 | + } else { |
|---|
| 848 | + Array.prototype.push.apply( section.screenshotQueue, newThemeControls ); // Add new themes to the screenshot queue. |
|---|
| 849 | + } |
|---|
| 850 | + _.delay( section.renderScreenshots, 100 ); // Wait for the controls to become visible. |
|---|
| 851 | + |
|---|
| 852 | + if ( 'installed' === section.action || 100 > themes.length ) { // If we have less than the requested 100 themes, it's the end of the list. |
|---|
| 853 | + section.fullyLoaded = true; |
|---|
| 854 | + } |
|---|
| 855 | + } else { |
|---|
| 856 | + if ( 0 === section.loaded ) { |
|---|
| 857 | + section.container.find( '.no-themes' ).show(); |
|---|
| 858 | + } else { |
|---|
| 859 | + section.fullyLoaded = true; |
|---|
| 860 | + } |
|---|
| 861 | + } |
|---|
| 862 | + if ( 'installed' === section.params.action ) { |
|---|
| 863 | + section.updateCount(); |
|---|
| 864 | + } else { |
|---|
| 865 | + section.updateCount( data.info.results ); |
|---|
| 866 | + } |
|---|
| 867 | + section.container.find( '.unexpected-error' ).hide(); // Hide error notice in case it was previously shown. |
|---|
| 868 | + |
|---|
| 869 | + // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case. |
|---|
| 870 | + section.container.removeClass( 'loading' ); |
|---|
| 871 | + section.loading = false; |
|---|
| 872 | + }); |
|---|
| 873 | + request.fail(function( data ) { |
|---|
| 874 | + if ( 'undefined' === typeof data ) { |
|---|
| 875 | + section.container.find( '.unexpected-error' ).show(); |
|---|
| 876 | + } else if ( typeof console !== 'undefined' && console.error ) { |
|---|
| 877 | + console.error( data ); |
|---|
| 878 | + } |
|---|
| 879 | + |
|---|
| 880 | + // This cannot run on request.always, as section.loading may turn false before the new controls load in the success case. |
|---|
| 881 | + section.container.removeClass( 'loading' ); |
|---|
| 882 | + section.loading = false; |
|---|
| 883 | + }); |
|---|
| 884 | }, |
|---|
| 885 | |
|---|
| 886 | /** |
|---|
| 887 | + * Determines whether more themes should be loaded, and loads them. |
|---|
| 888 | + * |
|---|
| 889 | + * @since 4.7.0 |
|---|
| 890 | + */ |
|---|
| 891 | + loadMore: function() { |
|---|
| 892 | + var section = this, container, bottom, threshold, page; |
|---|
| 893 | + if ( ! section.fullyLoaded && ! section.loading ) { |
|---|
| 894 | + container = section.container.closest( '.control-panel-content' ); |
|---|
| 895 | + |
|---|
| 896 | + bottom = container.scrollTop() + container.height(); |
|---|
| 897 | + threshold = container.prop( 'scrollHeight' ) - 3000; // Use a fixed distance to the bottom of loaded results to avoid unnecessarily loading results sooner when using a percentage of scroll distance. |
|---|
| 898 | + |
|---|
| 899 | + if ( bottom > threshold ) { |
|---|
| 900 | + section.loadControls(); |
|---|
| 901 | + } |
|---|
| 902 | + } |
|---|
| 903 | + }, |
|---|
| 904 | + |
|---|
| 905 | + /** |
|---|
| 906 | + * Event handler for search, feature filter, and favorites input that determines if the term has changed and loads new controls as needed. |
|---|
| 907 | + * |
|---|
| 908 | + * @since 4.7.0 |
|---|
| 909 | + * |
|---|
| 910 | + * @param api.ThemesSection section The current theme section, passed through the debouncer. |
|---|
| 911 | + */ |
|---|
| 912 | + checkTerm: function( section ) { |
|---|
| 913 | + var newTerm, filteringBy; |
|---|
| 914 | + |
|---|
| 915 | + // Find term. |
|---|
| 916 | + if ( 'search' === section.params.action ) { |
|---|
| 917 | + newTerm = $( '#wp-filter-search-input' ).val(); |
|---|
| 918 | + } else if ( 'favorites' === section.params.action ) { |
|---|
| 919 | + newTerm = $( '#wporg-username-input' ).val(); |
|---|
| 920 | + } else if ( 'feature_filter' === section.params.action ) { |
|---|
| 921 | + newTerm = section.term; // Set separately by filtersChecked(), as they're changed. |
|---|
| 922 | + if ( '' === newTerm ) { |
|---|
| 923 | + return; |
|---|
| 924 | + } |
|---|
| 925 | + |
|---|
| 926 | + section.container.find( '.filter-group' ).hide(); |
|---|
| 927 | + section.container.find( '.buttons' ).hide(); |
|---|
| 928 | + section.container.find( '.filtered-by' ).show(); |
|---|
| 929 | + section.container.find( '.theme-browser' ).show(); |
|---|
| 930 | + filteringBy = section.container.find( '.filtered-by .tags' ); |
|---|
| 931 | + filteringBy.empty(); |
|---|
| 932 | + |
|---|
| 933 | + _.each( newTerm, function( tag ) { |
|---|
| 934 | + name = $( 'label[for="filter-id-' + tag + '"]' ).text(); |
|---|
| 935 | + filteringBy.append( '<span class="tag">' + name + '</span>' ); |
|---|
| 936 | + }); |
|---|
| 937 | + } else { |
|---|
| 938 | + return; |
|---|
| 939 | + } |
|---|
| 940 | + |
|---|
| 941 | + if ( section.term === newTerm && 'feature_filter' !== section.params.action ) { |
|---|
| 942 | + return; |
|---|
| 943 | + } |
|---|
| 944 | + // Clear the controls in the section. |
|---|
| 945 | + _.each( section.controls(), function( control ) { |
|---|
| 946 | + control.container.remove(); |
|---|
| 947 | + api.control.remove( control.id ); |
|---|
| 948 | + }); |
|---|
| 949 | + section.loaded = 0; |
|---|
| 950 | + section.fullyLoaded = false; |
|---|
| 951 | + section.screenshotQueue = null; |
|---|
| 952 | + |
|---|
| 953 | + if ( '' !== newTerm ) { // Empty term should not show any results. |
|---|
| 954 | + // Run a new query, with loadControls handling paging, etc. |
|---|
| 955 | + section.term = newTerm; |
|---|
| 956 | + section.loadControls(); |
|---|
| 957 | + } |
|---|
| 958 | + }, |
|---|
| 959 | + |
|---|
| 960 | + /** |
|---|
| 961 | + * Check for filters checked in the feature filter list. |
|---|
| 962 | + * |
|---|
| 963 | + * @since 4.7.0 |
|---|
| 964 | + */ |
|---|
| 965 | + filtersChecked: function() { |
|---|
| 966 | + var section = this, |
|---|
| 967 | + items = section.container.find( '.filter-group' ).find( ':checkbox' ), |
|---|
| 968 | + tags = []; |
|---|
| 969 | + |
|---|
| 970 | + if ( 'feature_filter' !== section.params.action ) { |
|---|
| 971 | + return false; |
|---|
| 972 | + } |
|---|
| 973 | + |
|---|
| 974 | + _.each( items.filter( ':checked' ), function( item ) { |
|---|
| 975 | + tags.push( $( item ).prop( 'value' ) ); |
|---|
| 976 | + }); |
|---|
| 977 | + |
|---|
| 978 | + // When no filters are checked, restore initial state and return |
|---|
| 979 | + if ( tags.length === 0 ) { |
|---|
| 980 | + section.container.find( '.filter-drawer .apply-filters' ).find( 'span' ).text( '' ); |
|---|
| 981 | + section.container.find( '.filter-drawer .clear-filters' ).hide(); |
|---|
| 982 | + section.term = ''; |
|---|
| 983 | + } else { |
|---|
| 984 | + section.container.find( '.filter-drawer .apply-filters' ).find( 'span' ).text( tags.length ); |
|---|
| 985 | + section.container.find( '.filter-drawer .clear-filters' ).css( 'display', 'inline-block' ); // $.show() manually. |
|---|
| 986 | + section.term = tags; |
|---|
| 987 | + } |
|---|
| 988 | + }, |
|---|
| 989 | + |
|---|
| 990 | + /** |
|---|
| 991 | + * Clear filters from the feature filter list. |
|---|
| 992 | + * |
|---|
| 993 | + * @since 4.7.0 |
|---|
| 994 | + */ |
|---|
| 995 | + clearFilters: function() { |
|---|
| 996 | + var section = this, |
|---|
| 997 | + items = section.container.find( '.filter-group' ).find( ':checkbox' ); |
|---|
| 998 | + |
|---|
| 999 | + _.each( items.filter( ':checked' ), function( item ) { |
|---|
| 1000 | + $( item ).prop( 'checked', false ); |
|---|
| 1001 | + }); |
|---|
| 1002 | + section.filtersChecked(); |
|---|
| 1003 | + }, |
|---|
| 1004 | + |
|---|
| 1005 | + /** |
|---|
| 1006 | * Render control's screenshot if the control comes into view. |
|---|
| 1007 | * |
|---|
| 1008 | * @since 4.2.0 |
|---|
| 1009 | @@ -1016,12 +1265,15 @@ |
|---|
| 1010 | renderScreenshots: function( ) { |
|---|
| 1011 | var section = this; |
|---|
| 1012 | |
|---|
| 1013 | - // Fill queue initially. |
|---|
| 1014 | - if ( section.screenshotQueue === null ) { |
|---|
| 1015 | - section.screenshotQueue = section.controls(); |
|---|
| 1016 | + // Fill queue initially, or check for more if empty. |
|---|
| 1017 | + if ( section.screenshotQueue === null || 0 === section.screenshotQueue.length ) { |
|---|
| 1018 | + // Add controls that haven't had their screenshots rendered. |
|---|
| 1019 | + section.screenshotQueue = _.filter( section.controls(), function( control ) { |
|---|
| 1020 | + return ! control.screenshotRendered; |
|---|
| 1021 | + }); |
|---|
| 1022 | } |
|---|
| 1023 | |
|---|
| 1024 | - // Are all screenshots rendered? |
|---|
| 1025 | + // Are all screenshots rendered (for now)? |
|---|
| 1026 | if ( ! section.screenshotQueue.length ) { |
|---|
| 1027 | return; |
|---|
| 1028 | } |
|---|
| 1029 | @@ -1057,6 +1309,18 @@ |
|---|
| 1030 | }, |
|---|
| 1031 | |
|---|
| 1032 | /** |
|---|
| 1033 | + * Update the number of themes in the section. |
|---|
| 1034 | + * |
|---|
| 1035 | + * @since 4.7.0 |
|---|
| 1036 | + */ |
|---|
| 1037 | + updateCount: function ( count ) { |
|---|
| 1038 | + if ( ! count ) { |
|---|
| 1039 | + count = this.loaded; |
|---|
| 1040 | + } |
|---|
| 1041 | + this.container.closest( '.control-panel-content' ).find( '.theme-count' ).text( count ); |
|---|
| 1042 | + }, |
|---|
| 1043 | + |
|---|
| 1044 | + /** |
|---|
| 1045 | * Advance the modal to the next theme. |
|---|
| 1046 | * |
|---|
| 1047 | * @since 4.2.0 |
|---|
| 1048 | @@ -1076,13 +1340,13 @@ |
|---|
| 1049 | * @since 4.2.0 |
|---|
| 1050 | */ |
|---|
| 1051 | getNextTheme: function () { |
|---|
| 1052 | - var control, next; |
|---|
| 1053 | - control = api.control( 'theme_' + this.currentTheme ); |
|---|
| 1054 | + var section = this, control, next; |
|---|
| 1055 | + control = api.control( section.params.action + '_theme_' + this.currentTheme ); |
|---|
| 1056 | next = control.container.next( 'li.customize-control-theme' ); |
|---|
| 1057 | if ( ! next.length ) { |
|---|
| 1058 | return false; |
|---|
| 1059 | } |
|---|
| 1060 | - next = next[0].id.replace( 'customize-control-', '' ); |
|---|
| 1061 | + next = next[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' ); |
|---|
| 1062 | control = api.control( next ); |
|---|
| 1063 | |
|---|
| 1064 | return control.params.theme; |
|---|
| 1065 | @@ -1108,13 +1372,13 @@ |
|---|
| 1066 | * @since 4.2.0 |
|---|
| 1067 | */ |
|---|
| 1068 | getPreviousTheme: function () { |
|---|
| 1069 | - var control, previous; |
|---|
| 1070 | - control = api.control( 'theme_' + this.currentTheme ); |
|---|
| 1071 | + var section = this, control, previous; |
|---|
| 1072 | + control = api.control( section.params.action + '_theme_' + this.currentTheme ); |
|---|
| 1073 | previous = control.container.prev( 'li.customize-control-theme' ); |
|---|
| 1074 | if ( ! previous.length ) { |
|---|
| 1075 | return false; |
|---|
| 1076 | } |
|---|
| 1077 | - previous = previous[0].id.replace( 'customize-control-', '' ); |
|---|
| 1078 | + previous = previous[0].id.replace( 'customize-control-theme-' + section.params.action, section.params.action + '_theme' ); |
|---|
| 1079 | control = api.control( previous ); |
|---|
| 1080 | |
|---|
| 1081 | return control.params.theme; |
|---|
| 1082 | @@ -1162,7 +1426,7 @@ |
|---|
| 1083 | closeDetails: function () { |
|---|
| 1084 | $( 'body' ).removeClass( 'modal-open' ); |
|---|
| 1085 | this.overlay.fadeOut( 'fast' ); |
|---|
| 1086 | - api.control( 'theme_' + this.currentTheme ).focus(); |
|---|
| 1087 | + api.control( this.params.action + '_theme_' + this.currentTheme ).container.find( '.theme' ).focus(); |
|---|
| 1088 | }, |
|---|
| 1089 | |
|---|
| 1090 | /** |
|---|
| 1091 | @@ -1452,7 +1716,252 @@ |
|---|
| 1092 | } |
|---|
| 1093 | }); |
|---|
| 1094 | |
|---|
| 1095 | + |
|---|
| 1096 | /** |
|---|
| 1097 | + * wp.customize.ThemesPanel |
|---|
| 1098 | + * |
|---|
| 1099 | + * Custom section for themes that displays without the customize preview. |
|---|
| 1100 | + * |
|---|
| 1101 | + * @constructor |
|---|
| 1102 | + * @augments wp.customize.Panel |
|---|
| 1103 | + * @augments wp.customize.Container |
|---|
| 1104 | + */ |
|---|
| 1105 | + api.ThemesPanel = api.Panel.extend({ |
|---|
| 1106 | + installingThemes: [], |
|---|
| 1107 | + |
|---|
| 1108 | + /** |
|---|
| 1109 | + * @since 4.7.0 |
|---|
| 1110 | + */ |
|---|
| 1111 | + attachEvents: function () { |
|---|
| 1112 | + var panel = this; |
|---|
| 1113 | + |
|---|
| 1114 | + // Expand/Collapse panel. |
|---|
| 1115 | + panel.container.on( 'click', '.change-theme, .customize-theme', function( event ) { |
|---|
| 1116 | + if ( panel.expanded() ) { |
|---|
| 1117 | + panel.collapse(); |
|---|
| 1118 | + } else { |
|---|
| 1119 | + panel.expand(); |
|---|
| 1120 | + } |
|---|
| 1121 | + }); |
|---|
| 1122 | + |
|---|
| 1123 | + // Toggle help display. |
|---|
| 1124 | + panel.container.on( 'click', '.customize-help-toggle', function() { |
|---|
| 1125 | + var button = $( this ), |
|---|
| 1126 | + content = button.next( '.customize-panel-description' ); |
|---|
| 1127 | + button.toggleClass( 'toggled' ); |
|---|
| 1128 | + content.toggle(); |
|---|
| 1129 | + if ( button.hasClass( 'toggled' ) ) { |
|---|
| 1130 | + button.attr( 'aria-expanded', 'true' ); |
|---|
| 1131 | + } else { |
|---|
| 1132 | + button.attr( 'aria-expanded', 'false' ); |
|---|
| 1133 | + } |
|---|
| 1134 | + }); |
|---|
| 1135 | + |
|---|
| 1136 | + api.bind( 'saved', function() { |
|---|
| 1137 | + panel.container.find( '.customize-themes-unsaved-changes' ).hide(); |
|---|
| 1138 | + }); |
|---|
| 1139 | + |
|---|
| 1140 | + // Save & publish customizer changes. |
|---|
| 1141 | + panel.container.on( 'click', '#customize-themes-save', function() { |
|---|
| 1142 | + $( '#save' ).click(); // Trigger customizer save. |
|---|
| 1143 | + panel.container.find( '.customize-themes-unsaved-changes' ).hide(); |
|---|
| 1144 | + api.section( 'installed_themes' ).focus(); |
|---|
| 1145 | + }); |
|---|
| 1146 | + |
|---|
| 1147 | + // Toggle theme upload view. |
|---|
| 1148 | + panel.container.on( 'click', '.upload-toggle', function() { |
|---|
| 1149 | + var button = $( this ); |
|---|
| 1150 | + panel.container.find( '.upload-theme' ).toggle(); |
|---|
| 1151 | + if ( 'true' === button.attr( 'aria-expanded' ) ) { |
|---|
| 1152 | + button.attr( 'aria-expanded', 'false' ); |
|---|
| 1153 | + } else { |
|---|
| 1154 | + button.attr( 'aria-expanded', 'true' ); |
|---|
| 1155 | + } |
|---|
| 1156 | + }); |
|---|
| 1157 | + |
|---|
| 1158 | + // Install theme. |
|---|
| 1159 | + panel.container.on( 'click', '.theme-install', function( event ) { |
|---|
| 1160 | + panel.installTheme( event ); |
|---|
| 1161 | + }); |
|---|
| 1162 | + |
|---|
| 1163 | + // Update theme. |
|---|
| 1164 | + panel.container.on( 'click', '.update-theme', function( event ) { |
|---|
| 1165 | + panel.updateTheme( event ); |
|---|
| 1166 | + }); |
|---|
| 1167 | + |
|---|
| 1168 | + _.bindAll( this, 'installTheme', 'updateTheme' ); |
|---|
| 1169 | + }, |
|---|
| 1170 | + |
|---|
| 1171 | + /** |
|---|
| 1172 | + * Update UI to reflect expanded state |
|---|
| 1173 | + * |
|---|
| 1174 | + * @since 4.7.0 |
|---|
| 1175 | + * |
|---|
| 1176 | + * @param {Boolean} expanded |
|---|
| 1177 | + * @param {Object} args |
|---|
| 1178 | + * @param {Boolean} args.unchanged |
|---|
| 1179 | + * @param {Callback} args.completeCallback |
|---|
| 1180 | + */ |
|---|
| 1181 | + onChangeExpanded: function ( expanded, args ) { |
|---|
| 1182 | + |
|---|
| 1183 | + // Immediately call the complete callback if there were no changes |
|---|
| 1184 | + if ( args.unchanged ) { |
|---|
| 1185 | + if ( args.completeCallback ) { |
|---|
| 1186 | + args.completeCallback(); |
|---|
| 1187 | + } |
|---|
| 1188 | + return; |
|---|
| 1189 | + } |
|---|
| 1190 | + |
|---|
| 1191 | + // Note: there is a second argument 'args' passed |
|---|
| 1192 | + var panel = this, |
|---|
| 1193 | + section = panel.container.closest( '.accordion-section' ), |
|---|
| 1194 | + overlay = section.closest( '.wp-full-overlay' ), |
|---|
| 1195 | + customizeBtn = section.find( '.customize-theme' ), |
|---|
| 1196 | + changeBtn = section.find( '.change-theme' ), |
|---|
| 1197 | + content = section.find( '.control-panel-content' ); |
|---|
| 1198 | + |
|---|
| 1199 | + if ( expanded ) { |
|---|
| 1200 | + content.show( 0, function() { |
|---|
| 1201 | + overlay.addClass( 'in-themes-panel' ); |
|---|
| 1202 | + section.addClass( 'current-panel' ); |
|---|
| 1203 | + customizeBtn.attr( 'tabindex', '0' ); |
|---|
| 1204 | + customizeBtn.focus(); |
|---|
| 1205 | + if ( false === api.state( 'saved' ).get() ) { |
|---|
| 1206 | + panel.container.find( '.customize-themes-unsaved-changes' ).show(); |
|---|
| 1207 | + } |
|---|
| 1208 | + }); |
|---|
| 1209 | + // Automatically open the installed themes section. |
|---|
| 1210 | + api.section( 'installed_themes' ).expand(); |
|---|
| 1211 | + } else { |
|---|
| 1212 | + section.removeClass( 'current-panel' ); |
|---|
| 1213 | + overlay.removeClass( 'in-themes-panel' ); |
|---|
| 1214 | + content.delay( 200 ).hide( 0, function() { |
|---|
| 1215 | + if ( args.completeCallback ) { |
|---|
| 1216 | + args.completeCallback(); |
|---|
| 1217 | + } |
|---|
| 1218 | + } ); |
|---|
| 1219 | + customizeBtn.attr( 'tabindex', '-1' ); |
|---|
| 1220 | + changeBtn.focus(); |
|---|
| 1221 | + } |
|---|
| 1222 | + }, |
|---|
| 1223 | + |
|---|
| 1224 | + /** |
|---|
| 1225 | + * Don't recalculate the top margin. |
|---|
| 1226 | + * |
|---|
| 1227 | + * @since 4.7.0 |
|---|
| 1228 | + * @private |
|---|
| 1229 | + */ |
|---|
| 1230 | + _recalculateTopMargin: function() {}, |
|---|
| 1231 | + |
|---|
| 1232 | + /** |
|---|
| 1233 | + * Install a theme via wp.updates. |
|---|
| 1234 | + * |
|---|
| 1235 | + * @since 4.7.0 |
|---|
| 1236 | + */ |
|---|
| 1237 | + installTheme: function( event ) { |
|---|
| 1238 | + var preview = false, previewUrl, |
|---|
| 1239 | + slug = $( event.target ).data( 'slug' ); |
|---|
| 1240 | + |
|---|
| 1241 | + if ( -1 !== $.inArray( this.installingThemes, slug ) ) { |
|---|
| 1242 | + return; // Theme is already being installed. |
|---|
| 1243 | + } |
|---|
| 1244 | + |
|---|
| 1245 | + wp.updates.maybeRequestFilesystemCredentials( event ); |
|---|
| 1246 | + |
|---|
| 1247 | + $( document ).on( 'wp-theme-install-success', function( event, response ) { |
|---|
| 1248 | + var theme = false, customizeId, themeControl; |
|---|
| 1249 | + if ( preview ) { |
|---|
| 1250 | + window.parent.location = previewUrl; |
|---|
| 1251 | + } else { |
|---|
| 1252 | + api.control.each( function( control ) { |
|---|
| 1253 | + if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) { |
|---|
| 1254 | + theme = control.params.theme; // Used below to add theme control. |
|---|
| 1255 | + control.rerenderAsInstalled(); |
|---|
| 1256 | + } |
|---|
| 1257 | + }); |
|---|
| 1258 | + |
|---|
| 1259 | + // Don't add the same theme more than once. |
|---|
| 1260 | + if ( ! theme || 'undefined' !== typeof api.control( 'installed_theme_' + theme.id ) ) { |
|---|
| 1261 | + return; |
|---|
| 1262 | + } |
|---|
| 1263 | + |
|---|
| 1264 | + // Add theme control to installed section. |
|---|
| 1265 | + theme.type = 'installed'; |
|---|
| 1266 | + customizeId = 'installed_theme_' + theme.id; |
|---|
| 1267 | + themeControl = new api.controlConstructor.theme( customizeId, { |
|---|
| 1268 | + params: { |
|---|
| 1269 | + type: 'theme', |
|---|
| 1270 | + content: '<li id="customize-control-theme-installed_' + theme.id + '" class="customize-control customize-control-theme"></li>', |
|---|
| 1271 | + section: 'installed_themes', |
|---|
| 1272 | + active: true, |
|---|
| 1273 | + theme: theme, |
|---|
| 1274 | + priority: 0 // Add all newly-installed themes to the top. |
|---|
| 1275 | + }, |
|---|
| 1276 | + previewer: api.previewer |
|---|
| 1277 | + } ); |
|---|
| 1278 | + |
|---|
| 1279 | + api.control.add( customizeId, themeControl ); |
|---|
| 1280 | + api.control( customizeId ).container.trigger( 'render-screenshot' ); |
|---|
| 1281 | + |
|---|
| 1282 | + // Close the details modal if it's open to the installed theme. |
|---|
| 1283 | + api.section.each( function( section ) { |
|---|
| 1284 | + if ( 'themes' !== section.params.type ) { |
|---|
| 1285 | + if ( theme.id === section.currentTheme ) { // Don't close the modal if the user has navigated elsewhere. |
|---|
| 1286 | + section.closeDetails(); |
|---|
| 1287 | + } |
|---|
| 1288 | + } |
|---|
| 1289 | + }); |
|---|
| 1290 | + } |
|---|
| 1291 | + } ); |
|---|
| 1292 | + |
|---|
| 1293 | + $( document ).on( 'wp-theme-install-failure', function( event, response ) { |
|---|
| 1294 | + if ( preview ) { |
|---|
| 1295 | + $( '.wp-full-overlay' ).removeClass( 'customize-loading' ); |
|---|
| 1296 | + } |
|---|
| 1297 | + }); |
|---|
| 1298 | + |
|---|
| 1299 | + this.installingThemes.push( $( event.target ).data( 'slug' ) ); // Note: we don't remove elements from installingThemes, since they shouldn't be installed again. |
|---|
| 1300 | + wp.updates.installTheme( { |
|---|
| 1301 | + slug: $( event.target ).data( 'slug' ) |
|---|
| 1302 | + } ); |
|---|
| 1303 | + |
|---|
| 1304 | + // Also preview the theme as the event is triggered on Install & Preview. |
|---|
| 1305 | + if ( $( event.target ).hasClass( 'preview' ) ) { |
|---|
| 1306 | + preview = true; |
|---|
| 1307 | + $( '.wp-full-overlay' ).addClass( 'customize-loading' ); |
|---|
| 1308 | + previewUrl = $( event.target ).data( 'previewurl' ); |
|---|
| 1309 | + } |
|---|
| 1310 | + }, |
|---|
| 1311 | + |
|---|
| 1312 | + /** |
|---|
| 1313 | + * Update a theme via wp.updates. |
|---|
| 1314 | + * |
|---|
| 1315 | + * @since 4.7.0 |
|---|
| 1316 | + */ |
|---|
| 1317 | + updateTheme: function( event ) { |
|---|
| 1318 | + var _this = this; |
|---|
| 1319 | + |
|---|
| 1320 | + wp.updates.maybeRequestFilesystemCredentials( event ); |
|---|
| 1321 | + |
|---|
| 1322 | + $( document ).on( 'wp-theme-update-success', function( event, response ) { |
|---|
| 1323 | + // Rerender the control to reflect the update. |
|---|
| 1324 | + api.control.each( function( control ) { |
|---|
| 1325 | + if ( 'theme' === control.params.type && control.params.theme.id === response.slug ) { |
|---|
| 1326 | + control.params.hasUpdate = false; |
|---|
| 1327 | + control.rerenderAsInstalled(); |
|---|
| 1328 | + } |
|---|
| 1329 | + }); |
|---|
| 1330 | + } ); |
|---|
| 1331 | + |
|---|
| 1332 | + wp.updates.updateTheme( { |
|---|
| 1333 | + slug: $( event.target ).closest( '.notice' ).data( 'slug' ) |
|---|
| 1334 | + } ); |
|---|
| 1335 | + } |
|---|
| 1336 | + }); |
|---|
| 1337 | + |
|---|
| 1338 | + |
|---|
| 1339 | + /** |
|---|
| 1340 | * A Customizer Control. |
|---|
| 1341 | * |
|---|
| 1342 | * A control provides a UI element that allows a user to modify a Customizer Setting. |
|---|
| 1343 | @@ -2770,35 +3279,11 @@ |
|---|
| 1344 | api.ThemeControl = api.Control.extend({ |
|---|
| 1345 | |
|---|
| 1346 | touchDrag: false, |
|---|
| 1347 | - isRendered: false, |
|---|
| 1348 | + screenshotRendered: false, |
|---|
| 1349 | |
|---|
| 1350 | /** |
|---|
| 1351 | - * Defer rendering the theme control until the section is displayed. |
|---|
| 1352 | - * |
|---|
| 1353 | * @since 4.2.0 |
|---|
| 1354 | */ |
|---|
| 1355 | - renderContent: function () { |
|---|
| 1356 | - var control = this, |
|---|
| 1357 | - renderContentArgs = arguments; |
|---|
| 1358 | - |
|---|
| 1359 | - api.section( control.section(), function( section ) { |
|---|
| 1360 | - if ( section.expanded() ) { |
|---|
| 1361 | - api.Control.prototype.renderContent.apply( control, renderContentArgs ); |
|---|
| 1362 | - control.isRendered = true; |
|---|
| 1363 | - } else { |
|---|
| 1364 | - section.expanded.bind( function( expanded ) { |
|---|
| 1365 | - if ( expanded && ! control.isRendered ) { |
|---|
| 1366 | - api.Control.prototype.renderContent.apply( control, renderContentArgs ); |
|---|
| 1367 | - control.isRendered = true; |
|---|
| 1368 | - } |
|---|
| 1369 | - } ); |
|---|
| 1370 | - } |
|---|
| 1371 | - } ); |
|---|
| 1372 | - }, |
|---|
| 1373 | - |
|---|
| 1374 | - /** |
|---|
| 1375 | - * @since 4.2.0 |
|---|
| 1376 | - */ |
|---|
| 1377 | ready: function() { |
|---|
| 1378 | var control = this; |
|---|
| 1379 | |
|---|
| 1380 | @@ -2822,20 +3307,6 @@ |
|---|
| 1381 | return; |
|---|
| 1382 | } |
|---|
| 1383 | |
|---|
| 1384 | - var previewUrl = $( this ).data( 'previewUrl' ); |
|---|
| 1385 | - |
|---|
| 1386 | - $( '.wp-full-overlay' ).addClass( 'customize-loading' ); |
|---|
| 1387 | - |
|---|
| 1388 | - window.parent.location = previewUrl; |
|---|
| 1389 | - }); |
|---|
| 1390 | - |
|---|
| 1391 | - control.container.on( 'click keydown', '.theme-actions .theme-details', function( event ) { |
|---|
| 1392 | - if ( api.utils.isKeydownButNotEnterEvent( event ) ) { |
|---|
| 1393 | - return; |
|---|
| 1394 | - } |
|---|
| 1395 | - |
|---|
| 1396 | - event.preventDefault(); // Keep this AFTER the key filter above |
|---|
| 1397 | - |
|---|
| 1398 | api.section( control.section() ).showDetails( control.params.theme ); |
|---|
| 1399 | }); |
|---|
| 1400 | |
|---|
| 1401 | @@ -2846,6 +3317,7 @@ |
|---|
| 1402 | if ( source ) { |
|---|
| 1403 | $screenshot.attr( 'src', source ); |
|---|
| 1404 | } |
|---|
| 1405 | + control.screenshotRendered = true; |
|---|
| 1406 | }); |
|---|
| 1407 | }, |
|---|
| 1408 | |
|---|
| 1409 | @@ -2866,6 +3338,18 @@ |
|---|
| 1410 | } else { |
|---|
| 1411 | control.deactivate(); |
|---|
| 1412 | } |
|---|
| 1413 | + }, |
|---|
| 1414 | + |
|---|
| 1415 | + /** |
|---|
| 1416 | + * Rerender the theme from its JS template with the installed type. |
|---|
| 1417 | + * |
|---|
| 1418 | + * @since 4.2.0 |
|---|
| 1419 | + */ |
|---|
| 1420 | + rerenderAsInstalled: function() { |
|---|
| 1421 | + var control = this; |
|---|
| 1422 | + control.params.theme.type = 'installed'; |
|---|
| 1423 | + control.renderContent(); // replaces existing content |
|---|
| 1424 | + control.container.trigger( 'render-screenshot' ); |
|---|
| 1425 | } |
|---|
| 1426 | }); |
|---|
| 1427 | |
|---|
| 1428 | @@ -3414,7 +3898,9 @@ |
|---|
| 1429 | background: api.BackgroundControl, |
|---|
| 1430 | theme: api.ThemeControl |
|---|
| 1431 | }; |
|---|
| 1432 | - api.panelConstructor = {}; |
|---|
| 1433 | + api.panelConstructor = { |
|---|
| 1434 | + themes: api.ThemesPanel |
|---|
| 1435 | + }; |
|---|
| 1436 | api.sectionConstructor = { |
|---|
| 1437 | themes: api.ThemesSection |
|---|
| 1438 | }; |
|---|
| 1439 | Index: src/wp-includes/class-wp-customize-manager.php |
|---|
| 1440 | =================================================================== |
|---|
| 1441 | --- src/wp-includes/class-wp-customize-manager.php (revision 38260) |
|---|
| 1442 | +++ src/wp-includes/class-wp-customize-manager.php (working copy) |
|---|
| 1443 | @@ -230,6 +230,7 @@ |
|---|
| 1444 | |
|---|
| 1445 | require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menus-panel.php' ); |
|---|
| 1446 | |
|---|
| 1447 | + require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-panel.php' ); |
|---|
| 1448 | require_once( ABSPATH . WPINC . '/customize/class-wp-customize-themes-section.php' ); |
|---|
| 1449 | require_once( ABSPATH . WPINC . '/customize/class-wp-customize-sidebar-section.php' ); |
|---|
| 1450 | require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-section.php' ); |
|---|
| 1451 | @@ -289,6 +290,7 @@ |
|---|
| 1452 | |
|---|
| 1453 | add_action( 'wp_ajax_customize_save', array( $this, 'save' ) ); |
|---|
| 1454 | add_action( 'wp_ajax_customize_refresh_nonces', array( $this, 'refresh_nonces' ) ); |
|---|
| 1455 | + add_action( 'wp_ajax_customize-load-themes', array( $this, 'load_themes_ajax' ) ); |
|---|
| 1456 | |
|---|
| 1457 | add_action( 'customize_register', array( $this, 'register_controls' ) ); |
|---|
| 1458 | add_action( 'customize_register', array( $this, 'register_dynamic_settings' ), 11 ); // allow code to create settings first |
|---|
| 1459 | @@ -1634,6 +1636,9 @@ |
|---|
| 1460 | foreach ( $this->controls as $control ) { |
|---|
| 1461 | $control->enqueue(); |
|---|
| 1462 | } |
|---|
| 1463 | + if ( ! is_multisite() && current_user_can( 'install_themes') ) { |
|---|
| 1464 | + wp_enqueue_script( 'updates' ); |
|---|
| 1465 | + } |
|---|
| 1466 | } |
|---|
| 1467 | |
|---|
| 1468 | /** |
|---|
| 1469 | @@ -1787,6 +1792,7 @@ |
|---|
| 1470 | $nonces = array( |
|---|
| 1471 | 'save' => wp_create_nonce( 'save-customize_' . $this->get_stylesheet() ), |
|---|
| 1472 | 'preview' => wp_create_nonce( 'preview-customize_' . $this->get_stylesheet() ), |
|---|
| 1473 | + 'customize-themes' => wp_create_nonce( 'customize-themes' ), |
|---|
| 1474 | ); |
|---|
| 1475 | |
|---|
| 1476 | /** |
|---|
| 1477 | @@ -1970,8 +1976,10 @@ |
|---|
| 1478 | |
|---|
| 1479 | /* Panel, Section, and Control Types */ |
|---|
| 1480 | $this->register_panel_type( 'WP_Customize_Panel' ); |
|---|
| 1481 | + $this->register_panel_type( 'WP_Customize_Themes_Panel' ); |
|---|
| 1482 | $this->register_section_type( 'WP_Customize_Section' ); |
|---|
| 1483 | $this->register_section_type( 'WP_Customize_Sidebar_Section' ); |
|---|
| 1484 | + $this->register_section_type( 'WP_Customize_Themes_Section' ); |
|---|
| 1485 | $this->register_control_type( 'WP_Customize_Color_Control' ); |
|---|
| 1486 | $this->register_control_type( 'WP_Customize_Media_Control' ); |
|---|
| 1487 | $this->register_control_type( 'WP_Customize_Upload_Control' ); |
|---|
| 1488 | @@ -1981,49 +1989,76 @@ |
|---|
| 1489 | $this->register_control_type( 'WP_Customize_Site_Icon_Control' ); |
|---|
| 1490 | $this->register_control_type( 'WP_Customize_Theme_Control' ); |
|---|
| 1491 | |
|---|
| 1492 | - /* Themes */ |
|---|
| 1493 | + /* Themes (controls are loaded via ajax) */ |
|---|
| 1494 | |
|---|
| 1495 | - $this->add_section( new WP_Customize_Themes_Section( $this, 'themes', array( |
|---|
| 1496 | + $this->add_panel( new WP_Customize_Themes_Panel( $this, 'themes', array( |
|---|
| 1497 | 'title' => $this->theme()->display( 'Name' ), |
|---|
| 1498 | + 'description' => __( 'Once themes are installed, you can live-preview them on your site, customize them, and publish them. Browse available themes in the categories in this menu or upload a theme from a <code>.zip</code> file.' ), |
|---|
| 1499 | 'capability' => 'switch_themes', |
|---|
| 1500 | 'priority' => 0, |
|---|
| 1501 | ) ) ); |
|---|
| 1502 | |
|---|
| 1503 | - // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience). |
|---|
| 1504 | - $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array( |
|---|
| 1505 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'installed_themes', array( |
|---|
| 1506 | + 'title' => __( 'Installed' ), |
|---|
| 1507 | + 'action' => 'installed', |
|---|
| 1508 | 'capability' => 'switch_themes', |
|---|
| 1509 | + 'panel' => 'themes', |
|---|
| 1510 | + 'priority' => 0, |
|---|
| 1511 | ) ) ); |
|---|
| 1512 | |
|---|
| 1513 | - require_once( ABSPATH . 'wp-admin/includes/theme.php' ); |
|---|
| 1514 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'featured_themes', array( |
|---|
| 1515 | + 'title' => __( 'Featured' ), |
|---|
| 1516 | + 'action' => 'featured', |
|---|
| 1517 | + 'capability' => 'install_themes', |
|---|
| 1518 | + 'panel' => 'themes', |
|---|
| 1519 | + 'priority' => 5, |
|---|
| 1520 | + ) ) ); |
|---|
| 1521 | |
|---|
| 1522 | - // Theme Controls. |
|---|
| 1523 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'popular_themes', array( |
|---|
| 1524 | + 'title' => __( 'Popular' ), |
|---|
| 1525 | + 'action' => 'popular', |
|---|
| 1526 | + 'capability' => 'install_themes', |
|---|
| 1527 | + 'panel' => 'themes', |
|---|
| 1528 | + 'priority' => 10, |
|---|
| 1529 | + ) ) ); |
|---|
| 1530 | |
|---|
| 1531 | - // Add a control for the active/original theme. |
|---|
| 1532 | - if ( ! $this->is_theme_active() ) { |
|---|
| 1533 | - $themes = wp_prepare_themes_for_js( array( wp_get_theme( $this->original_stylesheet ) ) ); |
|---|
| 1534 | - $active_theme = current( $themes ); |
|---|
| 1535 | - $active_theme['isActiveTheme'] = true; |
|---|
| 1536 | - $this->add_control( new WP_Customize_Theme_Control( $this, $active_theme['id'], array( |
|---|
| 1537 | - 'theme' => $active_theme, |
|---|
| 1538 | - 'section' => 'themes', |
|---|
| 1539 | - 'settings' => 'active_theme', |
|---|
| 1540 | - ) ) ); |
|---|
| 1541 | - } |
|---|
| 1542 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'latest_themes', array( |
|---|
| 1543 | + 'title' => __( 'Latest' ), |
|---|
| 1544 | + 'action' => 'latest', |
|---|
| 1545 | + 'capability' => 'install_themes', |
|---|
| 1546 | + 'panel' => 'themes', |
|---|
| 1547 | + 'priority' => 15, |
|---|
| 1548 | + ) ) ); |
|---|
| 1549 | |
|---|
| 1550 | - $themes = wp_prepare_themes_for_js(); |
|---|
| 1551 | - foreach ( $themes as $theme ) { |
|---|
| 1552 | - if ( $theme['active'] || $theme['id'] === $this->original_stylesheet ) { |
|---|
| 1553 | - continue; |
|---|
| 1554 | - } |
|---|
| 1555 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'favorites_themes', array( |
|---|
| 1556 | + 'title' => __( 'Favorites' ), |
|---|
| 1557 | + 'action' => 'favorites', |
|---|
| 1558 | + 'capability' => 'install_themes', |
|---|
| 1559 | + 'panel' => 'themes', |
|---|
| 1560 | + 'priority' => 20, |
|---|
| 1561 | + ) ) ); |
|---|
| 1562 | + |
|---|
| 1563 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'feature_filter_themes', array( |
|---|
| 1564 | + 'title' => __( 'Feature Filter' ), |
|---|
| 1565 | + 'action' => 'feature_filter', |
|---|
| 1566 | + 'capability' => 'install_themes', |
|---|
| 1567 | + 'panel' => 'themes', |
|---|
| 1568 | + 'priority' => 25, |
|---|
| 1569 | + ) ) ); |
|---|
| 1570 | + |
|---|
| 1571 | + $this->add_section( new WP_Customize_Themes_Section( $this, 'search_themes', array( |
|---|
| 1572 | + 'title' => __( 'Search themes …' ), |
|---|
| 1573 | + 'action' => 'search', |
|---|
| 1574 | + 'capability' => 'install_themes', |
|---|
| 1575 | + 'panel' => 'themes', |
|---|
| 1576 | + 'priority' => 30, |
|---|
| 1577 | + ) ) ); |
|---|
| 1578 | + |
|---|
| 1579 | + // Themes Setting (unused - the theme is considerably more fundamental to the Customizer experience). |
|---|
| 1580 | + $this->add_setting( new WP_Customize_Filter_Setting( $this, 'active_theme', array( |
|---|
| 1581 | + 'capability' => 'switch_themes', |
|---|
| 1582 | + ) ) ); |
|---|
| 1583 | |
|---|
| 1584 | - $theme_id = 'theme_' . $theme['id']; |
|---|
| 1585 | - $theme['isActiveTheme'] = false; |
|---|
| 1586 | - $this->add_control( new WP_Customize_Theme_Control( $this, $theme_id, array( |
|---|
| 1587 | - 'theme' => $theme, |
|---|
| 1588 | - 'section' => 'themes', |
|---|
| 1589 | - 'settings' => 'active_theme', |
|---|
| 1590 | - ) ) ); |
|---|
| 1591 | - } |
|---|
| 1592 | |
|---|
| 1593 | /* Site Identity */ |
|---|
| 1594 | |
|---|
| 1595 | @@ -2330,6 +2365,141 @@ |
|---|
| 1596 | } |
|---|
| 1597 | |
|---|
| 1598 | /** |
|---|
| 1599 | + * Load themes into the theme browsing/installation UI. |
|---|
| 1600 | + * |
|---|
| 1601 | + * @since 4.7.0 |
|---|
| 1602 | + * @access public |
|---|
| 1603 | + */ |
|---|
| 1604 | + public function load_themes_ajax() { |
|---|
| 1605 | + check_ajax_referer( 'customize-themes', 'customize-themes-nonce' ); |
|---|
| 1606 | + |
|---|
| 1607 | + if ( ! current_user_can( 'switch_themes' ) ) { |
|---|
| 1608 | + wp_die( -1 ); |
|---|
| 1609 | + } |
|---|
| 1610 | + |
|---|
| 1611 | + if ( empty( $_POST['theme_action'] ) ) { |
|---|
| 1612 | + wp_send_json_error( 'missing_theme_action' ); |
|---|
| 1613 | + } |
|---|
| 1614 | + |
|---|
| 1615 | + if ( 'search' === $_POST['theme_action'] && ! array_key_exists( 'search', $_POST ) ) { |
|---|
| 1616 | + wp_send_json_error( 'empty_search' ); |
|---|
| 1617 | + } elseif ( 'favorites' === $_POST['theme_action'] && ! array_key_exists( 'user', $_POST ) ) { |
|---|
| 1618 | + wp_send_json_error( 'empty_user' ); |
|---|
| 1619 | + } elseif ( 'feature_filter' === $_POST['theme_action'] && ! array_key_exists( 'tags', $_POST ) ) { |
|---|
| 1620 | + wp_send_json_error( 'no_features' ); |
|---|
| 1621 | + } |
|---|
| 1622 | + |
|---|
| 1623 | + require_once( ABSPATH . 'wp-admin/includes/theme.php' ); |
|---|
| 1624 | + if ( 'installed' === $_POST['theme_action'] ) { |
|---|
| 1625 | + $themes = array( 'themes' => wp_prepare_themes_for_js() ); |
|---|
| 1626 | + foreach ( $themes['themes'] as &$theme ) { |
|---|
| 1627 | + $theme['type'] = 'installed'; |
|---|
| 1628 | + // Set active based on customized theme. |
|---|
| 1629 | + if ( $_POST['customized_theme'] === $theme['id'] ) { |
|---|
| 1630 | + $theme['active'] = true; |
|---|
| 1631 | + } else { |
|---|
| 1632 | + $theme['active'] = false; |
|---|
| 1633 | + } |
|---|
| 1634 | + } |
|---|
| 1635 | + } else { |
|---|
| 1636 | + if ( ! current_user_can( 'install_themes' ) ) { |
|---|
| 1637 | + wp_die( -1 ); |
|---|
| 1638 | + } |
|---|
| 1639 | + |
|---|
| 1640 | + // Arguments for all queries. |
|---|
| 1641 | + $args = array( |
|---|
| 1642 | + 'per_page' => 100, |
|---|
| 1643 | + 'page' => absint( $_POST['page'] ), |
|---|
| 1644 | + 'fields' => array( |
|---|
| 1645 | + 'slug' => true, |
|---|
| 1646 | + 'screenshot' => true, |
|---|
| 1647 | + 'description' => true, |
|---|
| 1648 | + 'requires' => true, |
|---|
| 1649 | + 'rating' => true, |
|---|
| 1650 | + 'downloaded' => true, |
|---|
| 1651 | + 'downloadLink' => true, |
|---|
| 1652 | + 'last_updated' => true, |
|---|
| 1653 | + 'homepage' => true, |
|---|
| 1654 | + 'num_ratings' => true, |
|---|
| 1655 | + 'tags' => true, |
|---|
| 1656 | + ) |
|---|
| 1657 | + ); |
|---|
| 1658 | + |
|---|
| 1659 | + // Specialized handling for each query. |
|---|
| 1660 | + switch ( $_POST['theme_action'] ) { |
|---|
| 1661 | + case 'search': |
|---|
| 1662 | + $args['search'] = wp_unslash( $_POST['search'] ); |
|---|
| 1663 | + break; |
|---|
| 1664 | + case 'favorites': |
|---|
| 1665 | + $args['user'] = wp_unslash( $_POST['user'] ); |
|---|
| 1666 | + case 'featured': |
|---|
| 1667 | + case 'popular': |
|---|
| 1668 | + $args['browse'] = $_POST['theme_action']; |
|---|
| 1669 | + break; |
|---|
| 1670 | + case 'latest': |
|---|
| 1671 | + $args['browse'] = 'new'; |
|---|
| 1672 | + break; |
|---|
| 1673 | + case 'feature_filter': |
|---|
| 1674 | + $args['tag'] = wp_unslash( $_POST['tags'] ); |
|---|
| 1675 | + break; |
|---|
| 1676 | + } |
|---|
| 1677 | + |
|---|
| 1678 | + // Load themes from the .org API. |
|---|
| 1679 | + $themes = themes_api( 'query_themes', $args ); |
|---|
| 1680 | + if ( is_wp_error( $themes ) ) { |
|---|
| 1681 | + wp_send_json_error(); |
|---|
| 1682 | + } |
|---|
| 1683 | + |
|---|
| 1684 | + // Prepare a list of installed themes to check against before the loop. |
|---|
| 1685 | + $installed_themes = array(); |
|---|
| 1686 | + $wp_themes = wp_get_themes(); |
|---|
| 1687 | + foreach ( $wp_themes as $theme ) { |
|---|
| 1688 | + $installed_themes[] = $theme->get_stylesheet(); |
|---|
| 1689 | + } |
|---|
| 1690 | + $update_php = network_admin_url( 'update.php?action=install-theme' ); |
|---|
| 1691 | + foreach ( $themes->themes as &$theme ) { |
|---|
| 1692 | + $theme->install_url = add_query_arg( array( |
|---|
| 1693 | + 'theme' => $theme->slug, |
|---|
| 1694 | + '_wpnonce' => wp_create_nonce( 'install-theme_' . $theme->slug ) |
|---|
| 1695 | + ), $update_php ); |
|---|
| 1696 | + |
|---|
| 1697 | + $theme->name = wp_kses( $theme->name, $themes_allowedtags ); |
|---|
| 1698 | + $theme->author = wp_kses( $theme->author, $themes_allowedtags ); |
|---|
| 1699 | + $theme->version = wp_kses( $theme->version, $themes_allowedtags ); |
|---|
| 1700 | + $theme->description = wp_kses( $theme->description, $themes_allowedtags ); |
|---|
| 1701 | + $theme->tags = implode( ', ', $theme->tags ); |
|---|
| 1702 | + $theme->stars = wp_star_rating( array( 'rating' => $theme->rating, 'type' => 'percent', 'number' => $theme->num_ratings, 'echo' => false ) ); |
|---|
| 1703 | + $theme->num_ratings = number_format_i18n( $theme->num_ratings ); |
|---|
| 1704 | + $theme->preview_url = set_url_scheme( $theme->preview_url ); |
|---|
| 1705 | + |
|---|
| 1706 | + // Handle themes that are already installed as installed themes. |
|---|
| 1707 | + if ( in_array( $theme->slug, $installed_themes ) ) { |
|---|
| 1708 | + $theme->type = 'installed'; |
|---|
| 1709 | + } else { |
|---|
| 1710 | + $theme->type = $_POST['theme_action']; |
|---|
| 1711 | + } |
|---|
| 1712 | + |
|---|
| 1713 | + // Set active based on customized theme. |
|---|
| 1714 | + if ( $_POST['customized_theme'] === $theme->slug ) { |
|---|
| 1715 | + $theme->active = true; |
|---|
| 1716 | + } else { |
|---|
| 1717 | + $theme->active = false; |
|---|
| 1718 | + } |
|---|
| 1719 | + |
|---|
| 1720 | + // Map available theme properties to installed theme properties. |
|---|
| 1721 | + $theme->id = $theme->slug; |
|---|
| 1722 | + $theme->screenshot = array( $theme->screenshot_url ); |
|---|
| 1723 | + $theme->authorAndUri = $theme->author; |
|---|
| 1724 | + unset( $theme->slug ); |
|---|
| 1725 | + unset( $theme->screenshot_url ); |
|---|
| 1726 | + unset( $theme->author ); |
|---|
| 1727 | + } |
|---|
| 1728 | + } |
|---|
| 1729 | + wp_send_json_success( $themes ); |
|---|
| 1730 | + } |
|---|
| 1731 | + |
|---|
| 1732 | + |
|---|
| 1733 | + /** |
|---|
| 1734 | * Callback for validating the header_textcolor value. |
|---|
| 1735 | * |
|---|
| 1736 | * Accepts 'blank', and otherwise uses sanitize_hex_color_no_hash(). |
|---|
| 1737 | Index: src/wp-includes/customize/class-wp-customize-theme-control.php |
|---|
| 1738 | =================================================================== |
|---|
| 1739 | --- src/wp-includes/customize/class-wp-customize-theme-control.php (revision 38260) |
|---|
| 1740 | +++ src/wp-includes/customize/class-wp-customize-theme-control.php (working copy) |
|---|
| 1741 | @@ -67,13 +67,13 @@ |
|---|
| 1742 | $preview_url = esc_url( add_query_arg( 'theme', '__THEME__', $current_url ) ); // Token because esc_url() strips curly braces. |
|---|
| 1743 | $preview_url = str_replace( '__THEME__', '{{ data.theme.id }}', $preview_url ); |
|---|
| 1744 | ?> |
|---|
| 1745 | - <# if ( data.theme.isActiveTheme ) { #> |
|---|
| 1746 | - <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"> |
|---|
| 1747 | + <# if ( data.theme.active ) { #> |
|---|
| 1748 | + <div class="theme active" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name"> |
|---|
| 1749 | <# } else { #> |
|---|
| 1750 | - <div class="theme" tabindex="0" data-preview-url="<?php echo esc_attr( $preview_url ); ?>" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name"> |
|---|
| 1751 | + <div class="theme" tabindex="0" aria-describedby="{{ data.theme.id }}-action {{ data.theme.id }}-name"> |
|---|
| 1752 | <# } #> |
|---|
| 1753 | |
|---|
| 1754 | - <# if ( data.theme.screenshot[0] ) { #> |
|---|
| 1755 | + <# if ( data.theme.screenshot && data.theme.screenshot[0] ) { #> |
|---|
| 1756 | <div class="theme-screenshot"> |
|---|
| 1757 | <img data-src="{{ data.theme.screenshot[0] }}" alt="" /> |
|---|
| 1758 | </div> |
|---|
| 1759 | @@ -81,27 +81,35 @@ |
|---|
| 1760 | <div class="theme-screenshot blank"></div> |
|---|
| 1761 | <# } #> |
|---|
| 1762 | |
|---|
| 1763 | - <# if ( data.theme.isActiveTheme ) { #> |
|---|
| 1764 | - <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Customize' ); ?></span> |
|---|
| 1765 | - <# } else { #> |
|---|
| 1766 | - <span class="more-details" id="{{ data.theme.id }}-action"><?php _e( 'Live Preview' ); ?></span> |
|---|
| 1767 | + <span class="more-details theme-details" id="{{ data.theme.id }}-action"><?php _e( 'Theme Details' ); ?></span> |
|---|
| 1768 | + |
|---|
| 1769 | + |
|---|
| 1770 | + <# if ( false == false && 'installed' === data.theme.type && data.theme.hasUpdate ) { // @todo patch updates.js to update themes in the customizer. #> |
|---|
| 1771 | + <div class="update-message notice inline notice-warning notice-alt" data-slug="{{ data.theme.id }}"><p><?php _e( 'New version available. <button class="button-link update-theme" type="button">Update now</button>' ); ?></p></div> |
|---|
| 1772 | <# } #> |
|---|
| 1773 | |
|---|
| 1774 | - <div class="theme-author"><?php printf( __( 'By %s' ), '{{ data.theme.author }}' ); ?></div> |
|---|
| 1775 | - |
|---|
| 1776 | - <# if ( data.theme.isActiveTheme ) { #> |
|---|
| 1777 | + <# if ( data.theme.active ) { #> |
|---|
| 1778 | <h3 class="theme-name" id="{{ data.theme.id }}-name"> |
|---|
| 1779 | <?php |
|---|
| 1780 | /* translators: %s: theme name */ |
|---|
| 1781 | - printf( __( '<span>Active:</span> %s' ), '{{{ data.theme.name }}}' ); |
|---|
| 1782 | + printf( __( '<span>Current:</span> %s' ), '{{ data.theme.name }}' ); |
|---|
| 1783 | ?> |
|---|
| 1784 | </h3> |
|---|
| 1785 | + <div class="theme-actions"> |
|---|
| 1786 | + <button type="button" class="button button-primary customize-theme"><?php _e( 'Customize' ); ?></span> |
|---|
| 1787 | + <# } else if ( 'installed' === data.theme.type ) { #> |
|---|
| 1788 | + <h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
|---|
| 1789 | + <div class="theme-actions"> |
|---|
| 1790 | + <button type="button" class="button button-primary preview-theme" data-preview-url="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Live Preview' ); ?></span> |
|---|
| 1791 | + </div> |
|---|
| 1792 | + <div class="notice notice-success notice-alt"><p><?php _e( 'Installed' ); ?></p></div> |
|---|
| 1793 | <# } else { #> |
|---|
| 1794 | - <h3 class="theme-name" id="{{ data.theme.id }}-name">{{{ data.theme.name }}}</h3> |
|---|
| 1795 | + <h3 class="theme-name" id="{{ data.theme.id }}-name">{{ data.theme.name }}</h3> |
|---|
| 1796 | <div class="theme-actions"> |
|---|
| 1797 | - <button type="button" class="button theme-details"><?php _e( 'Theme Details' ); ?></button> |
|---|
| 1798 | + <button type="button" class="button theme-install" data-slug="{{ data.theme.id }}"><?php _e( 'Install' ); ?></button> |
|---|
| 1799 | + <button type="button" class="button button-primary theme-install preview" data-slug="{{ data.theme.id }}" data-previewurl="<?php echo esc_attr( $preview_url ); ?>"><?php _e( 'Install & Preview' ); ?></button> |
|---|
| 1800 | </div> |
|---|
| 1801 | - <# } #> |
|---|
| 1802 | + <# } #> |
|---|
| 1803 | </div> |
|---|
| 1804 | <?php |
|---|
| 1805 | } |
|---|
| 1806 | Index: src/wp-includes/customize/class-wp-customize-themes-panel.php |
|---|
| 1807 | =================================================================== |
|---|
| 1808 | --- src/wp-includes/customize/class-wp-customize-themes-panel.php (revision 0) |
|---|
| 1809 | +++ src/wp-includes/customize/class-wp-customize-themes-panel.php (working copy) |
|---|
| 1810 | @@ -0,0 +1,119 @@ |
|---|
| 1811 | +<?php |
|---|
| 1812 | +/** |
|---|
| 1813 | + * Customize API: WP_Customize_Themes_Panel class |
|---|
| 1814 | + * |
|---|
| 1815 | + * @package WordPress |
|---|
| 1816 | + * @subpackage Customize |
|---|
| 1817 | + * @since 4.7.0 |
|---|
| 1818 | + */ |
|---|
| 1819 | + |
|---|
| 1820 | +/** |
|---|
| 1821 | + * Customize Themes Panel Class |
|---|
| 1822 | + * |
|---|
| 1823 | + * @since 4.7.0 |
|---|
| 1824 | + * |
|---|
| 1825 | + * @see WP_Customize_Panel |
|---|
| 1826 | + */ |
|---|
| 1827 | +class WP_Customize_Themes_Panel extends WP_Customize_Panel { |
|---|
| 1828 | + |
|---|
| 1829 | + /** |
|---|
| 1830 | + * Panel type. |
|---|
| 1831 | + * |
|---|
| 1832 | + * @since 4.7.0 |
|---|
| 1833 | + * @access public |
|---|
| 1834 | + * @var string |
|---|
| 1835 | + */ |
|---|
| 1836 | + public $type = 'themes'; |
|---|
| 1837 | + |
|---|
| 1838 | + /** |
|---|
| 1839 | + * An Underscore (JS) template for rendering this panel's container. |
|---|
| 1840 | + * |
|---|
| 1841 | + * The themes panel renders a custom panel heading with the current theme and a switch themes button. |
|---|
| 1842 | + * |
|---|
| 1843 | + * @see WP_Customize_Panel::print_template() |
|---|
| 1844 | + * |
|---|
| 1845 | + * @since 4.7.0 |
|---|
| 1846 | + * @access protected |
|---|
| 1847 | + */ |
|---|
| 1848 | + protected function render_template() { |
|---|
| 1849 | + ?> |
|---|
| 1850 | + <li id="accordion-section-{{ data.id }}" class="accordion-section control-panel-themes"> |
|---|
| 1851 | + <h3 class="accordion-section-title"> |
|---|
| 1852 | + <?php |
|---|
| 1853 | + if ( $this->manager->is_theme_active() ) { |
|---|
| 1854 | + echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> {{ data.title }}'; |
|---|
| 1855 | + } else { |
|---|
| 1856 | + echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> {{ data.title }}'; |
|---|
| 1857 | + } |
|---|
| 1858 | + ?> |
|---|
| 1859 | + |
|---|
| 1860 | + <?php |
|---|
| 1861 | + if ( current_user_can( 'switch_themes' ) ) : ?> |
|---|
| 1862 | + <button type="button" class="button change-theme"><?php _ex( 'Change', 'theme' ); ?></button> |
|---|
| 1863 | + <?php endif; ?> |
|---|
| 1864 | + </h3> |
|---|
| 1865 | + <ul class="accordion-sub-container control-panel-content"></ul> |
|---|
| 1866 | + </li> |
|---|
| 1867 | + <?php |
|---|
| 1868 | + } |
|---|
| 1869 | + |
|---|
| 1870 | + /** |
|---|
| 1871 | + * An Underscore (JS) template for this panel's content (but not its container). |
|---|
| 1872 | + * |
|---|
| 1873 | + * Class variables for this panel class are available in the `data` JS object; |
|---|
| 1874 | + * export custom variables by overriding WP_Customize_Panel::json(). |
|---|
| 1875 | + * |
|---|
| 1876 | + * @since 4.7.0 |
|---|
| 1877 | + * @access protected |
|---|
| 1878 | + * |
|---|
| 1879 | + * @see WP_Customize_Panel::print_template() |
|---|
| 1880 | + */ |
|---|
| 1881 | + protected function content_template() { |
|---|
| 1882 | + ?> |
|---|
| 1883 | + <li class="panel-meta accordion-section customize-info"> |
|---|
| 1884 | + <div class="current-theme"> |
|---|
| 1885 | + <span class="preview-notice"> |
|---|
| 1886 | + <?php |
|---|
| 1887 | + /* translators: %s: the site/panel title in the Customizer */ |
|---|
| 1888 | + printf( __( 'Current Theme %s' ), '<strong class="panel-title">{{ data.title }}</strong>' ); |
|---|
| 1889 | + ?> |
|---|
| 1890 | + </span> |
|---|
| 1891 | + <button type="button" class="button customize-theme" tabindex="-1"><?php _e( 'Customize' ); ?></button> |
|---|
| 1892 | + </div> |
|---|
| 1893 | + <h2><?php _e( 'Themes' ); ?></h2> |
|---|
| 1894 | + <?php if ( current_user_can( 'install_themes' ) ) : ?> |
|---|
| 1895 | + <button type="button" class="upload-toggle page-title-action" aria-expanded="false"><?php _e( 'Upload Theme' ); ?></button> |
|---|
| 1896 | + <?php endif; ?> |
|---|
| 1897 | + </li> |
|---|
| 1898 | + <li class="upload-theme"> |
|---|
| 1899 | + <?php if ( current_user_can( 'install_themes' ) ) : ?> |
|---|
| 1900 | + <p class="install-help"><?php _e( 'If you have a theme in a <code>.zip</code> format, you may install it by uploading it here.' ); ?></p> |
|---|
| 1901 | + <div class="wp-upload-form"> |
|---|
| 1902 | + <input type="file" id="themezip" name="themezip"><label class="screen-reader-text" for="themezip"><?php _e( 'Theme zip file' ); ?></label> |
|---|
| 1903 | + <button type="button" id="upload-theme-submit" class="button"><?php _e( 'Install Now' ); ?></button> |
|---|
| 1904 | + </div> |
|---|
| 1905 | + <?php endif; ?> |
|---|
| 1906 | + </div> |
|---|
| 1907 | + </li> |
|---|
| 1908 | + <li id="customize-container"></li><?php // Used as a full-screen overlay transition after clicking to preview a theme. ?> |
|---|
| 1909 | + <li class="customize-themes-notifications"> |
|---|
| 1910 | + <div class="notice notice-warning customize-themes-unsaved-changes" style="display: none;"><p> |
|---|
| 1911 | + <?php _e( 'You have unsaved changes that will be lost if you preview a new theme.' ); ?> |
|---|
| 1912 | + <button type="button" id="customize-themes-save" class="button" ><?php _e( 'Save & Publish' ); ?></button> |
|---|
| 1913 | + </p></div> |
|---|
| 1914 | + </li> |
|---|
| 1915 | + <li id="customize-theme-section-navigation" class="wp-filter"> |
|---|
| 1916 | + <div class="filter-count"><span class="count theme-count">0</span></div> |
|---|
| 1917 | + <div class="filter-links"></div> |
|---|
| 1918 | + <# if ( data.description ) { #> |
|---|
| 1919 | + <button class="customize-help-toggle dashicons dashicons-editor-help" type="button" aria-expanded="false"><span class="screen-reader-text"><?php _e( 'Help' ); ?></span></button> |
|---|
| 1920 | + <div class="description customize-panel-description"> |
|---|
| 1921 | + {{{ data.description }}} |
|---|
| 1922 | + </div> |
|---|
| 1923 | + <# } #> |
|---|
| 1924 | + </li> |
|---|
| 1925 | + <?php |
|---|
| 1926 | + } |
|---|
| 1927 | +} |
|---|
| 1928 | Index: src/wp-includes/customize/class-wp-customize-themes-section.php |
|---|
| 1929 | =================================================================== |
|---|
| 1930 | --- src/wp-includes/customize/class-wp-customize-themes-section.php (revision 38260) |
|---|
| 1931 | +++ src/wp-includes/customize/class-wp-customize-themes-section.php (working copy) |
|---|
| 1932 | @@ -10,7 +10,7 @@ |
|---|
| 1933 | /** |
|---|
| 1934 | * Customize Themes Section class. |
|---|
| 1935 | * |
|---|
| 1936 | - * A UI container for theme controls, which behaves like a backwards Panel. |
|---|
| 1937 | + * A UI container for theme controls, which are displayed in tabbed sections. |
|---|
| 1938 | * |
|---|
| 1939 | * @since 4.2.0 |
|---|
| 1940 | * |
|---|
| 1941 | @@ -28,57 +28,96 @@ |
|---|
| 1942 | public $type = 'themes'; |
|---|
| 1943 | |
|---|
| 1944 | /** |
|---|
| 1945 | - * Render the themes section, which behaves like a panel. |
|---|
| 1946 | + * Theme section action. |
|---|
| 1947 | * |
|---|
| 1948 | - * @since 4.2.0 |
|---|
| 1949 | + * Defines the type of themes to load (installed, featured, latest, etc.). |
|---|
| 1950 | + * |
|---|
| 1951 | + * @since 4.7.0 |
|---|
| 1952 | + * @access public |
|---|
| 1953 | + * @var string |
|---|
| 1954 | + */ |
|---|
| 1955 | + public $action = ''; |
|---|
| 1956 | + |
|---|
| 1957 | + /** |
|---|
| 1958 | + * Get section parameters for JS. |
|---|
| 1959 | + * |
|---|
| 1960 | + * @since 4.7.0 |
|---|
| 1961 | + * @access public |
|---|
| 1962 | + * @return array Exported parameters. |
|---|
| 1963 | + */ |
|---|
| 1964 | + public function json() { |
|---|
| 1965 | + $exported = parent::json(); |
|---|
| 1966 | + $exported['action'] = $this->action; |
|---|
| 1967 | + |
|---|
| 1968 | + return $exported; |
|---|
| 1969 | + } |
|---|
| 1970 | + |
|---|
| 1971 | + /** |
|---|
| 1972 | + * Render a themes section as a JS template. |
|---|
| 1973 | + * |
|---|
| 1974 | + * The template is only rendered by PHP once, so all actions are prepared at once on the server side. |
|---|
| 1975 | + * |
|---|
| 1976 | + * @since 4.7.0 |
|---|
| 1977 | * @access protected |
|---|
| 1978 | */ |
|---|
| 1979 | - protected function render() { |
|---|
| 1980 | - $classes = 'accordion-section control-section control-section-' . $this->type; |
|---|
| 1981 | + protected function render_template() { |
|---|
| 1982 | ?> |
|---|
| 1983 | - <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="<?php echo esc_attr( $classes ); ?>"> |
|---|
| 1984 | - <h3 class="accordion-section-title"> |
|---|
| 1985 | - <?php |
|---|
| 1986 | - if ( $this->manager->is_theme_active() ) { |
|---|
| 1987 | - echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title; |
|---|
| 1988 | - } else { |
|---|
| 1989 | - echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title; |
|---|
| 1990 | - } |
|---|
| 1991 | - ?> |
|---|
| 1992 | - |
|---|
| 1993 | - <?php if ( count( $this->controls ) > 0 ) : ?> |
|---|
| 1994 | - <button type="button" class="button change-theme" tabindex="0"><?php _ex( 'Change', 'theme' ); ?></button> |
|---|
| 1995 | - <?php endif; ?> |
|---|
| 1996 | - </h3> |
|---|
| 1997 | - <div class="customize-themes-panel control-panel-content themes-php"> |
|---|
| 1998 | - <h3 class="accordion-section-title customize-section-title"> |
|---|
| 1999 | - <span class="customize-action"><?php _e( 'Customizing' ); ?></span> |
|---|
| 2000 | - <?php _e( 'Themes' ); ?> |
|---|
| 2001 | - <span class="title-count theme-count"><?php echo count( $this->controls ) + 1 /* Active theme */; ?></span> |
|---|
| 2002 | - </h3> |
|---|
| 2003 | - <h3 class="accordion-section-title customize-section-title"> |
|---|
| 2004 | + <li id="accordion-section-{{ data.id }}" class="theme-section"> |
|---|
| 2005 | + <# if ( 'search' === data.action ) { #> |
|---|
| 2006 | + <div class="search-form customize-themes-section-title themes-section-search_themes"> |
|---|
| 2007 | + <label class="screen-reader-text" for="wp-filter-search-input">{{ data.title }}</label> |
|---|
| 2008 | + <input placeholder="{{ data.title }}" type="search" aria-describedby="live-search-desc" id="wp-filter-search-input" class="wp-filter-search"> |
|---|
| 2009 | + <span id="live-search-desc" class="screen-reader-text"><?php _e( 'The search results will be updated as you type.' ); ?></span> |
|---|
| 2010 | + </div> |
|---|
| 2011 | + <# } else { #> |
|---|
| 2012 | + <button type="button" class="customize-themes-section-title themes-section-{{ data.id }}">{{ data.title }}</button> |
|---|
| 2013 | + <# } #> |
|---|
| 2014 | + <div class="customize-themes-section control-section-content themes-php"> |
|---|
| 2015 | + <# if ( 'favorites' === data.action ) { #> |
|---|
| 2016 | + <div class="favorites-form"> |
|---|
| 2017 | + <p class="install-help"><?php _e( 'If you have marked themes as favorites on WordPress.org, you can browse them here.' ); ?></p> |
|---|
| 2018 | + <p> |
|---|
| 2019 | + <label for="wporg-username-input"><?php _e( 'Your WordPress.org username:' ); ?></label> |
|---|
| 2020 | + <input type="search" id="wporg-username-input" value=""> |
|---|
| 2021 | + <button type="button" class="button button-secondary favorites-form-submit"><?php _e( 'Get Favorites' ); ?></button> |
|---|
| 2022 | + </p> |
|---|
| 2023 | + </div> |
|---|
| 2024 | + <# } else if ( 'feature_filter' === data.action ) { #> |
|---|
| 2025 | + <div class="filter-drawer"> |
|---|
| 2026 | + <div class="buttons"> |
|---|
| 2027 | + <button type="button" class="apply-filters button button-secondary"><?php _e( 'Apply Filters' ); ?><span></span></a> |
|---|
| 2028 | + <button type="button" class="clear-filters button button-secondary"><?php _e( 'Clear' ); ?></a> |
|---|
| 2029 | + </div> |
|---|
| 2030 | <?php |
|---|
| 2031 | - if ( $this->manager->is_theme_active() ) { |
|---|
| 2032 | - echo '<span class="customize-action">' . __( 'Active theme' ) . '</span> ' . $this->title; |
|---|
| 2033 | - } else { |
|---|
| 2034 | - echo '<span class="customize-action">' . __( 'Previewing theme' ) . '</span> ' . $this->title; |
|---|
| 2035 | + $feature_list = get_theme_feature_list(); |
|---|
| 2036 | + foreach ( $feature_list as $feature_name => $features ) { |
|---|
| 2037 | + echo '<fieldset class="filter-group">'; |
|---|
| 2038 | + $feature_name = esc_html( $feature_name ); |
|---|
| 2039 | + echo '<legend>' . $feature_name . '</legend>'; |
|---|
| 2040 | + echo '<div class="filter-group-feature">'; |
|---|
| 2041 | + foreach ( $features as $feature => $feature_name ) { |
|---|
| 2042 | + $feature = esc_attr( $feature ); |
|---|
| 2043 | + echo '<input type="checkbox" id="filter-id-' . $feature . '" value="' . $feature . '" /> '; |
|---|
| 2044 | + echo '<label for="filter-id-' . $feature . '">' . $feature_name . '</label><br>'; |
|---|
| 2045 | + } |
|---|
| 2046 | + echo '</div>'; |
|---|
| 2047 | + echo '</fieldset>'; |
|---|
| 2048 | } |
|---|
| 2049 | ?> |
|---|
| 2050 | - <button type="button" class="button customize-theme"><?php _e( 'Customize' ); ?></button> |
|---|
| 2051 | - </h3> |
|---|
| 2052 | - |
|---|
| 2053 | + <div class="filtered-by"> |
|---|
| 2054 | + <span><?php _e( 'Filtering by:' ); ?></span> |
|---|
| 2055 | + <div class="tags"></div> |
|---|
| 2056 | + <button type="button" class="button-link"><?php _e( 'Edit' ); ?></a> |
|---|
| 2057 | + </div> |
|---|
| 2058 | + </div> |
|---|
| 2059 | + <# } #> |
|---|
| 2060 | <div class="theme-overlay" tabindex="0" role="dialog" aria-label="<?php esc_attr_e( 'Theme Details' ); ?>"></div> |
|---|
| 2061 | - |
|---|
| 2062 | - <div id="customize-container"></div> |
|---|
| 2063 | - <?php if ( count( $this->controls ) > 4 ) : ?> |
|---|
| 2064 | - <p><label for="themes-filter"> |
|---|
| 2065 | - <span class="screen-reader-text"><?php _e( 'Search installed themes…' ); ?></span> |
|---|
| 2066 | - <input type="text" id="themes-filter" placeholder="<?php esc_attr_e( 'Search installed themes…' ); ?>" /> |
|---|
| 2067 | - </label></p> |
|---|
| 2068 | - <?php endif; ?> |
|---|
| 2069 | <div class="theme-browser rendered"> |
|---|
| 2070 | - <ul class="themes accordion-section-content"> |
|---|
| 2071 | + <div class="error unexpected-error" style="display: none; "><p><?php _e( 'An unexpected error occurred. Something may be wrong with WordPress.org or this server’s configuration. If you continue to have problems, please try the <a href="https://wordpress.org/support/">support forums</a>.' ); ?></p></div> |
|---|
| 2072 | + <ul class="themes"> |
|---|
| 2073 | </ul> |
|---|
| 2074 | + <p class="no-themes"><?php _e( 'No themes found. Try a different search.' ); ?></p> |
|---|
| 2075 | + <p class="spinner"></p> |
|---|
| 2076 | </div> |
|---|
| 2077 | </div> |
|---|
| 2078 | </li> |
|---|