<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[14151] sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations: Theme Previews: Style card: Add support for themes that don't set colors in theme.json</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="http://meta.trac.wordpress.org/changeset/14151">14151</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"http://meta.trac.wordpress.org/changeset/14151","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>ryelle</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2024-10-28 16:20:05 +0000 (Mon, 28 Oct 2024)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Theme Previews: Style card: Add support for themes that don't set colors in theme.json
Some block themes set the page background color not by setting the styles.color.background property, but instead by adding a top-level wrapper block. When done this way, the background is not picked up by the style variation card view. This PR attempts to pull out any relevant classes from the first wrapper element it sees, and applies those to the style card container
Fixes https://github.com/WordPress/wporg-theme-directory/issues/154.
Closes https://github.com/WordPress/wordpress.org/pull/391.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#sitestrunkwpthemescompublic_htmlwpcontentpluginsstylevariationsincglobalstylepagephp">sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/inc/global-style-page.php</a></li>
<li><a href="#sitestrunkwpthemescompublic_htmlwpcontentpluginsstylevariationsviewscardphp">sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/views/card.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="sitestrunkwpthemescompublic_htmlwpcontentpluginsstylevariationsincglobalstylepagephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/inc/global-style-page.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/inc/global-style-page.php 2024-10-28 07:33:28 UTC (rev 14150)
+++ sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/inc/global-style-page.php 2024-10-28 16:20:05 UTC (rev 14151)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3,16 +3,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> namespace WordPressdotorg\Theme_Preview\Style_Variations\Global_Style_Page;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Uses custom page if query string is present to display style variation cards.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Bypass the template loader to show the "card view" when query string is present.
+ *
+ * @param string $template The path of the template to include.
+ *
+ * @return string Updated template path.
</ins><span class="cx" style="display: block; padding: 0 10px"> */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-function redirect_to_style_page() {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function inject_style_card_view( $template ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( ! isset( $_GET['card_view'] ) ) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return $template;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- include dirname( __DIR__ ) . '/views/card.php';
- exit;
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ return dirname( __DIR__ ) . '/views/card.php';
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-add_action( 'template_redirect', __NAMESPACE__ . '\redirect_to_style_page' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+add_action( 'template_include', __NAMESPACE__ . '\inject_style_card_view', 100 );
</ins></span></pre></div>
<a id="sitestrunkwpthemescompublic_htmlwpcontentpluginsstylevariationsviewscardphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/views/card.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/views/card.php 2024-10-28 07:33:28 UTC (rev 14150)
+++ sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/views/card.php 2024-10-28 16:20:05 UTC (rev 14151)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -9,6 +9,24 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $global_settings = wp_get_global_settings();
</span><span class="cx" style="display: block; padding: 0 10px"> $palette = $global_settings['color']['palette'];
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$global_styles = wp_get_global_styles();
+$has_set_background = isset( $global_styles['color'], $global_styles['color']['background'] );
+
+$classes = 'wporg-global-style-container';
+
+// If the background is not set via theme.json's color.background setting, the background might be set on
+// a wrapper element in the template. This will try to find the first child element of the template with
+// a background color, and pull out those classes to use on the global style container.
+// For example, it should add `has-first-background-color`, or `has-custom-main-gradiant-gradient-background`.
+if ( ! $has_set_background ) {
+ $template_html = get_the_block_template_html();
+
+ $tags = new \WP_HTML_Tag_Processor( $template_html );
+ if ( $tags->next_tag( [ 'class_name' => 'has-background' ] ) ) {
+ $classes .= ' ' . $tags->get_attribute( 'class' );
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ?><!DOCTYPE html>
</span><span class="cx" style="display: block; padding: 0 10px"> <html <?php language_attributes(); ?>>
</span><span class="cx" style="display: block; padding: 0 10px"> <head>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -63,7 +81,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> </head>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <body <?php body_class(); ?>>
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-<div class="wporg-global-style-container">
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+<div class="<?php echo esc_attr( $classes ); ?>">
</ins><span class="cx" style="display: block; padding: 0 10px"> <div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div><h1 id="wporg-global-style-heading">Aa</h1></div>
</span><span class="cx" style="display: block; padding: 0 10px"> <div id="wporg-global-style-circles"></div>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -95,8 +114,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var h1TextColor = rgba2hex( window.getComputedStyle( h1Element ).color ).toLowerCase();
</span><span class="cx" style="display: block; padding: 0 10px"> var bodyColor = rgba2hex( window.getComputedStyle( document.body ).backgroundColor ).toLowerCase();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // If no background is set on this element, it's still a valid value (#0000).
+ var divColor = rgba2hex( window.getComputedStyle( document.querySelector( '.wporg-global-style-container' ) ).backgroundColor ).toLowerCase();
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Remove the already used colors
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var colors = palette.theme.filter( entry => ! [ h1TextColor, bodyColor ].includes( entry.color.toLowerCase() ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var colors = palette.theme.filter( entry => ! [ h1TextColor, bodyColor, divColor ].includes( entry.color.toLowerCase() ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Create circles for the first 2 colors.
</span><span class="cx" style="display: block; padding: 0 10px"> colors.slice( 0, 2 ).forEach( entry => {
</span></span></pre>
</div>
</div>
</body>
</html>