Thinking about a better way of doing dynamic CSS for shortcodes

[andreiglingeanu]

First, I would like to know what techniques do you really use?

The most simple one is of course using style attribute, like this:

<p style="color: <?php echo esc_attr($atts['color']) ?>;" >Hello, World!</p>

I would simply skip this idea because it is obvious and HTML looks very ugly.

---

Next one, as described here: You have to hook onto an action and then call wp_add_inline_style function. The problem with this is that you are committing yourself to one specific css file because of the way wp_add_inline_style works.

While doing WP-Shortcodes, I've noticed a big problem with this. The dynamic styles for each of the shortcode you're inserting into post editor (or any wp-editor) won't be included.

The thing we adhered to is that wp-editor won't include Unyson button by default. That's because you'll have to do apply do_shortcode function to the result you're receiving from wp-editor. And also call a helper that we'll implement later that will include all the dynamic CSS.

The problem is that this will introduce two problems:

1. Theme developers will have a little more work while integrating wp-editor
2. You'll have one more <style> tag besides each included shortcode

The second one is most annoying.

Shortcodes from post editor can be handled a bit more easily -- without developer's implication.

---

Let me know what you think about all of this.

[ghost]

Shortcodes from post editor can be handled a bit more easily -- without developer's implication.

How they do the enqueue of css and dynamic css?

[llemurya]

maybe with CSSOM https://github.com/israelidanny/veinjs

[ghost]

It's almost the same as inline css

@andreiglingeanu I would simply skip this idea because it is obvious and HTML looks very ugly.

[andreiglingeanu]

@moldcraft Not quite. There can be LOTS of css and the flexibility is going down very fast.

@llemurya It is better to add it from backend. Doing this operation from JS in the frontend at a regular basis can:

1. slow down frontend
2. Double the CSS on the page (you'll have to add it somewhere in every shortcode, smth like data-fw-shortcode-dynamic-css).
3. Introduce flickers (the phase when the CSS will not be yet loaded). That's very annoying.

[danyj]

I am using the head embed , no inlines at all because as you said they are very ugly and unorganized ,

The problem with this is that you are committing yourself to one specific css file because of the way wp_add_inline_style works.

I dont see problem in there because you have min one styleshet in your theme so why not use that ,

I went one step further and created a CSS collect class that I am using in each shortcode

ThzDochead::getDocument()->addCssInhead( $add_css );

where add_css is the var that holds the dinamic css for the shorcode

than I call the wp_add_inline_style only once in the hooks

/**
 * Dynamic CSS
 */
function _thz_action_enqueue_dynamic_scripts() {


    // theme settings collection
    $add_css = _thz_site_dynamic_css();

    // Google fonts collection
    if ( isset( ThzDochead::getDocument()->dochead['googlefont'] ) && !empty( ThzDochead::getDocument()->dochead['googlefont'] ) ) {        

        $all_google_fonts = implode( '|', array_unique( ThzDochead::getDocument()->dochead['googlefont'] ) );
        $google_font_url  = add_query_arg( 'family', urlencode( $all_google_fonts ), "//fonts.googleapis.com/css" );
        wp_enqueue_style( THEME_NAME . '-google-font', esc_url( $google_font_url ), false, null, 'all' );
    }

    // cssinhead shortcodes collection
    if ( isset( ThzDochead::getDocument()->dochead['cssinhead'] ) ) {
        $add_css .= implode( ThzDochead::getDocument()->dochead['cssinhead'] );
    }


    // custom CSS , last
    $add_css .= thz_print_codes('custom_css');

    wp_add_inline_style( THEME_NAME . '-template', $add_css );


}

add_action( 'wp_enqueue_scripts', '_thz_action_enqueue_dynamic_scripts', 90 );

this way I ednup with nice and clean embed , that I can also compress to a file etc.
http://prntscr.com/bph1or

which changes depending on where you are and if the shortcode is used or not

[andreiglingeanu]

I dont see problem in there because you have min one styleshet in your theme so why not use that ,

Sometimes when you are loading it TOO early, the theme css is not yet loaded, for some reason. We need a bulletproof one that will be around 100%. That's what I'm looking for now.

@danyj Yeah, we're also using this technique internally.

[danyj]

@andreiglingeanu well , WP never introduced something like this
https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
https://api.joomla.org/cms-3/classes/JDocument.html

which would be perfect for your issue and everyone else so we are stuck on wp_add_inline_style or the ugly inlines.

[andreiglingeanu]

Okay, I figured it out how it works.

The good news are that you can insert any shortcode directly in the post editor, and this will handle it accordingly. The bad ones consist of the fact that you can't just insert them anywhere else without much work.

I'll try to categorise all the use cases below and the work you have to do for each of them.

use case\what you get	HTML	assets from static.php	dynamic css
1. Shortcode In Post Editor	👍	👍	👍
2. Shortcode in wp-editor of any Page-Builder Shortcode	👍	👍	👍
3. Shortcode in wp-editor of that is inserted anywhere else (like Theme Settings or any fw.OptionsModal)	👍	❌	❌

Notes:
In category 2. and 3. you'll have to do echo do_shortcode($wp_editor_content); in order to get HTML.

The parts with ❌ you're supposed to handle by yourself. With veinjs or whatever else.
They are easily fixable with fw_ext_shortcodes_enqueue_shortcodes_static helper, you should pass editor's content as it's argument. The trick is to call it correctly at the right time.

---

To conclude, there's no way of getting an universal solution for all of this. That's it, we tried and we failed.
Let me know if you think about something better.

[danyj]

@andreiglingeanu , can you provide the snippets for 2 and 3 , for assets and dynamic css that we can use please.

[andreiglingeanu]

@danyj Will do. Actually I'll link you to the docs entry for this that will be added later.

[andreiglingeanu]

Upd. Because of this now shortcodes within other PB Shortcodes are handled correctly (use case 2). Table below also update.

Detailed documentation to come.

PS: Can anyone help with some CSS? Pull requests welcome!

[danyj]

@andreiglingeanu about the static and dynamic anywhere ,

this is my notification shortcode static

http://prntscr.com/bv9z4v

isnt there any way for you to add a hook or custom term to the post once the shortcode is inserted via editor so that I could do something like this

add_action('fw_shortcode_notification_active','_thz_notification_css');

I mean , I can make that function available in my helpers.php and call it where ever you give the hook, it does not have to be bound to static.php since I use same coding pattern in every shortcode.

[andreiglingeanu]

@danyj Do you mean dealing about 3rd use case?

[danyj]

Do you mean dealing about 3rd use case?

yes, if at all possible, il bend over and backwards since I am not done and that feature would mean alot.

[andreiglingeanu]

Let's say you have an editor in TS and you can get it's result like this:

$content = fw_get_db_settings_option('editor');

// add this HTML somewhere in your templates, like this
echo do_shortcode($content);

Now you're done with first phase - HTML, two more to get done.
Now let's deal with statics:

add_action( 'wp_enqueue_scripts', '_handle_my_editor_statics' );

function _handle_my_editor_statics () {
  // get same content once again
  $content = fw_get_db_settings_option('editor');

  // then use it to load all of the statics for your shortcodes
  // both `static.php` and dynamic ones
  fw_ext_shortcodes_enqueue_shortcodes_static(
    $content
  );
}

And don't forget to add 'shortcodes' => true to your wp-editor.

And you're all covered.

[danyj]

ok than that is the solution 👍 , why are you marking it as not possible?

[danyj]

should rather mark as manual instead "no" here

[andreiglingeanu]

Yeah, I really meant that you have to do some more work in order to get this done correctly.

[danyj]

I'm sure none of us mind the work when something like this is in question. we waited to long for the "Holy Andrei" :))))

[andreiglingeanu]

@danyj Yeah) Let me know how it goes, especially if it goes wrong.

[danyj]

@andreiglingeanu , just tested the custom dynamic CSS addon #62 (comment)

and works like charm! THANK YOU!!!!

[andreiglingeanu]

@danyj Great news, I've also tested it a lot and looks like it works fine. It may also appear some small flaws, and I am aware of that. Just keep me in sync with all of this.

---

I should really finish the docs for this one, but didn't really had time for this.

[tlartaud]

Hi there, hi @andreiglingeanu
Is it possible to add the WP Shortcodes button on a non-tinyMCE WP Editor on the frontend ? I use Summernote on my theme on frontend which is a standard textarea switched on domReady to an advanced text editor using jQuery. Any way to have shortcodes working on a textarea on the frontend ? Is it limited to tinyMCE ? Should the shortcodes button work on a tinyMCE wp-editor displayed on the frontend ?

Regards.

[andreiglingeanu]

on the frontend

Not impossible. We just need the right guy to come up with a pull request for that. I won't even try to do this for now.

standard textarea switched on domReady to an advanced text editor using jQuery

That's also possible. You'll just have to think about some other way to visualise your shortcodes in textarea -- your business.

Is it limited to tinyMCE

It is working only on tinyMCE for now. But there's nothing stopping you from implementing the UI in some different way. Good luck.

Should the shortcodes button work on a tinyMCE wp-editor displayed on the frontend

It won't.

[dmbostan]

Guys,
wouldn't it be easier to generate a css file on save_post / theme options save?

I mean I use the page builder mostly and do a lot of changes to sections, columns, etc. and it bothers me that styles are in head of HTML and not in files.

Why not create dynamic css files on save? One for section, another for columns, based on how many shortcodes are used on a specific page. And display that specific CSS files for that specific page?

Or ...

add extra option to options

    'type'  => 'color-picker',
    'value' => '#FF0000',
   ...
    'in_css' => array('background-color')
)

Let's parse each option and read the value and in_css. And based on this generate a dynamic css file.

Just ideas :)