Un bug qui semble systématique lorsque l’on utilise le module Visual Composer ou un thème qui l’utilise, et que l’on applique la dernière mise à jour WordPress 4.5.2. L’édition des pages n’est plus possible car les blocs du Visual Composer ne s’affichent plus et on obtient une page blanche. Seule l’édition en mode texte reste possible.
Premier cas de figure : Visual Composer 4.10 et WordPress 4.5.2
Contexte : thème Salient 4.10 qui utilise Visual Composer apparemment en version 4.10 également. En ouvrant la console Javascript du navigateur, on peut lire le message TypeError: .template(...).trim is not a function .
La solution consiste à modifier la fonction html2element dans le fichier backend.min.js situé dans le répertoire wp-content/plugins/js_composer_salient/assets/js/dist .
Avant modification du code :
|
1 2 3 4 5 6 |
html2element: function(html) { var $template, attributes = {}; _.isString(html) ? (this.template = _.template(html), $template = $(this.template(this.model.toJSON(), vc.templateOptions["default"]).trim())) : (this.template = html, $template = html), _.each($template.get(0).attributes, function(attr) { attributes[attr.name] = attr.value }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent() }, |
Après modification du code :
|
1 2 3 4 5 6 7 |
html2element: function(html) { var $template, attributes = {}, template = html; $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) { attributes[attr.name] = attr.value }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent() }, |
Dans ce contexte avec le Visual Composer version 4.10, cette modification suffit à corriger le problème.
Second cas de figure : Visual Composer dans Salient 4.0.3 et WordPress 4.5.2
Contexte : thème Salient 4.0.2 qui utilise Visual Composer dont la version est inconnue. En ouvrant la console Javascript du navigateur, on peut lire le même message TypeError: .template(...).trim is not a function .
La correction nécessite la modification de deux fichiers javascript.
Premièrement, modification de la fonction html2element dans le fichier composer-view.js situé dans /wp-content/themes/salient/wpbakery/js_composer/assets/js/backend .
Avant modification du code :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
html2element:function (html) { var attributes = {}, $template; if (_.isString(html)) { this.template = _.template(html); $template = $(this.template(this.model.toJSON()).trim()); } else { this.template = html; $template = html; } _.each($template.get(0).attributes, function (attr) { attributes[attr.name] = attr.value; }); this.$el.attr(attributes).html($template.html()); this.setContent(); this.renderContent(); }, |
Après modification du code :
|
1 2 3 4 5 6 7 |
html2element:function (html) { var $template, attributes = {}, template = html; $template = $(template(this.model.toJSON()).trim()), _.each($template.get(0).attributes, function(attr) { attributes[attr.name] = attr.value }), this.$el.attr(attributes).html($template.html()), this.setContent(), this.renderContent() }, |
Cela ne suffit pas car on tombe sur le message d’erreur Uncaught Error: Syntax error, unrecognized expression: .ui-tabs-nav [href=#tab-145596265-1-8] dans la console javascript. Il faut modifier la fonction changeShortcodeParams dans la définition de window.VcTabView dans le fichier composer-custom-views.js (même répertoire).
Avant modification du code :
|
1 |
$('.ui-tabs-nav [href="tab-' + params.id + ']').text(params.title); |
Après modification du code (les guillemets) :
|
1 |
$('.ui-tabs-nav [href="#tab-' + params.id + '"]').text(params.title); |
