Changeset 26726 for trunk/src/wp-admin/themes.php

Timestamp:

12/06/2013 04:10:25 PM (12 years ago)

Author:

nacin

Message:

No-JavaScript and no-Customizer support for the new Themes screen.

JavaScript is rarely disabled, but graceful degradation is still important. For example, syntax errors can occur, usually with major WP updates that overhaul entire experiences and update external libraries combined with themes or plugins doing weird or old things. If this error is due to their current theme, a user needs to be able to access the themes screen to switch away from the theme. A more subtle issue could make things painful to diagnose.

This commit renders the grid in PHP (the template is duplicated, but it lightweight, fairly mundane, and easy to sync). On Backbone render, the grid is then re-rendered from JavaScript so searches can occur. Customize and Live Preview is disabled if JS fails to kick in. If JS is disabled, old-school "Preview" links are displayed.

No-Customizer support: The customizer is only supported when the browser supports postMessage (IE8+), and if the frontend is a different domain, CORS (IE10+). We use the .hide-if-no-customize class for this. Pre-customize "Preview" links should use .hide-if-customize.

The .load-customize class should be used to declare a link that opens the customizer. This enables customize-loader.js to intercept this link and load the customizer on top of the current window, making for a smoother experience.

fixes #25964.

File:

• trunk/src/wp-admin/themes.php (modified) (5 diffs)

trunk/src/wp-admin/themes.php

@@ -117 +117 @@
 <div class="wrap">
     <h2><?php esc_html_e( 'Themes' ); ?>
-        <span class="theme-count"></span>
+        <span class="theme-count"><?php echo count( $themes ); ?></span>
     <?php if ( ! is_multisite() && current_user_can( 'install_themes' ) ) : ?>
         <a href="<?php echo admin_url( 'theme-install.php' ); ?>" class="add-new-h2"><?php echo esc_html( _x( 'Add New', 'Add new theme' ) ); ?></a>
@@ -180 +180 @@
 ?>
 
-<div class="theme-browser"></div>
+<div class="theme-browser">
+    <div class="themes">
+
+<?php
+/*
+ * This PHP is synchronized with the tmpl-theme template below!
+ */
+
+foreach ( $themes as $theme ) : ?>
+<div class="theme<?php if ( $theme['active'] ) echo ' active'; ?>">
+    <?php if ( ! empty( $theme['screenshot'][0] ) ) { ?>
+        <div class="theme-screenshot">
+            <img src="<?php echo $theme['screenshot'][0]; ?>" alt="" />
+        </div>
+    <?php } else { ?>
+        <div class="theme-screenshot blank"></div>
+    <?php } ?>
+    <span class="more-details"><?php _e( 'Theme Details' ); ?></span>
+    <div class="theme-author"><?php printf( __( 'By %s' ), $theme['author'] ); ?></div>
+
+    <?php if ( $theme['active'] ) { ?>
+        <h3 class="theme-name"><span><?php _ex( 'Active:', 'theme' ); ?></span> <?php echo $theme['name']; ?></h3>
+    <?php } else { ?>
+        <h3 class="theme-name"><?php echo $theme['name']; ?></h3>
+    <?php } ?>
+
+    <div class="theme-actions">
+
+    <?php if ( $theme['active'] ) { ?>
+        <?php if ( $theme['actions']['customize'] ) { ?>
+            <a class="button button-primary customize load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Customize' ); ?></a>
+        <?php } ?>
+    <?php } else { ?>
+        <a class="button button-primary activate" href="<?php echo $theme['actions']['activate']; ?>"><?php _e( 'Activate' ); ?></a>
+        <a class="button button-secondary load-customize hide-if-no-customize" href="<?php echo $theme['actions']['customize']; ?>"><?php _e( 'Live Preview' ); ?></a>
+        <a class="button button-secondary hide-if-customize" href="<?php echo $theme['actions']['preview']; ?>"><?php _e( 'Preview' ); ?></a>
+    <?php } ?>
+
+    </div>
+
+    <?php if ( $theme['hasUpdate'] ) { ?>
+        <div class="theme-update"><?php _e( 'Update Available' ); ?></div>
+    <?php } ?>
+</div>
+<?php endforeach; ?>
+    <br class="clear" />
+    </div>
+</div>
 
 <?php
@@ -213 +260 @@
 </div><!-- .wrap -->
 
+<?php
+/*
+ * The tmpl-theme template is synchronized with PHP above!
+ */
+?>
 <script id="tmpl-theme" type="text/template">
     <# if ( data.screenshot[0] ) { #>
@@ -234 +286 @@
     <# if ( data.active ) { #>
         <# if ( data.actions.customize ) { #>
-            <a class="button button-primary hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
+            <a class="button button-primary customize load-customize hide-if-no-customize" href="{{ data.actions.customize }}"><?php _e( 'Customize' ); ?></a>
         <# } #>
     <# } else { #>
         <a class="button button-primary activate" href="{{{ data.actions.activate }}}"><?php _e( 'Activate' ); ?></a>
-        <a class="button button-secondary preview" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+        <a class="button button-secondary load-customize hide-if-no-customize" href="{{{ data.actions.customize }}}"><?php _e( 'Live Preview' ); ?></a>
+        <a class="button button-secondary hide-if-customize" href="{{{ data.actions.preview }}}"><?php _e( 'Preview' ); ?></a>
     <# } #>
 
@@ -297 +350 @@
         <div class="theme-actions">
             <div class="active-theme">
-                <a href="{{{ data.actions.customize }}}" class="button button-primary hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
+                <a href="{{{ data.actions.customize }}}" class="button button-primary customize load-customize hide-if-no-customize"><?php _e( 'Customize' ); ?></a>
                 <?php echo implode( ' ', $current_theme_actions ); ?>
             </div>
             <div class="inactive-theme">
                 <# if ( data.actions.activate ) { #>
-                    <a href="{{{ data.actions.activate }}}" class="button button-primary"><?php _e( 'Activate' ); ?></a>
-                <# } #>
-                <a href="{{{ data.actions.customize }}}" class="button button-secondary"><?php _e( 'Live Preview' ); ?></a>
+                    <a href="{{{ data.actions.activate }}}" class="button button-primary activate"><?php _e( 'Activate' ); ?></a>
+                <# } #>
+                <a href="{{{ data.actions.customize }}}" class="button button-secondary load-customize hide-if-no-customize"><?php _e( 'Live Preview' ); ?></a>
+                <a href="{{{ data.actions.preview }}}" class="button button-secondary hide-if-customize"><?php _e( 'Preview' ); ?></a>
             </div>