[Resolved] Adding an attribute to the Generate Inline Styles

Home Forums Support Adding an attribute to the Generate Inline Styles

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1499455
    vast

    The GeneratePress inline styles (e.g. generate-style-inline-css, generate-navigation-branding-inline-css) are attached to an existing enqueued stylesheet.

    There is a requirement to add an additional attribute (e.g. nonce) to the existing style element e.g. <style id='generate-navigation-branding-inline-css'>.

    What is the recommended function to add additional attributes?

    #1500185
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

    add_action( 'wp_enqueue_scripts', function() {
        $css = 'your css here';
    
        wp_add_inline_style( 'generate-navigation-branding', $css );
    } );

    Let me know if you need more info πŸ™‚

    #1500344
    vast

    Thanks Tom. This would allow adding more CSS styles.

    What is the recommended option to add an attribute to the style tag?

    For example instead of <style id='generate-navigation-branding-inline-css'>, it would be <style id='generate-navigation-branding-inline-css' nonce='random'>

    #1500473
    Tom
    Lead Developer
    Lead Developer

    Ah, something like this might help: https://scottnelle.com/756/async-defer-enqueued-wordpress-scripts/

    I’m not sure if it will work with inline scripts.

    #1500582
    vast

    Thanks Tom. The filters e.g. style_loader_tag does not work.

    Having come across a recent post, it seems that the inline styles are generated by the function db_custom_css_output()..

    If yes, is there an option to include the additional attributes in the embedded style?

    #1501717
    Tom
    Lead Developer
    Lead Developer

    GeneratePress itself doesn’t output the <style> element – that’s 100% WordPress using the wp_add_inline_style() function: https://developer.wordpress.org/reference/functions/wp_add_inline_style/

    I’m not sure if it’s possible to alter the attributes of that element, unfortunately.

    #1501871
    vast

    Thanks Tom.

    1) Is there any particular reason to use the wp_add_inline_style() function versus a custom function that returns the CSS content?

    2) A previous post touched on dynamically populating a CSS. Given the support for async, and improved caching e.g. CDNs, can the contents generated from the Customizer be outputted to a file? and enqueued?

    In reading the specification, it seems wp_add_inline_style() doesn’t currently natively support the option to introduce additional attributes.

    Assuming there are reasons and constraints with (1) and (2) may require refactoring (minor hopefully), one of the options is to buffer the contents of the output. This support the ability to modify the contents before it’s returned to the screen.

    Example below with the caveat that it hasn’t been extensively tested. If used, please post feedback if there are particular issues as it may lend to further optimizations.

    ob_start();
    add_action('shutdown', function() {
        $data = '';
        $levels = ob_get_level();
    
        for ($i = 0; $i < $levels; $i++)
        {
            $data .= ob_get_clean();
        }
        echo apply_filters('output', $data);
    }, 0);
    
    add_filter('output', function($output) {
        return preg_replace("#<style id='([.:\-\/\?=a-zA-Z0-9]+)'#","<style id='$1' key='value'",$output);
    });
    #1502618
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. Yes, we always try to use core functionality as much as possible. In this case, using wp_add_inline_style() is the correct way to “append” CSS directly after the main stylesheet.

    2. Yes, you can do this in Customize > General.

    #1502662
    vast

    Thanks Tom.

    1) Can these be enqueued and registered as discrete styles handles?

    2) Does this apply to all appended inline styles e.g. generate-navigation-branding-inline-css? It doesn’t appear to when the settings are updated as follows.

    Customize > General > Dynamic CSS Print Method > External file
    Customize > General > Dynamic CSS Print Method > Combine CSS (unchecked)
    Customize > General > Dynamic CSS Print Method > Cache dynamic CSS (unchecked)

    Both embedded inline styles remain in place.

    Additionally, similar to the previous post, it seems when selecting “external file”, it returns a protocol relative URI e.g. //www.domain.com/wp-content/uploads/generatepress/style.min.css?ver=1603561469 instead of https://www.domain.com/wp-content/uploads/generatepress/style.min.css?ver=1603561469

    #1503795
    Tom
    Lead Developer
    Lead Developer

    1. I’m not too sure what you mean here – can you explain further?

    2. No, it only applies to the inline CSS after the main stylesheet. The location of the other CSS is important, so it can’t be moved around.

    Yes, we will be adding the correct protocol to the URL in 1.13.0.

    #1503841
    vast

    1. Rather than inline embedded stylesheets e.g. generate-style-inline-css, generate-navigation-branding-inline-css, these are registered and enqueued as distinct styles e.g. generate-style-{description}. These could be externalized e.g. CSS files or embedded using a function.

    2. Great. Is there any reason if the option is to externalize these to https://www.domain.com/wp-content/uploads/generatepress/style.min.css?ver=1603561469, why do these remain embedded? If the files need to be loaded in sequence and priority, these could be defined as dependencies e.g. wp_enqueue_script($handle, $path',$dependency,$metadata (version),true);

    Any ideas of when 1.13.0 is slated to be released?

    #1505097
    Tom
    Lead Developer
    Lead Developer

    Adding the rest of the inline CSS to the external file is something we’ll be looking at, but it’s something that will need some time and a lot of testing to make sure it doesn’t break anything.

    1.13.0 will likely happen in the first quarter of 2021.

    Thanks!

    #1505186
    vast

    Thanks Tom. We’ll keep an eye out for the changes. We are looking forward to them.

    #1505362
    Tom
    Lead Developer
    Lead Developer

    No problem – appreciate all the feedback and suggestions πŸ™‚

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.