[Resolved] CSS editor of templates doesn't work

[Author]

Posts

[BV]

After the last update of your plugins, my additional styles for custom type template (which you edit in "CSS editor field") stopped working.

I found the place where the bug appears. When I use such code:

<style>
.clubphotos img {margin: 15px 15px 0 0 !important; max-width: 20% !important;}
</style>

At pages, I receive such output (for example here: hidden link)

<script type="text/javascript">/*<![CDATA[*/const wpvCtHead=document.getElementsByTagName("head")[0];const wpvCtExtraCss=document.createElement("style");wpvCtExtraCss.textContent=`<style>.clubphotos a img{margin:15px 15px 0 0!important;max-width:20%!important}</style>`wpvCtHead.appendChild(wpvCtExtraCss);/*]]>*/</script>

As you can see, there is no ";" divider before new javascript command "wpvCtHead.appendChild". Pls, fix this bug!

[Shane]

Hi Maxim,

Thank you for getting in touch.

Can you try removing the style tags for your css ? As you don't need the style tags given that the css is added to the CSS editor for your template.

Please try this and let me know if the result is the same.

Thanks,
Shane

[BV]

It was necessary for previous versions of plugins. But yes, I tried to remove it. I'm pretty sure it doesn't work like this in js:

`wpvCtHead.appendChild

but have to be

`;wpvCtHead.appendChild

[Shane]

Hi Maxim,

I'm not aware of this requirement for the css to have the style tag when added to the CSS editor.

Would you mind allowing me to have admin access to the site as well as a link to the template that you've added this css to ?

Thanks,
Shane

[BV]

I found why this problem happens: as you don't use ";" in page js after string vars and because I use minification of pages, the js breaks after page became minified.

Pls, fix this if possible in next plugin versions. Examples:

<script type="text/javascript">
const wpvViewHead = document.getElementsByTagName( "head" )[ 0 ];
const wpvViewExtraCss = document.createElement( "style" );
wpvViewExtraCss.textContent = `<!--[if IE 7]><style>
.wpv-pagination { *zoom: 1; }
</style><![endif]-->
`
wpvViewHead.appendChild( wpvViewExtraCss );
</script>

<script type="text/javascript">
const wpvCtHead = document.getElementsByTagName( "head" )[ 0 ];
const wpvCtExtraCss = document.createElement( "style" );
wpvCtExtraCss.textContent = `/* ----------------------------------------- */
/* Content Template: template-for-swingers-clubs - start */
/* ----------------------------------------- */
.clubphotos img {margin: 15px 15px 0 0 !important; max-width: 20% !important;}
/* ----------------------------------------- */
/* Content Template: template-for-swingers-clubs - end */
/* ----------------------------------------- */
`
wpvCtHead.appendChild( wpvCtExtraCss );
</script>

Look at the closing "` " at new lines - it has to be finished with ";"

[BV]

I set to not minify inline js in Html, but that's quite incorrect to not finish lines with ";" in js 🙂

[florianM-2]

Hi !

I am having the same issue here when minimizing the content.

What file to edit to fix this bug ?

I have search the whole site and can't find it.
Thanks

[florianM-2]

I found it. Please Toolset team, update the plugin

File :
/wp-content/plugins/wp-views/embedded/inc/wpv.class.php
Line 3706

$vanilla_js_for_css_out .= 'wpvViewHead.appendChild( wpvViewExtraCss )' . "\n";

to

$vanilla_js_for_css_out .= 'wpvViewHead.appendChild( wpvViewExtraCss );' . "\n";

Yes that's only ";" at the end
THanks

[Shane]

Hi Maxim,

Can you let me know if the solution that florian suggested works for you ?

Thanks,
Shane

[BV]

Nope. I found another such error:

$vanilla_js_for_css_out .= 'wpvViewExtraCss.textContent = `' . $extra_css . '`' . "\n";

And fixed it:

$vanilla_js_for_css_out .= 'wpvViewExtraCss.textContent = `' . $extra_css . '`;' . "\n";

And it works, yes, js code is correct for this string of js, but not the string where my style has an issue, something related to "wpvViewExtraCss.textContent". But I have no time and wish to search in other files 🙂

So you have several of such bugs in your inline js. Maybe - even in some external js, I don't know. It's a systematic error with multiline text strings - no semicolon after the closing quote.

So it's better to check all the code for such mistakes.

As about Florian solution - the string which he referring is correct in my version of the plugin.

As I said I just switched off the minifying of inline js and it works. But it would be good to fix this at the plugin level. So you better forward our discussion to person who does the coding of this part, except this I don't need any support.

[Shane]

Hello,

I've escalated the issue to our 2nd tier supporters for further checks and testing of this issue.

Hopefully a more permanent fix will be provided.

Thanks,
Shane

[florianM-2]

"As about Florian solution - the string which he referring is correct in my version of the plugin."

Actually I don't remember but it was probably changing the line Maxime shared that fixed my issue.

I might have cut and paste the wrong line.

Thanks

[Shane]

Hi Guys,

I'm pleased to announce that our development team has fixed this issue and will be published in our next release.

Unfortunately i'm not seeing where there is a release date for this. However you can expect the fix in the next release.

Thanks,
Shane

[mihailC]

The same problem in the file /wp-views/embedded/inc/views-templates/wpv-template.class.php

Line 1168:

$vanilla_js_for_css_out .= 'wpvCtExtraCss.textContent = `' . $cssout . '`' . "\n";

Need to add semicolon:

$vanilla_js_for_css_out .= 'wpvCtExtraCss.textContent = `' . $cssout . '`;' . "\n";

Otherwise, an error occurs during inline js minification: Uncaught SyntaxError: Unexpected identifier