Defined colors in theme.json not building into front-end styles - Sage 11

sage
1

I’ve added some custom colors to my theme.json and they do appear in the Wordpress editor. However, when I choose a text or background color, those colors don’t appear on the front-end. I checked my built app.css file and it doesn’t contain any of my defined colors either. I am using tailwindcss so I’m not sure if the tailwind process is pruning those styles. How exactly does the build know which colors have been added or is it supposed to just add all the custom colors to my final css?

2

Have you added “static” to the @theme directive? It’s similar to whitelisting in older versions of tailwind as it ensures the custom variable is always created, even if not detected in your code during the build process

@theme static {
  --color-red:#a42824;
}
3

Hey, thanks that added the vars to the built app.css but the issue still persists where the WP class isn’t being compiled into the css. For example, when I add the color class, on the front-end, the classes look like this:

<div class= "wp-block-heading mt-0 mc-heading has-red-400-color has-blue-500-background-color has-text-color has-background has-link-color wp-elements-4cd4190f47aecc44920d1792519fb401">Test text</div>

So those WP classes has-red-400-color and has-blue-500-background-color are not being compiled into the final CSS.

4

The has- classes should get inlined on the page by wordpress, not included in your built css. It should be inlined in <style id="global-styles-inline-css"> I would check to make sure you’re not doing something that disables that.

6

How does Wordpress know about theme.json. I see setup.php has:

add_filter('theme_file_path', function ($path, $file) {
    return $file === 'theme.json'
        ? public_path('build/assets/theme.json')
        : $path;
}, 10, 2);

And here’s my functions.php in the theme root:

<?php

use Roots\Acorn\Application;

/*
|--------------------------------------------------------------------------
| Register The Auto Loader
|--------------------------------------------------------------------------
|
| Composer provides a convenient, automatically generated class loader for
| our theme. We will simply require it into the script here so that we
| don't have to worry about manually loading any of our classes later on.
|
*/

if (! file_exists($composer = __DIR__ . '/vendor/autoload.php')) {
    wp_die(__('Error locating autoloader. Please run <code>composer install</code>.', 'sage'));
}

require $composer;

/*
|--------------------------------------------------------------------------
| Register The Bootloader
|--------------------------------------------------------------------------
|
| The first thing we will do is schedule a new Acorn application container
| to boot when WordPress is finished loading the theme. The application
| serves as the "glue" for all the components of Laravel and is
| the IoC container for the system binding all of the various parts.
|
*/

Application::configure()
    ->withProviders([
        App\Providers\ThemeServiceProvider::class,
    ])
    ->boot();

/*
|--------------------------------------------------------------------------
| Register Sage Theme Files
|--------------------------------------------------------------------------
|
| Out of the box, Sage ships with categorically named theme files
| containing common functionality and setup to be bootstrapped with your
| theme. Simply add (or remove) files from the array below to change what
| is registered alongside Sage.
|
*/

collect(['setup', 'filters'])
    ->each(function ($file) {
        echo $file;
        if (! locate_template($file = "app/{$file}.php", true, true)) {
            wp_die(
                /* translators: %s is replaced with the relative file path */
                sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file)
            );
        }
    });
7

You were right, I was doing something that disabled the global styles, namely:

        add_action('wp_enqueue_scripts', function () {
            wp_dequeue_style('wp-block-library-theme'); // block-theme tweaks
            wp_dequeue_style('global-styles');          // theme.json globals
        }, 20);

Removed that and it now works. Thanks for the help.

8

If you want to keep those styles dequeued, you can bring back just the variables/presets with something like:

add_filter('wp_head', function () {
    $styles = wp_get_global_stylesheet(types: ['variables', 'presets']);

    echo "<style>{$styles}</style>";
}, 100);
2 Likes
9

Wow, awesome, that worked great, thanks!