1-line change?

  • Resolved macoafi

    (@macoafi)


    4 years, 11 months ago

    The Lighthouse accessibility audit flagged that the id “kt_global_css_variables” shows up twice per page on my site. Of course, id’s are supposed to be unique. I took a look at index.php and saw line 377:

    add_action('wp_print_styles', array($this, 'print_global_css_variables'));

    That can result in printing the style multiple times. If you just swap it over to use the newer/more-recommended wp_enqueue_scripts hook instead, you’re golden.

    add_action('wp_enqueue_scripts', array($this, 'print_global_css_variables'));

    I’d submit a real patch, but I haven’t used SVN in a decade and don’t quite remember how.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Daniel Men?ies

    (@kungtiger)

    wp_enqueue_scripts is for register or enqueue scripts, wp_print_styles is for printing custom CSS or JS.
    print_global_css_variables does not register or enqueue anything but prints out custom CSS variables.

    I’ve just checked my plugin against the latest WP version, with no additional plugins active and Twenty Twenty as theme. kt_global_css_variables does only show up once.

    Some plugins and themes use their own hooks for managing styles and scripts and can mess up WP a bit. Some page builders are pretty messy and print out duplicate CSS and JS. I do not know if you are using other plugin or a theme that could do so. Deactivate them one by one and run your audit every time to see who’s the culprit.

    In any case, I’ll include a fix in the next version to prevent any duplicate CSS variables get printed.

    Thread Starter macoafi

    (@macoafi)

    wp_enqueue_scripts is for both scripts and styles. (That’s what the docs say.) Inline versus linked styles didn’t seem like a significant difference to me *shrug* so when I saw the Codex saying not to use wp_print_styles for enqueueing styles after WP 3.3 I figured that was the same as deprecating wp_print_styles

    Yes, I’m using a page builder. Some CSS for the page builder is being linked at the end of the page, which I think is an optimization thing. That’s not actually duplicated, just the color palette part.

    Thanks for taking a look!

    Plugin Author Daniel Men?ies

    (@kungtiger)

    Well, from afar I can’t guess why kt_global_css_variables shows up more than once. My plugin hooks into wp_print_styles which should be called by wp_head() only once if a theme is set-up right. Can you tell me where the other kt_global_css_variables shows up? The first one should be inside <head> just before the first <link rel="stylesheet"> to an external CSS file, but I can’t imagine where another one could show up.

    Thread Starter macoafi

    (@macoafi)

    It’s immediately after the closing </div> tag for div#content

    Thread Starter macoafi

    (@macoafi)

    Oh, actually, I know why in terms of the page builder that would be the place. I’ve got a global row in Beaver Builder for one of those oversize footer areas. The CSS for that global row is being linked right before the row is used, which is right after the content ends.

    Plugin Author Daniel Men?ies

    (@kungtiger)

    Version 1.14.7 fixes this issue. CSS variables get only printed once.

    Thread Starter macoafi

    (@macoafi)

    Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘1-line change?’ is closed to new replies.