Super Cache: Overhaul styling to match Jetpack aesthetics (#32981)

Co-authored-by: Jason Moon <[email protected]>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/6191878533

CHANGELOG.md

@@ -11,6 +11,7 @@ This is an alpha version! The changes listed here are not final.
 
 ### Changed
 - General: update WordPress version requirements to WordPress 6.2.
+- Overhauled visual styling to match Jetpack branding
 - Updated package dependencies.
 
 ### Fixed

ossdl-cdn.php

@@ -278,6 +278,7 @@ function scossdl_off_options() {
 	$example_cdn_uri .= '/wp-includes/js/jquery/jquery-migrate.js';
 	$example_cdn_uri  = esc_url( $example_cdn_uri );
 	?>
+		<div class="wpsc-card">
 		<h3><?php _e( 'Jetpack CDN' ); ?></h3>
 		<p><?php printf(
 			__( 'The free %1$sJetpack plugin%2$s has a %3$sSite Accelerator%2$s feature that is easier to use than the CDN functionality in this plugin. However files will be cached "forever" and will not update if you update the local file. Files will need to be renamed to refresh them. The %3$sJetpack documentation%2$s explains more about this.', 'wp-super-cache' ),
@@ -310,6 +311,7 @@ function scossdl_off_options() {
 			); ?></strong></p><?php
 	}
 	if ( class_exists( 'Jetpack' ) && Jetpack::is_module_active( 'photon' ) ) {
+		echo '</div>'; // close wpsc-card
 		return;
 	}
 	?>
@@ -373,5 +375,6 @@ function scossdl_off_options() {
 		<p class="submit"><input type="submit" class="button-primary" value="<?php esc_attr_e( 'Save Changes', 'wp-super-cache' ); ?>" /></p>
 		</form></p>
 		<p><?php _e( 'CDN functionality provided by <a href="https://wordpress.org/plugins/ossdl-cdn-off-linker/">OSSDL CDN Off Linker</a> by <a href="http://mark.ossdl.de/">Mark Kubacki</a>', 'wp-super-cache' ); ?></p>
+		</div> <!-- Close .wpsc-card -->
 	<?php
 }

partials/advanced.php

@@ -1,3 +1,4 @@
+<div class="wpsc-settings-inner">
 <?php
 global $wp_cache_mod_rewrite, $wp_cache_mfunc_enabled, $wp_cache_mobile_enabled;
 
@@ -7,6 +8,7 @@
 if ( isset( $wp_cache_front_page_checks ) == false ) {
 	$wp_cache_front_page_checks = true;
 }
+echo '<div class="wpsc-card">';
 echo '<form name="wp_manager" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) ) . '" method="post">';
 wp_nonce_field( 'wp-cache' );
 echo '<input type="hidden" name="action" value="scupdates" />';
@@ -212,7 +214,10 @@
 <?php
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . ' value="' . esc_html__( 'Update Status', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field( 'wp-cache' );
-?></form><?php
+?>
+</form>
+</div>
+<?php
 
 if ( ! $GLOBALS['is_nginx'] && ! defined( 'WPSC_DISABLE_HTACCESS_UPDATE' ) && $GLOBALS['cache_enabled'] === true && $GLOBALS['wp_cache_mod_rewrite'] === 1 ) {
 	?>
@@ -270,7 +275,9 @@
 
 $timezone_format = _x('Y-m-d G:i:s', 'timezone date format');
 
-?><fieldset class="options">
+?>
+<div class="wpsc-card">
+<fieldset class="options">
 <a name='expirytime'></a>
 <h4><?php _e( 'Expiry Time &amp; Garbage Collection', 'wp-super-cache' ); ?></h4><?php
 
@@ -340,10 +347,14 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Change Expiration', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
-?></fieldset><?php
+?>
+</fieldset>
+</div>
 
+<?php
+// Accepted Filenames
+echo '<div class="wpsc-card">';
 echo '<a name="files"></a><fieldset class="options"><h4>' . __( 'Accepted Filenames &amp; Rejected URIs', 'wp-super-cache' ) . '</h4>';
-
 echo '<a name="rejectpages"></a>';
 echo '<p>' . __( 'Do not cache the following page types. See the <a href="https://codex.wordpress.org/Conditional_Tags">Conditional Tags</a> documentation for a complete discussion on each type.', 'wp-super-cache' ) . '</p>';
 echo '<form name="wp_edit_rejected_pages" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#rejectpages' ) . '" method="post">';
@@ -362,7 +373,10 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save Settings', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
+echo '</div>';
 
+// Rejected URL strings
+echo '<div class="wpsc-card">';
 echo '<a name="rejecturi"></a><fieldset class="options"><h4>' . __( 'Rejected URL Strings', 'wp-super-cache' ) . '</h4>';
 echo '<form name="wp_edit_rejected" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#rejecturi' ) . '" method="post">';
 echo "<p>" . __( 'Add here strings (not a filename) that forces a page not to be cached. For example, if your URLs include year and you dont want to cache last year posts, it&#8217;s enough to specify the year, i.e. &#8217;/2004/&#8217;. WP-Cache will search if that string is part of the URI and if so, it will not cache that page.', 'wp-super-cache' ) . "</p>\n";
@@ -374,7 +388,10 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save Strings', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field( 'wp-cache' );
 echo "</form>\n";
+echo '</div>';
 
+// Rejected Cookies
+echo '<div class="wpsc-card">';
 echo '<a name="rejectcookies"></a><fieldset class="options"><h4>' . __( 'Rejected Cookies', 'wp-super-cache' ) . '</h4>';
 echo '<form name="wp_edit_rejected_cookies" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#rejectcookies' ) . '" method="post">';
 echo "<p>" . __( 'Do not cache pages when these cookies are set. Add the cookie names here, one per line. Matches on fragments, so "test" will match "WordPress_test_cookie". (Simple caching only)', 'wp-super-cache' ) . "</p>\n";
@@ -386,7 +403,10 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
+echo '</div>';
 
+// Always Cache Filenames
+echo '<div class="wpsc-card">';
 echo '<a name="cancache"></a><fieldset class="options"><h4>' . __( 'Always Cache Filenames', 'wp-super-cache' ) . '</h4>';
 echo '<div style="clear:both"></div><form name="wp_edit_accepted" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#cancache' ) . '" method="post">';
 echo "<p>" . __( 'Add here those filenames that can be cached, even if they match one of the rejected substring specified above.', 'wp-super-cache' ) . "</p>\n";
@@ -398,5 +418,7 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save Files', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
+echo '</div>';
 
 echo '</fieldset>';
+echo '</div>';

partials/debug.php

@@ -1,9 +1,11 @@
+<div class="wpsc-settings-inner">
 <?php
 extract( wpsc_update_debug_settings() ); // $wp_super_cache_debug, $wp_cache_debug_log, $wp_cache_debug_ip, $wp_super_cache_comments, $wp_super_cache_front_page_check, $wp_super_cache_front_page_clear, $wp_super_cache_front_page_text, $wp_super_cache_front_page_notification, $wp_super_cache_advanced_debug, $wp_cache_debug_username
 $admin_url = admin_url( 'options-general.php?page=wpsupercache' );
 
 echo '<a name="debug"></a>';
 echo '<fieldset class="options">';
+echo '<div class="wpsc-card">';
 echo '<p>' . __( 'Fix problems with the plugin by debugging it here. It will log to a file in your cache directory.', 'wp-super-cache' ) . '</p>';
 // $wp_cache_debug_log is declared when this file is included.
 // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UndefinedVariable
@@ -40,7 +42,9 @@
 wp_nonce_field('wp-cache');
 submit_button( $debug_status_message, 'primary', 'wpsc_log_status', true );
 echo "</form>";
+echo '</div>';
 
+echo '<div class="wpsc-card">';
 echo '<form name="wp_cache_debug" action="' . esc_url_raw( add_query_arg( 'tab', 'debug', $admin_url ) ) . '" method="post">';
 echo "<input type='hidden' name='wp_cache_debug' value='1' /><br />";
 echo "<table class='form-table'>";
@@ -65,4 +69,6 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save Settings', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
+echo '</div>';
 echo '</fieldset>';
+echo '</div>';

partials/easy.php

@@ -1,5 +1,7 @@
+<div class="wpsc-settings-inner">
 <?php
 global $wpsc_promo_links;
+echo '<div class="wpsc-card">';
 echo '<form name="wp_manager" action="' . esc_url_raw( add_query_arg( 'tab', 'easy', $admin_url ) ) . '" method="post">';
 echo '<input type="hidden" name="action" value="easysetup" />';
 wp_nonce_field( 'wp-cache' );
@@ -31,7 +33,9 @@
 	}
 }
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . ' value="' . esc_html__( 'Update Status', 'wp-super-cache' ) . '" /></div></form>';
+echo '</div>';
 if ( $cache_enabled ) {
+	echo '<div class="wpsc-card">';
 	echo '<h4>' . esc_html__( 'Cache Tester', 'wp-super-cache' ) . '</h4>';
 	echo '<p>' . esc_html__( 'Test your cached website by clicking the test button below.', 'wp-super-cache' ) . '</p>';
 	echo '<p>' . __( 'Note: if you use Cloudflare or other transparent front-end proxy service this test may fail.<ol><li> If you have Cloudflare minification enabled this plugin may detect differences in the pages and report an error.</li><li> Try using the development mode of Cloudflare to perform the test. You can disable development mode afterwards if the test succeeds.</li></ol>', 'wp-super-cache' ) . '</p>';
@@ -106,23 +110,29 @@
 
 	wp_nonce_field( 'wp-cache' );
 	echo '</form>';
+	echo '</div>';
 }
+echo '<div class="wpsc-card">';
 echo '<h4>' . esc_html__( 'Delete Cached Pages', 'wp-super-cache' ) . '</h4>';
 echo '<p>' . esc_html__( 'Cached pages are stored on your server as html and PHP files. If you need to delete them, use the button below.', 'wp-super-cache' ) . '</p>';
 echo '<form name="wp_cache_content_delete" action="' . esc_url_raw( add_query_arg( 'tab', 'contents', $admin_url ) ) . '" method="post">';
 echo '<input type="hidden" name="wp_delete_cache" />';
 echo '<div class="submit"><input id="deletepost" class="button-secondary" type="submit" ' . SUBMITDISABLED . 'value="' . esc_html__( 'Delete Cache', 'wp-super-cache' ) . ' " /></div>';
 wp_nonce_field( 'wp-cache' );
 echo "</form>\n";
+echo '</div>';
 
 if ( is_multisite() && wpsupercache_site_admin() ) {
+	echo '<div class="wpsc-card">';
 	echo '<form name="wp_cache_content_delete" action="' . esc_url_raw( add_query_arg( 'tab', 'contents', $admin_url ) . '#listfiles' ) . '" method="post">';
 	echo '<input type="hidden" name="wp_delete_all_cache" />';
 	echo '<div class="submit"><input id="deleteallpost" class="button-secondary" type="submit" ' . SUBMITDISABLED . 'value="' . esc_html__( 'Delete Cache On All Blogs', 'wp-super-cache' ) . '" /></div>';
 	wp_nonce_field( 'wp-cache' );
 	echo "</form><br />\n";
+	echo '</div>';
 }
 ?>
+<div class="wpsc-card">
 <h4 class="clear"><?php esc_html_e( 'Recommended Links and Plugins', 'wp-super-cache' ); ?></h4>
 <p><?php esc_html_e( 'Caching is only one part of making a website faster. Here are some other plugins that will help:', 'wp-super-cache' ); ?></p>
 
@@ -160,4 +170,5 @@
 <li><?php printf( __( '<a href="%s">WP Crontrol</a> is a useful plugin to use when trying to debug garbage collection and preload problems.', 'wp-super-cache' ), 'https://wordpress.org/plugins/wp-crontrol/' ); ?></li>
 </ul>
 <p><?php _e( "* The links above (apart from Jetpack) go to websites outside the author's control. Caution is advised when testing any new software.", 'wp-super-cache' ); ?></p>
-
+</div>
+</div>

partials/lockdown.php

@@ -1,3 +1,4 @@
+<div class="wpsc-card">
 <a name='lockdown'></a>
 	<fieldset class="options">
 	<h4><?php _e( 'Lock Down:', 'wp-super-cache' ); ?> <?php echo $wp_lock_down == '0' ? '<span style="color:red">' . __( 'Disabled', 'wp-super-cache' ) . '</span>' : '<span style="color:green">' . __( 'Enabled', 'wp-super-cache' ) . '</span>'; ?></h4>
@@ -77,3 +78,4 @@
 	</fieldset>
 <?php
 } // if $super_cache_enabled
+echo '</div>';

partials/preload.php

@@ -1,3 +1,4 @@
+<div class="wpsc-settings-inner">
 <?php
 echo '<a name="preload"></a>';
 if ( ! $cache_enabled || ! $super_cache_enabled || true === defined( 'DISABLESUPERCACHEPRELOADING' ) ) {
@@ -12,12 +13,15 @@
 	$min_refresh_interval = 30;
 }
 
+echo '<div class="wpsc-card">';
 echo '<p>' . __( 'This will cache every published post and page on your site. It will create supercache static files so unknown visitors (including bots) will hit a cached page. This will probably help your Google ranking as they are using speed as a metric when judging websites now.', 'wp-super-cache' ) . '</p>';
 echo '<p>' . __( 'Preloading creates lots of files however. Caching is done from the newest post to the oldest so please consider only caching the newest if you have lots (10,000+) of posts. This is especially important on shared hosting.', 'wp-super-cache' ) . '</p>';
 echo '<p>' . __( 'In &#8217;Preload Mode&#8217; regular garbage collection will be disabled so that old cache files are not deleted. This is a recommended setting when the cache is preloaded.', 'wp-super-cache' ) . '</p>';
 echo '<form name="cache_filler" action="' . esc_url_raw( add_query_arg( 'tab', 'preload', $admin_url ) ) . '" method="POST">';
 echo '<input type="hidden" name="action" value="preload" />';
 echo '<input type="hidden" name="page" value="wpsupercache" />';
+echo '</div>';
+echo '<div class="wpsc-card">';
 echo '<p>' . sprintf( __( 'Refresh preloaded cache files every %s minutes. (0 to disable, minimum %d minutes.)', 'wp-super-cache' ), "<input type='text' size=4 name='wp_cache_preload_interval' value='" . (int) $wp_cache_preload_interval . "' />", $min_refresh_interval ) . '</p>';
 if ( $count > 100 ) {
 	$step = (int)( $count / 10 );
@@ -90,3 +94,5 @@
 echo '</div>';
 wp_nonce_field( 'wp-cache' );
 echo '</form>';
+echo '</div>';
+echo '</div>';

partials/rejected_user_agents.php

@@ -1,3 +1,4 @@
+<div class="wpsc-card">
 <?php
 echo '<a name="useragents"></a><fieldset class="options"><h4>' . __( 'Rejected User Agents', 'wp-super-cache' ) . '</h4>';
 echo "<p>" . __( 'Strings in the HTTP &#8217;User Agent&#8217; header that prevent WP-Cache from caching bot, spiders, and crawlers&#8217; requests. Note that super cached files are still sent to these agents if they already exists.', 'wp-super-cache' ) . "</p>\n";
@@ -11,3 +12,5 @@
 wp_nonce_field('wp-cache');
 echo '</form>';
 echo "</fieldset>\n";
+?>
+</div>

partials/restore.php

@@ -1,3 +1,4 @@
+<div class="wpsc-card">
 <?php
 echo '<fieldset class="options"><h4>' . __( 'Fix Configuration', 'wp-super-cache' ) . '</h4>';
 echo '<form name="wp_restore" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#top' ) . '" method="post">';
@@ -6,3 +7,5 @@
 wp_nonce_field('wp-cache');
 echo "</form>\n";
 echo '</fieldset>';
+?>
+</div>

partials/tracking_parameters.php

@@ -1,3 +1,4 @@
+<div class="wpsc-card">
 <?php
 echo '<a name="trackingparameters"></a><fieldset class="options"><h4>' . __( 'Tracking Parameters', 'wp-super-cache' ) . '</h4>';
 echo '<form name="edit_tracking_parameters" action="' . esc_url_raw( add_query_arg( 'tab', 'settings', $admin_url ) . '#trackingparameters' ) . '" method="post">';
@@ -11,3 +12,5 @@
 echo '<div class="submit"><input class="button-primary" type="submit" ' . SUBMITDISABLED . 'value="' . __( 'Save', 'wp-super-cache' ) . '" /></div>';
 wp_nonce_field('wp-cache');
 echo "</form>\n";
+?>
+</div>