- This topic has 13 replies, 2 voices, and was last updated 3 years, 5 months ago by Tom.
-
AuthorPosts
-
October 22, 2020 at 2:09 am #1499455vast
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?
October 22, 2020 at 9:16 am #1500185TomLead DeveloperLead DeveloperHi 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 ๐
October 22, 2020 at 11:32 am #1500344vastThanks 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'>
October 22, 2020 at 1:16 pm #1500473TomLead DeveloperLead DeveloperAh, 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.
October 22, 2020 at 4:39 pm #1500582vastThanks 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?
October 23, 2020 at 1:10 pm #1501717TomLead DeveloperLead DeveloperGeneratePress itself doesn’t output the
<style>
element – that’s 100% WordPress using thewp_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.
October 23, 2020 at 5:19 pm #1501871vastThanks 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); });
October 24, 2020 at 10:00 am #1502618TomLead DeveloperLead DeveloperHi 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.
October 24, 2020 at 10:51 am #1502662vastThanks 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
October 25, 2020 at 11:45 am #1503795TomLead DeveloperLead Developer1. 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.
October 25, 2020 at 12:26 pm #1503841vast1. 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?
October 26, 2020 at 10:20 am #1505097TomLead DeveloperLead DeveloperAdding 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!
October 26, 2020 at 11:32 am #1505186vastThanks Tom. We’ll keep an eye out for the changes. We are looking forward to them.
October 26, 2020 at 2:03 pm #1505362TomLead DeveloperLead DeveloperNo problem – appreciate all the feedback and suggestions ๐
-
AuthorPosts
- You must be logged in to reply to this topic.