WordPress.org
Get WordPress

Making WordPress.org

Changeset 14151


Ignore:
Timestamp:
10/28/2024 04:20:05 PM (16 months ago)
Author:
ryelle
Message:

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.

Location:
sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations
Files:
2 edited

Legend:

Unmodified
Added
Removed

  • sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/inc/global-style-page.php

    r12349 r14151  
    44
    55/**
    6  * Uses custom page if query string is present to display style variation cards.
     6 * Bypass the template loader to show the "card view" when query string is present.
     7 *
     8 * @param string $template The path of the template to include.
     9 *
     10 * @return string Updated template path.
    711 */
    8 function redirect_to_style_page() {
     12function inject_style_card_view( $template ) {
    913    if ( ! isset( $_GET['card_view'] ) ) {
    10         return;
     14        return $template;
    1115    }
    1216
    13     include dirname( __DIR__ ) . '/views/card.php';
    14     exit;
    15 
     17    return dirname( __DIR__ ) . '/views/card.php';
    1618}
    1719
    18 add_action( 'template_redirect', __NAMESPACE__ . '\redirect_to_style_page' );
     20add_action( 'template_include', __NAMESPACE__ . '\inject_style_card_view', 100 );

  • sites/trunk/wp-themes.com/public_html/wp-content/plugins/style-variations/views/card.php

    r12349 r14151  
    99$global_settings = wp_get_global_settings();
    1010$palette         = $global_settings['color']['palette'];
     11
     12$global_styles = wp_get_global_styles();
     13$has_set_background = isset( $global_styles['color'], $global_styles['color']['background'] );
     14
     15$classes = 'wporg-global-style-container';
     16
     17// If the background is not set via theme.json's color.background setting, the background might be set on
     18// a wrapper element in the template. This will try to find the first child element of the template with
     19// a background color, and pull out those classes to use on the global style container.
     20// For example, it should add `has-first-background-color`, or  `has-custom-main-gradiant-gradient-background`.
     21if ( ! $has_set_background ) {
     22    $template_html = get_the_block_template_html();
     23
     24    $tags = new \WP_HTML_Tag_Processor( $template_html );
     25    if ( $tags->next_tag( [ 'class_name' => 'has-background' ] ) ) {
     26        $classes .= ' ' . $tags->get_attribute( 'class' );
     27    }
     28}
    1129
    1230?><!DOCTYPE html>
    … …  
    6482
    6583<body <?php body_class(); ?>>
    66 <div class="wporg-global-style-container">
     84
     85<div class="<?php echo esc_attr( $classes ); ?>">
    6786    <div>
    6887        <div><h1 id="wporg-global-style-heading">Aa</h1></div>
    … …  
    96115    var bodyColor = rgba2hex( window.getComputedStyle( document.body ).backgroundColor ).toLowerCase();
    97116
     117    // If no background is set on this element, it's still a valid value (#0000).
     118    var divColor = rgba2hex( window.getComputedStyle( document.querySelector( '.wporg-global-style-container' ) ).backgroundColor ).toLowerCase();
     119
    98120    // Remove the already used colors
    99     var colors = palette.theme.filter( entry => ! [ h1TextColor, bodyColor ].includes( entry.color.toLowerCase() ) );
     121    var colors = palette.theme.filter( entry => ! [ h1TextColor, bodyColor, divColor ].includes( entry.color.toLowerCase() ) );
    100122   
    101123    // Create circles for the first 2 colors.
Note: See TracChangeset for help on using the changeset viewer.